Продвинутое прототипирование с переменными в Фигме

Рассмотрим новые возможности прототипирования в Фигме, которые стали доступны благодаря переменным. Начнем с простых примеров дабы изучить функционал, а в конце видео соберем полноценный экран прототипа корзины товаров.
Полезные видео по теме:
Переменные в Фигме - • Переменные в Фигме
Интерактивные компоненты в Фигме - • Интерактивные компонен...
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

Пікірлер: 37

  • @kjaizhanov4737
    @kjaizhanov473711 ай бұрын

    Не представляю сколько времени ты потратил на изучение всего, спасибо тебе

  • @AzaSpektr
    @AzaSpektr7 ай бұрын

    Дизайнер плавно превращается в программиста)

  • @KUYUJUKLU1995

    @KUYUJUKLU1995

    3 ай бұрын

    наконец дизайнеры начнут понимать программистов

  • @ukhadee
    @ukhadee7 ай бұрын

    Очень полезный и понятный контент. Если выходит новое обновление в Figma, то смотрю только на твоем канале. Спасибо за твою работу, жду новых видео ❤

  • @re_anna
    @re_anna11 ай бұрын

    Ваучки! Спасибо за обзор)

  • @TZharova
    @TZharova7 ай бұрын

    просто вау🔥🔥🔥 Спасибо!!

  • @andrew_artf3167
    @andrew_artf316711 ай бұрын

    Спасибо за видео. Всегда очень круто)

  • @holy_doll
    @holy_doll11 ай бұрын

    спасибо за видео ❤ очень подробно и наглядно

  • @jenyaso5135
    @jenyaso513511 ай бұрын

    как всегда очень доступно и подробно!! спасибо!

  • @natashazharova3959
    @natashazharova395911 ай бұрын

    Спасибо за такой последовательный разбор) Финальный пример 🔥

  • @lehataran2962
    @lehataran296211 ай бұрын

    огромное спасибо!

  • @milaabrikos
    @milaabrikos9 ай бұрын

    Продолжайте, пожалуйста, выпускать видео! Вы очень круто объясняете! Спасибо, за очень крутой контент!

  • @eclechenza
    @eclechenza5 ай бұрын

    Супер полезно и понятно! Спасибо большое за крутейшеий туториал!

  • @iCosmictube
    @iCosmictube11 ай бұрын

    ТОП! Спасибо

  • @user-uq1vf8kk2n
    @user-uq1vf8kk2n11 ай бұрын

    Редко пишу комментарии , но ты красавчик ) Спасибо тебе

  • @thegilfany
    @thegilfany10 ай бұрын

    Спасибо!

  • @iCosmictube
    @iCosmictube11 ай бұрын

    35:48 Засада - режимов переменных на платной макс. только 4 штуки, за большее количество нужно больше денег заплатить )

  • @Shiva-jl8jk
    @Shiva-jl8jk10 ай бұрын

    Лайк за время 4:21 :) после баночки дизайны дизайнятся ;)

  • @silence8338
    @silence83389 ай бұрын

    Сейчас в работе над проектом понял, что длину бара на 16:35 можно ограничить более оптимальным и быстрым способом. Шейпу можно просто задать min\max width в 0 и 600px соответственно.

  • @user-jv9lz3fg5t

    @user-jv9lz3fg5t

    7 ай бұрын

    Как раз хотела спросить, можно ли ограничить длину описанным вами способом :)

  • @its_nika_11
    @its_nika_119 ай бұрын

    Вау, это очень круто! Спасибо большое! Подскажите пожалуйста, а для того чтобы сменить язык, условно на лендинге, при нажатии на btn в прототипе тоже нужно воспользоваться данным способом или все таки возможно как-то по старинке еще это отобразить ? Очень ищу возможность показать смену языка на странице 🙏

  • @elenazapolskikh207
    @elenazapolskikh2074 күн бұрын

    Привет! Спасибо за клевый тутор!) Подскажи, а возможно по той же схеме что и с градусами менять месяц в календаре?

  • @user-uz6sr7oe6d
    @user-uz6sr7oe6d11 ай бұрын

    Применяемые примеры

  • @liudmyla4706
    @liudmyla470610 ай бұрын

    52:42 - курсор навести слева от формул, нажать и перетащить повыше. Вслепую не получится.

  • @instakotik
    @instakotik3 ай бұрын

    45:40 клуб любителей изобрести велосипед и танцевать с бубном. Минус должен стать просто неактивен при значении ≤1. Удаление из корзины минусом = непредсказуемое поведение системы, учите матчасть!

  • @Alex-tz2nr
    @Alex-tz2nr6 ай бұрын

    Спасибо большое за урок! У меня есть вопрос: как сделать переключение бэкграундов? В приложении на светлой и темной теме есть свои бг со с градинтеми и прочими вложенностями, сейчас это делаю руками

  • @disarto.digital

    @disarto.digital

    6 ай бұрын

    К сожалению, сейчас можно сделать переключение бэкграундов, использующих в качестве фона только цвет. Если у вас фон со сложными эффектами, то переключать придется вручную.

  • @mariaurk1191
    @mariaurk11916 ай бұрын

    Подскажите начинающему фигмаюзеру. Можно ли например как то сделать так чтобы при нажатии на чек бокс с доставкой автоматически добавлялась сумма доставки к итоговой стоимости, а при не нажатии не добавлялась?

  • @disarto.digital

    @disarto.digital

    6 ай бұрын

    Можно. В переменной x будет храниться сумма без доставки, в переменной y только сумма доставки. По нажатию на чекбокс нужно написать выражение переменная x + переменная y.

  • @user-on8js8ed7x
    @user-on8js8ed7x9 ай бұрын

    У меня почему-то формула перевода в Цельсия не встаёт. Я её ввожу в варианты, а она покачивается. Знак варианта справа не появляется. Измучилась вся.

  • @lk6618
    @lk66187 ай бұрын

    в видео не было уделено внимание вариантам, и тому как правильно работать со свойствами, как из свойств вариантов создавать переменные

  • @user-uc7qh1kq5h

    @user-uc7qh1kq5h

    4 ай бұрын

    а это целая отдельная тема

  • @lk6618

    @lk6618

    4 ай бұрын

    @@user-uc7qh1kq5h а что там отдельного стринг, название значение и присвоение варианту

  • @Osigot
    @Osigot7 ай бұрын

    Эти штучки же не будут работать на базовой Фигме? (Видео пока не смотрел :))

  • @disarto.digital

    @disarto.digital

    7 ай бұрын

    Всё верно. На бесплатной версии к сожалению этот функционал недоступен.

  • @user-wq6xd2qr4y
    @user-wq6xd2qr4y9 ай бұрын

    Привет! Огромное спасибо за выпуск, очень классно! Вместе с предыдущим даёт отличные возможности. Появился вопрос. Твой разбор примера с кликом по номеру и, соответственно, изменением карточки я попробовал применить в содержимому дропдауна. Идея та, что выбирая что-то в выпадающем списке, меняется содержимое поля. И это всё отлично работает... но ровно до того момента, как я оборачиваю инстанс в компонент (в нём мне нужно сделать анимацию наведения на поле и появление собственно списка). Это аналогично тому, что ты решил бы в своём примере поместить кружки с цифрами и изменяющимся изображением с подписью в один компонент. Не подскажешь, в чём тут фишка? Все переменные перестают работать, как только поле ввода становится частью другого компонента. Спасибо за подсказку!

  • @andreyb3835
    @andreyb383510 ай бұрын

    Спасибо!

Келесі