Интерактивные компоненты в Figma, варианты использования
HTML-код
- Опубликовано: 10 сен 2024
- 🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.c...
В этом видео мы рассмотрим варианты использования интерактивных компонентов на разных примерах элементов интерфейса. Функция интерактивных компонентов позволяет вам создать анимации внутри вариантов одного элемента, что существенно сокращает время отрисовки дизайна и создания прототипа.
❗️с 27.10.21 "Интерактивные компоненты" официально доступны всем!
UPD:
Благодаря вопросу Александра Морозова, добавил вариант кнопки с телефоном, которая увеличивается из центра, а не по диагонали =).
👉 Бесплатный доступ к исходнику: www.buymeacoff...
🔗 Мои ссылки:
Мой канал в телеге: t.me/chyrkovfm
Мой авторский курс «Figma с нуля»: 👉 designsweets.c...
Студия: chyrkov.studio
Behance: www.behance.ne...
Twitter: / sergeichyrkov
Портфолио по фото: sergeichyrkov.com
🎶 Музыка: Ohayo "Smith The Mister" www.audiolibra...
_____________
#Figma #FigmaTutorial #UXDesign #Webdesign
![[NEW] 🔥 Figma Variants как пользоваться? Настраиваем варианты компонентов. Урок 15](http://i.ytimg.com/vi/UUJdwx_Jd74/mqdefault.jpg)
Блин, это просто огнище) Я начинающий дизайнер еще, и посмотрев несколько Ваших видео, получилось сделать то же самое) В восторге от того, как круто все это работает по итогу)
Собираюсь посмотреть все видео, Вы большой молодец) Лайк и подписка уже оформлена, жаль только один лайк ставится) Спасибо большое за Ваши видео!
Спасибо большое за тёплые слова!) рад, что все получается!))) удачи!)
Лайк можно под каждым видео поставить😉😅
@@Chyrkov Так и будет) Спасибо еще раз)
благодаря Вам я научилась работать Figma, а друг затащил в нее :D
спасибо)
Это замечательно!))
⚡️UPD
Всем привет! добавил в описание официальные ссылки на Figma Beta и на форму подачи запроса на подключение к тестированию Интерактивных компонентов.
Спасибо за наводку! Подключили, ура)
Не известно ли, как быстро они отрывают доступ?
Вроде бы в Бета версии уже всем доступна. Не понимаю почему они так тянут?…
Спасибо, все понятно, классно объясняете 🔥
Благодарю!))
Спасибо, не могла разобраться в теме, с вашим уроком все стало ясно)
здорово!)) рад, что помогло!
Ну что за магия🥰 спасибо за видеоуроки)
Пожалуйста 🤗
Спасибо Сергей за полезное видео. Спасибо
Пожалуйста! Рад, что понравилось!)
Клаааасс! Было бы вообще круто, если бы показали как рисовать некоторые компоненты, например я могу их рисовать по своему, но там у вас написаны по другому😂 мне начинающему надо по шагово 😅😅😅
В описании к видео есть ссылка на мой курс по Фигме) записывайтесь и я там все подробно рассказываю!😉
Исходник перезалейте пожалуйста, Не получается сделать анимацию, Change to нет такой вкладки в прототипах.
Артур, эта опция доступна пока только в бета-версии Фигмы и по запросу. Попробуйте им написать, чтобы вам раскрыли доступ)
@@Chyrkov Нафига тогда показывать эту функцию и не озвучивать о возможном ее отсутствии?
Минут 20 ломал голову.
@@grubogovorya8715 установите Figma Beta, эта функция уже многим доступна после запроса) и скоро будет доступна всем остальным, а вы уже будете к ней подготовлены))
Да я чуть не поседел. Потом прочел комментарии.
Дааа, тоже долго не врубалась, почему лыжи не едут, потом пошла в комменты.
прошло полгода, а простым смертным функция так и доступна без запроса.
если бы мог, обязательно повлиял бы на них, чтобы быстрее всем подключили))
Супер, все работает 😎 спасибо
Супер) я рад!) спасибо и вам!)
😍 класс!
Рад, что понравилось!)
А если карточек будет в три раза больше? Можно просто сделать разные состояния одной карточки (как и в кнопке) и затем в инстансах просто менять текст?
ага верно)
Как сделать чтоб "кнопочка с телефоном" из видео маштаби ровалась ИЗ центра а нек с боа?
Это решение уже есть в исходнике, посмотрите описание)
Урок хороший. Но применение интерактивного компонента для табов - плохое решение. Когда в реальном прототипе этот компонент будет использован, при нажатии на опцию будет происходить переход на другой фрейм (на то это и табы). Тут нужно использовать мастер компонент с тайтлами всех табов и прямо в нем законнектить тайтлы на нужные экраны. Затем создать уже компонент с вариантами (т.е. мастер компонент с тайтлами дополненный подчеркиваниями, как в уроке). Таким образом все меню во всех вариантах автоматически будут вести на нужные фреймы. При этом если менять местами/добавлять табы, то автоматически изменения применятся ко всему документу. Для переходов между экранами, установить Smart Animation, и в каждом экране выбрать правильный вариант компонента (подчеркивание в нужном месте). Тогда эффект будет как надо. Т.е. для кейсов, когда по клику на инстанс происходит переход на другой фрейм, интерактивные компоненты не подходят.
спасибо за ваш комментарий! это всего лишь пример возможного применения интерактивных компонентов. Табы кстати могут и не вести на другие фреймы, а могут менять контент ниже, как фильтры. Еще эти табы можно сделать в виде селектов каких-то значений в анкете например. Вариантов масса! Главное придумать как применить)))
@@Chyrkov Спасибо, за Ваш ответ! Да, вариантов масса. Я только хотел подчеркнуть, что в случае, если на инстанс компонента заведено два действия по одному и тому же типу взаимодействия (например, по клику) - в режиме иинтерактивного компонента и в обычном режиме - то figma покажет Warning (восклицательный знак в кружке) рядом с интерактивным взаимодейтсвием в панели инструментов (вкладка Prototype). Интерактивное взаимодействие не будет отрабатывать в этом случае. Это как раз ситуация с табами. Также можно было подчеркнуть, что Auto Layout не работает при изменении размера интерактивного компонента. В то же время появилась очень крутая возможность делать nested интерактивные компоненты. Т.е. можно вкладывать друг в друга интерактивные компоненты и они будут продолжать работать (например, скроллы в скролле, чекбокы в фильтре). Вот что мне точно не хватает - это возвращение к исходной форме компонента. Например, начекал чекбоксов в прототипе и хочешь нажать кнопку Clear all. Сделать это получится только один раз (перейти к пустому варианту компонента), т.к. интерактивный компонент хранит стейты каждого варианта (что тоже полезно).
Боже, вот бы от вас видео урок, как это сделать. Чувствую, что какое-то костыльное решение показано, а как по-другому - не понимаю. Очень хочется разобраться, что такое мастер-компонент с тайтлами всех табов(( И да, "послезавтра" пишется слитно (это Сергею).
@@user-tq2xo3lt3z спасибо) у кого-то глаз-алмаз!)) подправил
у меня такой вопрос, как в сделанных в родительских компонентах полях ввода с auto layout можно вводить текст?
не можно, а нужно!))))) конечно текст меняется на любой, который вам нужен в родительских и дочерних компонентах
@@Chyrkov сделайте отдельное видео, пожалуйста. Мне лучше увидеть и понять, чем прочесть. Наглядный пример всяко лучше)
Странно, а у меня не получается в фильтрах настроить привязки. Я создала текстовые фреймы, сделала так же как у Вас обозначения фильтров, делаю всё секунда в секунду, но у меня привязка срабатывает только на вариант полностью, а не не отдельный текстовый фрейм.....
нужно проверить есть привязи у текстового блока внутри фрейма
Ты супер!
Спасибо) ты тоже!🙌
Класс 👍👍👍👍
Только почему сразу нельзя создать компонент, а потом несколько вариантов? А именно сначала сделать так как надо, а только потом перенести в мульти компонент для прототипирования?
Потому что так не получится))) чтобы сделать компонент с вариантами нужно создать хотя бы компонента, потом их объединить. После можно добавлять сколько угодно вариантов))
@@Chyrkov спасибо за ответ 🙏😁
Пожалуйста!)
Добрый день! Можно сделать так, что-бы при увеличении компонента он не уходил в какую-либо сторону? :-), я не смог добиться этого... У Вас на видео тоже уходит вправо а не по центру, имею ввиду компонент с телефонной трубкой.
Спасибо!
Добрый день! Александр, спасибо за ваш вопрос! Я обновил макет и добавил кнопку, которая увеличивается из центра. Для этого нужно разместить первую кнопку в центре фрейма большого размера. Затем скопировать его и уже в копии увеличить кнопку внутри фрейма из центра. Затем, через smart-animate линкуем фреймы и магия работает! Макет обновил по той же ссылке, приятного использования!)
Подскажите пожалуйста, как делать ползунок, который на Фильтрах.
У меня на канале есть отдельное видео на эту тему, смотрите про плеер
Подскажите пожалуйста, а где именно? Есть только музыкальный плеер, но это не то. Мне бы хотелось, где как черточка передвигается, как в Табах у вас, где вы фильтры показываете., внизу маленькая красная черточка, которая двигается.@@Chyrkov
@@user-gl1yc3ty3c ага, а что именно не получается? вы просто создаете прямоугольник в одном варианте и потом его двигаете в других)
Супер понятно, спасибо! Вопрос, столкнулась с такой проблем: нужно чтобы при наведении увеличивалась картинка, и аналогичным образом картинки рядом. При увеличении картинка находит на находящиеся рядом. Но поверх она ложится, только если компонент находится сверху, а ясное дело все картинки не могут быть сверху (они упорядочены). И получается, что увеличение идет не поверх, а по низу. Если такое вообще решаемо при работе с компонентами
привет! если я правильно понял задачу тебе надо: сделать эффект увеличения например 3 рядом стоящих картинок по наведению на одну из них. Вижу решение так. Сначала делаем один фрейм, где располагаем маленькие картинки в ряд. Копируем этот фрейм и увеличиваем все 3 картинки, наставляем их как нужно. Затем делаем из этих 2 фреймов интерактивный компонент через смарт анимацию. Важно чтобы размер фрейма был одинаковый и достаточно большим, чтобы на втором был запас куда картинки увеличивать. Надеюсь помог)))
@@Chyrkov спасибо за ответ)
Сергей, у вас очки на видео для зрения? Или для компьютера специальные? Не подскажите какие линзы?) Заранее благодарю
Привет! Очки для зрения)) со специальным антибликовым покрытием, которое снимает напряжение на глаза от света экранов)
@@Chyrkov спасибо за ответ 🙏
Доброго времени суток. Спасибо за урок. А что делать, если нету в интерекшн действия Change to?
добрый день! На сколько мне известно интерактивные компоненты уже доступны всем пользователям в Figma Beta, можете установить ее с официального сайта: help.figma.com/hc/en-us/articles/360039823654-Download-the-Figma-desktop-app
@@Chyrkov Да, к сожалению, если просто скачать бету, что я и сделал, до того как задать вопрос - ситуацию это не исправит. Похоже, без запроса на доступ пока никак. Запросил утром, интересно как быстро предоставляют доступ))
надеюсь все получилось!)
А почему не сделать сегодня завтра послезавтра тоже через инстанс, с автолейаутом, и подчеркивание не двигать, оно само будет скейлится по тексту. И далее просто выбирать или прописывать ручками на крайняк?
можно и так) но тут хотелось показать именно через интерактивные компоненты)
Хорошо. Ещё во время добавления теней и других эффектов всё же проще пользоваться горячими клавишами, когда нужно делать повторяющиеся действия. Ты же ведь не один год дизайнером работаешь 😉
Спасибо за комментарий! Полностью согласен! Но заметил, что не все, кто смотрит, знают горячие клавиши и им проще запоминать визуально, что куда и где нажимается))) но в работе безусловно, горячие клавиши экономят часы!)
@@Chyrkov вот вот, я учусь и благодаря вашим видео, я запоминаю, где и что находится, спасибо)
@@Chyrkov очень ценно, что показываете где что расположено. Когда в уроках используются горячие клавиши - половина мимо пролетает, ничего не разобрать. Что-то происходит, а как - непонятно Спасибо, Сергей.
@@elena_zotova спасибо за отзыв)) успехов вам!)
Спасибо! А я все не понимала почему не работают привязки в вариантах...
надеюсь все получилось!)
@@Chyrkov да, открыли мне бета версию, теперь отлично! Спасибо😊
@@user-rq8hk5ge8r ура!) Очень рад)) поздравляю!🥳
а как это все экспортировать
Экспортировать нельзя, вы можете создать эти вещи например во Фремейре или в той же Тильде. Программисты это делают в коде.