Интерактивные компоненты в Figma. Как сделать выключатель?
HTML-код
- Опубликовано: 8 окт 2024
- 🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.c...
В этом видео мы посмотрим как создать интерактивный компонент в Figma на примере тумблера. Эта фича позволяет создавать анимацию прямо в вариантах компонента, без необходимости отрисовки разных экранов. Затем вы сможете использовать такой интерактивный компонент в прототипе для создания эффектной презентации и визуализации вашего проекта.
❗️с 27.10.21 официально доступна всем!
👉 Бесплатный доступ к исходнику: www.buymeacoff...
🔗 Мои ссылки:
Мой канал в телеге: t.me/chyrkovfm
Мой авторский курс «Figma с нуля»: 👉 designsweets.c...
Студия: chyrkov.studio
Behance: www.behance.ne...
Dribbble: dribbble.com/c...
Портфолио по фото: sergeichyrkov.com
🎶 Музыка: / it-will-be-ok - LIQWYD "It will be OK"
_____________
#Figma #FigmaTutorial #UXDesign #Webdesign
Простая вещь, но так приятно когда она работает 🤩 спасибо за видео !
Спасибо за комментарий) рад, что все получилось!)
Очень полезный и понятный видеоролик, на доступном языке так ещё и за пару минут!
Спасибо) старался))
УРА! заработало в официальной версии))) GO юзать!
да наконец-то!)
все получилось с первого раза) спасибо)
Ура!) рад, что получилось!)
Сергей, здравствуйте! Очень интересный урок! Не могли вы рассказать в следующем ролике о своим любимым плагинах в Фигме, спасибо!
Сделаем!😉
Вчера продублировала все действия. захожу в прототип и..... не двигается. Пересматривала, переделывала. До головной боли. Так и легла спать, чуть ли не со слезами и в полном разочаровании в своих умственных способностях. Сегодня зашла в Фигму. Что вы думаете? ДА! Магия работает! Почему , простоглюк?
да к сожалению бывают глюки с Фигмой)
Блин, делаю все 1 в 1, но на этапе прототипирования у меня нет пункта Change to, и магия не работает, не подскажите в чем причина?
Привет! Интерактивные компоненты пока доступны только в Beta версии. Фигма обещает официальный релиз в начале апреля.
@@Chyrkov сейчас конец июня и до сих пор этого нет.
@@Chyrkov ааа а я три дня страдала )))
@@kpoxa127, спасибо за инфу, страдал 5 минут )), перестал страдать, как только комментарии прочитал, отсутствует Change to 😭
@@yevat-yan2790 до сих пор такая проблема.. неужели автор не мог сказать об этом на видео ? я даже поставил дизлайк ))
Сергей, мпасибо за урок. Но вот магия не получается. На видео, когда настраиваешь переходы, не видно состояние в настройках - "Property 1" on or off? Хотя по шагам делал и скорость уменьшил...
Привет! Спасибо за отзыв! Чтобы появились состояния вам нужно создать интерактивный компонент с вариантами. Один вариант вы называете on, а второй off 🙂
Очень клёво и полезно, спасибо!
Такой вопрос: я правильно догадываюсь , что такую Смарт анимацию можно было сделать и без создания компонентов и вариантов, да?
Это нужно для того, чтобы применить их сразу на нескольких страницах прототипа интерфейса, верно?
Можно было но тогда бы вам пришлось делать два макета например страницы сайта: одна страница где выключен тумблер, вторая где он включён. А с помощью интерактивных компонентов вы делаете все внутри одно компонента. Получается, что на одном макете у вас может быть куча переключалок и анимации :)
Бомба, спасибо!
Рад, что зашло😊
Всё сделал как на видео,всё круто и получилось) но вопросик есть,у меня в конечном результате,когда переключаю, анимация немного за рамку выходит,не понимаю в чём дело и не знаю как объяснить:D
у Вас на видео всё четко по рамке переключается,а у меня при переключении анимация слева за рамку уходит и выглядит будто такая полупрозрачная
Спасибо за отзыв! Вам нужно корректировать размер фрейма так что был он был одинаковый по размеру в обоих вариантах, а объекты одинаково располагались внутри эти фреймов
большое спасибо!
На здоровье!)))
Так и не заработало(
сегодня официально запустили! ура!)))