Figma interactive components
Создавайте интерактивные компоненты с Variants
Перевод статьи Figma “Create interactive components with variants”
Прежде чем вы начнете:
Эта функция в настоящее время находится в стадии бета-тестирования
Только участники бета-версии «Интерактивные компоненты» могут создавать интерактивные компоненты
Только пользователи с правами на редактирование файла могут создавать и редактировать интерактивные компоненты
Предупреждение
Как и в случае с любой другой бета-программой, эта функция все еще находится в разработке.
Вы можете ожидать:
- Более медленную загрузку прототипа для больших файлов
- Изменение, добавление или удаление функции перед переходом к общедоступной версии
- Ограничения auto layout в режиме показа прототипа
- Замечания к работе в режиме показа прототипа
- Чтобы свести к минимуму риск, мы не рекомендуем использовать интерактивные компоненты для критически важных проектов до окончания бета-тестирования
Об интерактивных компонентах
Интерактивные компоненты позволяют создавать взаимодействия между Variants в наборе компонентов. Каждый раз, когда вы добавляете Instance в свой дизайн, эти взаимодействия настраиваются и готовы к работе. Это экономит ваше время при создании прототипов и предотвращает ненужную путаницу в макете.
- Создавайте интерактивные элементы, которые автоматически переключаются между Variants, например кнопки, которые меняют состояние от ховера до нажатия.
- Установите взаимодействия по умолчанию на уровне компонентов и избавьтесь от догадок, когда дело доходит до создания прототипов.
- Уменьшите количество фреймов и соединений, необходимых для прототипирования полей ввода, таких как набор чекбоксов или переключателей.
Примечание. Интерактивные компоненты являются продолжением Variants. Если у вас нет набора компонентов для работы, вам нужно сначала создать его. Узнайте, как создавать и использовать Varaiants.
Перед
В приведенном ниже примере мы добавили всевозможные соединения для прототипа с тремя чекбоксами. Мы продублировали один и тот же фрейм восемь раз и получили в общей сложности 24 соединения между ними, чтобы создать все возможные комбинации.
После
С интерактивными компонентами нам нужно только добавить Instance чекбокса в наш дизайн, и его варианты взаимодействия готовы к работе. Когда мы смотрим прототип, Figma автоматически переключается между отмеченным и не отмеченным вариантом чекбокса.
Создавайте интерактивные компоненты
Вы можете создавать интерактивные компоненты только с использованием Variants из одного и того же набора компонентов. Если у вас нет набора компонентов для работы, вам нужно сначала создать его. Узнайте, как создавать Variants.
Создавайте варианты взаимодействия
Интерактивные компоненты представляют новое действие прототипа: «Изменить на».
- Выберите начальный вариант взаимодействия из набора компонентов.
- Перейдите на вкладку Prototype на правой боковой панели.
- Кликните на значок «Плюс» справа от рамки фрейма и перетащите его в нужный вариант. Вы также можете кликнуть значок «Плюс» в разделе Interactions на панели Prototype, установить действие «Изменить на», а затем выбрать нужный вариант с помощью раскрывающегося меню.
- После того, как соединение установлено, используйте панель Interaction Details, чтобы настроить триггер и действие.
Примечание. Действие «Изменить на» можно использовать только для Variants в наборе компонентов. Это действие невозможно использовать между двумя отдельными компонентами или фреймами верхнего уровня.
Используйте интерактивные компоненты
Добавляйте Instance интерактивных компонентов в свои проекты, как и любой другой компонент. Единственная разница в том, что для Instance уже применены переходы между экземплярами.
Чтобы использовать интерактивные компоненты:
- Добавьте Instance интерактивного компонента во фрейм вашего дизайна.
- Когда вы будете готовы создать прототип своего дизайна, перейдите на вкладку Prototype на правой боковой панели.
- Создайте свой прототип.
- Предварительно посмотрите дизайн и взаимодействие в режиме прототипа.
Примечание: Figma будет использовать существующие правила, чтобы сохранить любые переопределения, которые вы применяете к Variants по умолчанию в наборе компонентов. Например: изменение лейбла кнопки или замена иконки.
Когда вы добавляете Instance из набора компонентов, вы также берете с собой другие Variants в этом наборе компонентов. Хотя технически вы все еще можете применять переопределения к этим другим Variants, Figma не будет отражать эти переопределения в режиме прототипа.
Добавьте больше взаимодействия
Когда вы создаете прототип с интерактивными компонентами, вы можете добавлять регулярные взаимодействия поверх вариантов взаимодействия.
В примере ниже мы добавили взаимодействие с триггером клика поверх варианта взаимодействия с задержкой.
Порядок взаимодействия будет зависеть от того, являются ли используемые вами триггеры теми же триггерами, что и варианты взаимодействия. Узнать больше о триггерах прототипа.
Те же триггеры
Когда оба взаимодействия используют один и тот же триггер, Figma будет использовать взаимодействие прототипа и игнорировать взаимодействие Variants.
Например:
- Переключатель имеет взаимодействие «По клику» → «Изменить на» между Variants включения и выключения в его наборе компонентов.
- Вы добавляете взаимодействие «По клику» → «Перейти к» с переключателя на другой фрейм.
Figma перейдет к следующему фрейму, когда пользователь нажмет переключатель.
Разные триггеры
Когда вы добавляете взаимодействие с другим триггером, Figma будет воспроизводить как взаимодействие, так и взаимодействия между Variants.
Например:
- У кнопки есть вариант взаимодействия «По ховеру» → «Изменить на» между дефолтным Variants и Variants по ховеру.
- Вы добавляете взаимодействие «По клику» → «Перейти к» при создании своего прототипа.
Figma изменит взаимодействие «Изменить на» по ховеру на «Ховер», «Перейти к» следующему фрейму на «По клику».
Просмотр взаимодействий
При использовании интерактивных компонентов вы увидите отдельные разделы для Interactions и Variant interactions на вкладке Prototype на правой боковой панели.
- Используйте раздел Interactions для создания прототипов взаимодействий и анимации
- Используйте раздел Variant interactions, чтобы просмотреть сведения о взаимодействиях Variants
Примечание: режим наблюдения в режиме прототипа не поддерживается для интерактивных компонентов, но мы над этим работаем!
Изменить варианты взаимодействия
Добавляйте и редактируйте взаимодействия Variants из основного компонента. Редактировать взаимодействия Variants из Instance невозможно.
Чтобы получить доступ к набору компонентов из Instance и внести свои изменения:
- Выберите Instance
- Кликните в раздел Instance на правой боковой панели.
- Выберите Go to main component/«Перейти к главному компоненту»
- Перейдите на вкладку Prototype на правой боковой панели.
- Внесите изменения во взаимодействия Variants.
О бета-версии интерактивных компонентов
Подпишитесь на бета-версию интерактивных компонентов
- Бета-версия открыта для всех пользователей Figma, независимо от команды или плана
- Запросите доступ к бета-версии интерактивных компонентов, используя адрес электронной почты, связанный с вашей учетной записью Figma.
- Цель Figma — добавить тех, кто запрашивает доступ к бета-версии, в течение трех рабочих дней. Электронное письмо с подтверждением будет отправлено на адрес электронной почты, связанный с вашей учетной записью, после включения интерактивных компонентов для вашей учетной записи.
- Во время тестирования бета-версии вы всегда можете отключить интерактивные компоненты в файле, чтобы сократить время загрузки прототипа. Если вы хотите полностью отказаться от бета-тестирования, напишите нам по адресу support@figma.com.
Оставьте отзыв и получите помощь
Отзывы, которые вы предоставляете нам во время бета-тестирования, имеют решающее значение, чтобы убедиться, что мы исправим любые проблемы и улучшим работу до того, как интерактивные компоненты будут доступны для всех.
Посетите специальный канал форума поддержки, чтобы задавать вопросы, сообщать об ошибках, оставлять отзывы и обсуждать интерактивные компоненты с другими пользователями бета-версии.
Делитесь файлами с интерактивными компонентами
- Любой, у кого есть доступ к редактированию файла, может просматривать и редактировать варианты взаимодействия для интерактивных компонентов, даже если он не является участником бета-тестирования. Вы должны быть участником бета-версии, чтобы создавать новые варианты взаимодействия.
- Любой участник бета-тестирования, имеющий права на редактирование файла, может выключать и включать интерактивные компоненты при презентации прототипа. Это помогает предотвратить любые проблемы с производительностью интерактивных компонентов.
Включение или отключение интерактивных компонентов для файла
Во время бета-тестирования вы можете отключить интерактивные компоненты для определенного файла, чтобы сократить время загрузки прототипа. Для этого:
- Выберите интерактивный компонент на артборде или на панели слоев.
- Перейдите на вкладку Prototype на правой боковой панели.
- В разделе Interactive components beta установите чекбокс Enable interactive components..
Интерактивные компоненты в сообществе Figma
- Любой участник бета-тестирования может публиковать файлы с интерактивными компонентами в сообществе Figma.
- Если вы не являетесь участником бета-тестирования, вы все равно можете дублировать файл сообщества Figma с интерактивными компонентами, но эта функция будет отключена. Вы по-прежнему можете просматривать и редактировать варианты взаимодействия в файле, но вы не можете создавать новые интерактивные компоненты или видеть их при представлении прототипа.
