Интерактивные компоненты в Figma. Обзор и примеры / Figma Interactive Components

• Команда Figma выпустила интерактивные компоненты в бета-тесте.  

• Для получения доступа нужно подать заявку через форму в описании видео.  

• После подачи заявки доступ будет предоставлен в течение суток-двух.  

• После получения доступа нужно создать новый файл и добавить компонент.  

• На вкладке "Прототип" появится блок "Интерактивные компоненты".  

• Блок можно включить или отключить, но лучше оставить включенным.  

• До интерактивных компонентов приходилось создавать множество фреймов для отображения состояний.  

• Интерактивные компоненты позволяют использовать один компонент для всех состояний.  

• Это упрощает работу и уменьшает количество макетов.  

• Пример с кнопками: создание компонента с вариантами и настройка событий.  

• Пример с лоудером: создание компонента с четырьмя вариантами и настройка анимации.  

• Пример с бургером: создание компонента с вариантами и настройка анимации для закрытия.  

• Создание компонента кнопки и выпадающего списка.  

• Централизованное управление вариантами через мастер-компонент.  

• Добавление чек-боксов и настройка их состояний.  

• Добавление чек-боксов в выпадающее меню.  

• Настройка вариантов с чек-боксами и их состояниями.  

• Создание информера и настройка его состояний.  

• Созданы пункты с иконками, пустые пункты, пункты с чекбоксами и пункты с чекбоксами и иконками.  

• Настроена опция при наведении для отображения текста при наведении на иконку.  

• Пример показывает, как можно настроить и залинковать компоненты для упрощения работы.  

• Показан пример таблицы, которая скролится по горизонтали.  

• Использованы два скрола: слева и справа.  

• Умная анимация позволяет бесшовно менять состояние таблицы.  

• Показан интерфейс поиска вакансий с выпадашками и лодером.  

• Использованы три экрана и отдельные кнопки, лодер и состояние для атомов.  

• Скелетон и градиент используются для анимации.  

• Показан интерфейс Spotify с бегунком и анимацией добавления в избранное.  

• Использованы компоненты для бегунка, времени, сердечка и кнопок плей/пауза.  

• Настроена умная анимация для ползунка громкости и состояния звука.  

• Подведены итоги по всем примерам.  

• Призыв задавать вопросы и оставлять комментарии.