Интерактивные компоненты в Фигме
Рет қаралды 15,457
Күн бұрынПервый взгляд на бета-функционал интерактивных компонентов (Interactive Components) в Фигме. Рассмотрим несколько примеров использования грядущей фичи в реальной работе (пойдем от простого к более сложному).
00:00 - как работают интерактивные компоненты
01:44 - как подключить себе интерактивные компоненты
02:41 - ховер и открытие модального окна на одной кнопке
04:41 - интерактивные компоненты на примере дэшборда
14:14 - связка со Smart Animate
16:48 - делаем анимацию прыгающего мячика
Файлы с примерами из видео -www.figma.com/file/uR29WGpfjG...
Подавать заявку на бету сюда - docs.google.com/forms/d/e/1FA...
Официальная страница с описанием функционала - help.figma.com/hc/en-us/artic...
Подписывайтесь на соцсети:
Инста: / disarto.digital
Телеграм: t.me/uiux_dsgn
Behance: www.behance.net/Dexo
Dribbble: dribbble.com/Dexo
@TemaDesigna 3 жыл бұрын
Очень ценю, что ты выпускаешь видео так скоро после выхода обновлений, +респ
@surovtsv 3 жыл бұрын
Спасибо за обзор, интересный функционал!
@ctrekoza1321 3 жыл бұрын
Очень полезный урок. Спасибо))
@user-eo3jz8uj9l 3 жыл бұрын
Классный обзор!!! Спасибо большое!
@timurmazitov9808 3 жыл бұрын
Спасибо тебе добрый человек за обзорчик
@iNemezis 3 жыл бұрын
Как нехватало этого в прототипах, теперь весь прототип продукта дорабатывать. А то как-то не комильфо, возможность есть, а применения нет ))
@mariachernova5833 2 жыл бұрын
классно) спасибо😊
@nadezhdavasyukova6148 2 жыл бұрын
Спасибо! :)
@alsoualsou9 2 жыл бұрын
Ты лучший ❤️
@f.olimoff 3 жыл бұрын
Спасибо)
@Midi25 Жыл бұрын
Как человеку который когда-то фазовал мультипликационные сцены на пергаменте гелевой ручкой (в нулевые), мне более чем понятно и было интересно смотреть урок с мячиком. Получается что 500ms это грубо говоря, большое количество фаз между компоновками, а 80ms - 1-2 фазы между компоновками.))
@Sibir-bv2hp 3 жыл бұрын
Спасибо) кинул запрос на бетку)
@user-wx9dg7im3u 3 жыл бұрын
Спасибо за обзор) хотел задать вопрос не по теме, есть мнение, что фигма не подходит для анимации сайтов, когда нужно показать плавность появления (типа у фигмы изинги плохо работают) или неудобно в ней делать какие-то сложные анимации. И лучше все сразу открывать макеты в принципл и там уже делать. Подскажи, что думаешь на этот счет и пользуешься ли сам принциплом?
@disarto.digital 3 жыл бұрын
Если речь про видео с анимацией, то мнение верное. И дело тут даже не в изингах, а в том, что до сих пор нет нормального способа экспортировать видео или хотя бы гиф файл с анимацией из Фигмы. Фигма отлично подходит для создания интерактивных прототипов, но для создания видео с анимацией малопригодна.
@disarto.digital 3 жыл бұрын
Сам для анимации использую After Effects. Но Principle крутой продукт, могу однозначно рекомендовать. Также можно присмотреться к Protopie.
@user-wx9dg7im3u 3 жыл бұрын
Спасибо, понял, получается если нужно видео анимации в фигме, то только скринкаст экрана делать))
@disarto.digital 3 жыл бұрын
@@user-wx9dg7im3u Да, пока что так)
@Mazahaka007 3 жыл бұрын
@@disarto.digital Да ничего сложного. Делаешь запись экрана в процесса прокликивания элементов в прототипе. Отличный вариант.
@krik48rus 3 жыл бұрын
Вопрос , можно ли как-то принципл на винде использовать?
@katman1327 2 жыл бұрын
Подскажите пжлс совсем новичку.....как так сделать чтобы кнопка "Open modal" относилась к тому же набору компонентов, что и кнопка "Button"? Т.е. я создаю instance из компонента Button, перепечатываю текст на Open modal, теперь мне нужно изменить размеры этой кнопки, но я не могу это сделать т.к. это образец компонента. Если образец преобразовать во фрейм, чтобы изменить размер, то он теряет связь с компонентом, и как его опять привязать я не знаю. А у Максима эта кнопка является именно образцом из набора компонентов с текстом "Button", и на этот образец распространяется уже привязанный интерактив с изменением цвета "при наведении".....или я что-то упускаю...... Спасибо.
@olagulakowa3227 3 жыл бұрын
спасибо большое за видео) я так поняла , что интерактивные компоненты можно будет отключать/включать, если в каком-то проекте не хочу использовать?)
@disarto.digital 3 жыл бұрын
Да, их можно включать/отключать для конкретного файла (но только после того, как ваш аккаунт включили в бета тестирование).
@olagulakowa3227 3 жыл бұрын
@@disarto.digital я заявку подала,а потом уже подумала,что может не стоило на рабочий подключать)
@musicalanthill Жыл бұрын
А уже интерактивные элементы доступным всем? Без заполнений форм и тд. И можно ли уже их в проектах использовать ?
@katyabarinina53 3 жыл бұрын
Спасибо за видео. А как быстро фигма разрешает пользоваться этим инструментом после заявки?
@disarto.digital 3 жыл бұрын
Мне дали доступ в течение суток.
@katyabarinina53 3 жыл бұрын
@@disarto.digital спасибо!
@julia.ohorodnik 2 жыл бұрын
@@disarto.digital у меня прошло больше суток и ничего ( повторно отправила
@katerinakozhevnikova9185 3 жыл бұрын
Очень полезное видео, особенно скорость его выхода. К тому времени,как это станет общедоступным,я уже буду примерно знать механизм. Я вот только не совсем поняла, как из поп-апа "dashboard" менюшка стала работать при наведении, как-то это слишком просто и быстро получилось. Из комментариев я поняла,что это какая-то новая возможность,да?
@disarto.digital 3 жыл бұрын
Пункт меню сделан компонентом с 2-мя вариантами. Между 2мя вариантами происходит интерактив: при наведении мыши меняем с Normal на Hover. И да, тут используются новые возможности интерактивных компонентов. Кстати, в описании к видео есть файл, там можно посмотреть как всё работает 😉.
@katerinakozhevnikova9185 3 жыл бұрын
@@disarto.digital Блин, даже смогла разобраться!)) Большое тебе спасибо за такой крутой контент!
@disarto.digital 3 жыл бұрын
@@katerinakozhevnikova9185 На здоровье :)
@user-ik6hb9yt9h 3 жыл бұрын
А почему стоит подавать заявку для отдельного аккаунта, а не для основного?) Я пару дней назад подключила для основного, увидела ваше видео и начала немного переживать)
@disarto.digital 3 жыл бұрын
На самом деле ничего страшного, бета функционал можно отключить в случае необходимости. Но в целом любой бета-функционал лучше тестировать не на основном аккаунте, т.к. потенциально Фигма в этом режиме может стать менее стабильной.
@user-ik6hb9yt9h 3 жыл бұрын
@@disarto.digital спасибо за ответ)
@elenagundareva7946 2 жыл бұрын
@@disarto.digital Спасибо за содержательные уроки! Отправила запрос на бету, теперь бета есть, а интерактивы не появились, все по старому пока. Как отключить теперь функционал беты не знаю. Подскажите, пожалуйста!
@lk6618 2 жыл бұрын
Чем интерактивные компоненты отличаются от вариантов? и почему простое добавление функции вариантов для уменьшения громоздкости файла с сохранением все тех же функций, которые используються для работы с компонент фреймами уже называют интерактивными компонентами? есть в чем то отличия от вариантов?
@disarto.digital 2 жыл бұрын
Интерактивные компоненты добавляют возможность пользоваться функционалом прототипирования прямо внутри вариантов. Т.е. не корректно сравнивать интерактивные компоненты и варианты. Интерактивные компоненты - это расширения функционала вариантов.
@lk6618 2 жыл бұрын
@@disarto.digital я бы сказал это основопологающий функционал вариантов, потому что в ином случае становиться не понятно зачем вообще нужны варианты, если их нельзя между собой прототипировать
@kseniyaalive3772 2 жыл бұрын
А сейчас интерактивные компоненты в платной версии?
@disarto.digital 2 жыл бұрын
Сейчас они доступны всем вне зависимости от версии Фигмы 😉
@blindstap 3 жыл бұрын
т.е теперь больше не надо создавать кучу фреймов чтобы сделать анимацию? кайф
@disarto.digital 3 жыл бұрын
Именно 😊. Более того, достаточно один раз сделать анимацию, и можно переиспользовать её сколько угодно раз.
@alehandrosamara 2 жыл бұрын
Не хватает Фигме if then логики конечно.
@ivanshirin1047 3 жыл бұрын
Ну все, программисты-верстальщики больше не нужны.
@disarto.digital 3 жыл бұрын
😄
@AlexStram1nsky 3 жыл бұрын
По факту же ничего не изменилось, просто кликабильный макет стало делать проще, не надо костылить чтобы показать ховеры, размножать фреймы, чтобы показать сложную анимацию. А так, все возможности остались теже...
@disarto.digital 3 жыл бұрын
@@AlexStram1nsky Это как раз очень серьёзное изменение, которое сильно ускоряет работу и расширяет возможности. Интерактив переходит из фреймов в компоненты. Достаточно один раз сделать ховер для кнопки, и этот ховер будет работать везде, где есть соответствующий компонент. Качественно совершенно новый уровень 🙂
@AlexStram1nsky 3 жыл бұрын
@@disarto.digital согласен со всем на 100%. Я оставил свой коммент лишь потому что, верстальщиков и остальных программистов это никак не затронет, мои кликабельные макеты никак не отнимали работу у них и до этой фитчи не после.) А вот мне стало значительно проще и удобней.
@disarto.digital 3 жыл бұрын
@@AlexStram1nsky ну это само собой. Возможно когда-нибудь мы будем делать готовые продукты в Фигме и сразу выпускать их на рынок, минуя все этапы разработки. Но думаю это случится ещё очень нескоро 😉. Пока что весь интерактив Фигмы лишь имитирует поведение реального интерфейса, да и работу с данными никто не отменял.
@user-sv6dy8pk2q 3 жыл бұрын
Figma занимается ерундой. Для интерактива есть Principle. Вот подобный инструмент, только мультиплатформенный и нужно делать на одной отдельной вкладке, наряду с Inspect и Design. А эти встроенные полуфабрикаты даже трогать желания нет. Лучше бы организовали функционал плагинов Master и DSO.
Alex Burkan
Рет қаралды 868 М.
Wylsacom
Рет қаралды 159 М.