Как в Figma изменить стиль кнопки после клика по ней?

Question

[andrewgenteam]

В проекте в Figma есть кнопка, как сделать так, чтобы после клика по ней, она меняла свой цвет? Подскажите пожалуйста.

Answer 1

[Tony]

В прототипе? Используйте swap with. Нужна будет вторая кнопка с уже измененным стилем, с которой вы будете менять их местами.

Answer 2

[Анастасия Свеженцева]

Изменить стиль кнопки после клика по ней в прототипе Figma можно с помощью настройки Open Overlay:

1. Разместим кнопку для состояния «‎после клика» на отдельном артборде, в моем примере это залитая цветом кнопка. Артборды с состояниями элементов можно располагать над соответствующим артбордом, где они должны появляться, чтобы не мешать экранам основного сценария.
   
2. На артборде с дизайном для кнопки добавляем интерактивность по клику(On Click) и выбираем опцию Open Overlay, чтобы поверх дизайна появлялся артборд с залитой кнопкой: On Click → Open Overlay → Frame 2
   
3. В настройках Overlay выбираем тип позиционирования появления элемента – Manual(ручная настройка), сдвигаем кнопку пока она не займет нужное место после появления на артборде.
   
4. Теперь настраиваем обратный переход в прототипе: по клику на залитую кнопку (она вынесена отдельно в артборде) переходим на основной артборд с дизайном. On Click → Navigate To → Frame 1
   
5. Нажимаем плей и смотрим как работает прототип