Вы можете создавать интерактивные компоненты только с использованием 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.
Загрузка...
