Как сделать кликабельную кнопку или ссылку в фигме

Кнопки и ссылки в фигме — в чём разница

И кнопки и ссылки — это интерактивные кликабельные элементы, часто использующиеся на сайтах и в мобильных приложениях. Их функционал похож, и поэтому эти два типа элементов часто путают между собой. Так в чем же разница?

Кнопка — это элемент, при нажатии на который совершается определенное действие. Например отправка формы, регистрация пользователя, добавление товара в корзину, открытие всплывающего окна. Выглядят кнопки обычно как прямоугольники (часто со скругленными углами) с текстом. Основные кнопки как правило делаются с заливкой, а второстепенные — с обводкой и прозрачным фоном:

Ссылка же — это элемент, при нажатии на который просто происходит переход на другую страницу или сайт. У каждой ссылки есть URL, то есть адрес целевой страницы. Например https://kurs-design.ru/uroki-figma/

Выглядит классическая ссылка просто как подчеркнутый текст синего цвета.

Разница между ссылками и кнопками есть не только в дизайне, но и на уровне разработки. Так, в HTML-коде кнопки делаются тегом <button>, а ссылки — тегом <a>. Впрочем, не смотря на разницу в назначении и технической реализации этих элементов, их внешний вид часто может быть идентичным. Например, ссылки на подробную информацию могут оформляться как кнопки, и это не будет ошибкой.

Как в фигме вставить кликабельную ссылку в текст

Если вам нужно вставить интерактивную кликабельную ссылку в тексте, нужно просто выделить слово или фразу в текстовом блоке, и нажать на иконку ссылки на панели Text в правой части интерфейса фигмы. Далее в появившемся окне указать адрес страницы, на которую должен осуществляться переход и нажать Enter. Ссылка готова!

Если задача состоит в том, чтобы сделать ссылку на другой фрейм в фигме, воспользуйтесь методом из следующей части урока.

Как сделать интерактивную кликабельную кнопку в фигме

Этот метод одинаково хорошо подходит как для ссылок, так и для кнопок. Заключается он в использовании инструментов интерактивного прототипа и анимации фигмы.

Для этого переходим на вкладку Prototype на правой панели фигмы, выделяем нужную кнопку или ссылку и добавляем ей новый Interaction. В поле Trigger выбираем событие, при котором будет совершаться действие: при клике на нашу кнопку или ссылку, при наведении на неё и так далее. В поле Action выбираем действие, которое будет совершаться:

• Navigate to — переход к другому фрейму
• Change to — замена варианта компонента на другой (доступно только для компонентов с вариантами). Этот параметр будет полезен при смене состояний самой кнопки. У нас на сайте есть отдельный урок про анимацию кнопок при наведении и нажатии, там этот вопрос раскрывается более подробно.
• Back — вернуться назад к предыдущему фрейму
• Scroll to — пролистать к конкретному элементу на том же фрейме
• Open link — открыть ссылку
• Set variable, Set variable mode, Conditional —работа с переменными и условным прототипированием. Данные функции не доступны в бесплатной версии фигмы.
• Open overlay — открыть фрейм поверх текущего. Эта опция используется для выпадающих списков и всплывающих окон.
• Swap overlay — меняет один всплывающий фрейм на другой
• Close overlay — закрывает всплывающие фреймы.

При желании также можно добавить для любого вышеописанного действия анимацию.

Советую посмотреть эту часть урока в видео-формате — там я более детально и на конкретных примерах показываю как работать со всеми этими функциями. Видео находится в самом начале урока.