Продвинутое прототипирование с переменными в Фигме
HTML-код
- Опубликовано: 26 июл 2024
- Рассмотрим новые возможности прототипирования в Фигме, которые стали доступны благодаря переменным. Начнем с простых примеров дабы изучить функционал, а в конце видео соберем полноценный экран прототипа корзины товаров.
Полезные видео по теме:
Переменные в Фигме - • Переменные в Фигме
Интерактивные компоненты в Фигме - • Интерактивные компонен...
EУмные анимации в Фигме (Smart animate) - • Умная анимация в Фигме...
Фигма файл с экраном корзины из видео (если вы хотите потренироваться на том же примере) - www.figma.com/file/JB5kI0kCn7...
Мои курсы:
Курс по Фигме - cloudlessons.ru/v/400/
Курс по UI/UX дизайну - • Анонс курса по UI/UX д...
00:00 - Простейший пример использования переменных в прототипе
06:56 - Использование переменных с текстом
09:21 - Выбор вариантов компонента с помощью переменных
13:37 - Интерактивный volume bar
15:42 - Введение в Conditionals (условия)
17:55 - Добавляем цветовую переменную к примеру с volume bar
23:11 - Смена фона по нажатию на toogle
27:14 - Пример прототипа с использование переменной boolean
32:44 - Закрепляем все изученное на сложном примере (интерактивная корзина товара)
Подписывайтесь на соцсети:
Телеграм: t.me/uiux_dsgn
Инстаграм: / disarto.digital
Behance: www.behance.net/Dexo
Dribbble: dribbble.com/Dexo
Не представляю сколько времени ты потратил на изучение всего, спасибо тебе
Дизайнер плавно превращается в программиста)
наконец дизайнеры начнут понимать программистов
Очень полезный и понятный контент. Если выходит новое обновление в Figma, то смотрю только на твоем канале. Спасибо за твою работу, жду новых видео ❤
Спасибо за такой последовательный разбор) Финальный пример 🔥
как всегда очень доступно и подробно!! спасибо!
Спасибо за видео. Всегда очень круто)
Продолжайте, пожалуйста, выпускать видео! Вы очень круто объясняете! Спасибо, за очень крутой контент!
Ваучки!
Спасибо за обзор)
Супер полезно и понятно! Спасибо большое за крутейшеий туториал!
спасибо за видео ❤ очень подробно и наглядно
Редко пишу комментарии , но ты красавчик ) Спасибо тебе
просто вау🔥🔥🔥 Спасибо!!
35:48 Засада - режимов переменных на платной макс. только 4 штуки, за большее количество нужно больше денег заплатить )
Лайк за время 4:21 :) после баночки дизайны дизайнятся ;)
огромное спасибо!
ТОП! Спасибо
Спасибо!
Сейчас в работе над проектом понял, что длину бара на 16:35 можно ограничить более оптимальным и быстрым способом.
Шейпу можно просто задать min\max width в 0 и 600px соответственно.
Как раз хотела спросить, можно ли ограничить длину описанным вами способом :)
Привет! Спасибо за клевый тутор!)
Подскажи, а возможно по той же схеме что и с градусами менять месяц в календаре?
Вау, это очень круто! Спасибо большое! Подскажите пожалуйста, а для того чтобы сменить язык, условно на лендинге, при нажатии на btn в прототипе тоже нужно воспользоваться данным способом или все таки возможно как-то по старинке еще это отобразить ? Очень ищу возможность показать смену языка на странице 🙏
Видео очень крутое, только понять не могу зачем вы постоянно делаете мастер компонент, а после объединяете, если можно сразу в компонент сет объединить?
45:40 клуб любителей изобрести велосипед и танцевать с бубном. Минус должен стать просто неактивен при значении ≤1. Удаление из корзины минусом = непредсказуемое поведение системы, учите матчасть!
52:42 - курсор навести слева от формул, нажать и перетащить повыше. Вслепую не получится.
Применяемые примеры
Спасибо большое за урок!
У меня есть вопрос: как сделать переключение бэкграундов? В приложении на светлой и темной теме есть свои бг со с градинтеми и прочими вложенностями, сейчас это делаю руками
К сожалению, сейчас можно сделать переключение бэкграундов, использующих в качестве фона только цвет. Если у вас фон со сложными эффектами, то переключать придется вручную.
Подскажите начинающему фигмаюзеру. Можно ли например как то сделать так чтобы при нажатии на чек бокс с доставкой автоматически добавлялась сумма доставки к итоговой стоимости, а при не нажатии не добавлялась?
Можно. В переменной x будет храниться сумма без доставки, в переменной y только сумма доставки. По нажатию на чекбокс нужно написать выражение переменная x + переменная y.
У меня почему-то формула перевода в Цельсия не встаёт. Я её ввожу в варианты, а она покачивается. Знак варианта справа не появляется. Измучилась вся.
в видео не было уделено внимание вариантам, и тому как правильно работать со свойствами, как из свойств вариантов создавать переменные
а это целая отдельная тема
@@user-uc7qh1kq5h а что там отдельного стринг, название значение и присвоение варианту
Эти штучки же не будут работать на базовой Фигме? (Видео пока не смотрел :))
Всё верно. На бесплатной версии к сожалению этот функционал недоступен.
Привет! Огромное спасибо за выпуск, очень классно! Вместе с предыдущим даёт отличные возможности.
Появился вопрос. Твой разбор примера с кликом по номеру и, соответственно, изменением карточки я попробовал применить в содержимому дропдауна. Идея та, что выбирая что-то в выпадающем списке, меняется содержимое поля. И это всё отлично работает... но ровно до того момента, как я оборачиваю инстанс в компонент (в нём мне нужно сделать анимацию наведения на поле и появление собственно списка). Это аналогично тому, что ты решил бы в своём примере поместить кружки с цифрами и изменяющимся изображением с подписью в один компонент. Не подскажешь, в чём тут фишка? Все переменные перестают работать, как только поле ввода становится частью другого компонента. Спасибо за подсказку!
Спасибо!