Вы часами рисуете экраны в Figma, а потом показываете клиенту статичные картинки? Поздравляю, вы делаете это в стиле 2010-го. Сегодня даже джуниор понимает: прототип без интерактивных ссылок — это не прототип, а красивая презентация PowerPoint. Ссылки между экранами превращают ваш макет в живой организм, по которому можно кликать, тестировать сценарии и выявлять проблемы до первой строки кода. И если вы до сих пор отправляете разработчикам PDF с комментариями «здесь будет переход», пора менять подход. Разберём, как создавать ссылки в Figma так, чтобы ваш прототип работал как настоящее приложение.
Что такое ссылки в Figma и для чего они используются
Ссылки в Figma — это интерактивные связи между элементами интерфейса, которые имитируют поведение реального продукта. Вы кликаете на кнопку в прототипе, и система переводит вас на следующий экран, открывает модальное окно или запускает анимацию. Это не магия, а базовый функционал панели Prototype, который превращает статичные фреймы в кликабельный макет.
Зачем вообще нужны эти ссылки? Во-первых, для тестирования пользовательских взаимодействий ещё до разработки. Вы проверяете логику навигации, находите баги в сценариях и корректируете flow без правок в коде. Во-вторых, для презентации идеи команде и заказчику — живой прототип убеждает лучше любых слайдов. В-третьих, для синхронизации работы дизайнеров и разработчиков: когда инженер видит конкретные переходы с параметрами анимации, вопросов «а как это должно работать?» становится меньше.
| Задача | Как решают ссылки в Figma |
| Тестирование сценариев использования | Проверка flow без кода — кликаешь и видишь, куда ведёт каждая кнопка |
| Презентация концепции стейкхолдерам | Интерактивный прототип воспринимается как готовый продукт |
| Передача требований разработчикам | Явное указание типов переходов, анимаций и триггеров взаимодействия |
| Юзабилити-тестирование с реальными пользователями | Участники тестов кликают по прототипу как по настоящему приложению |
Ссылки работают через триггеры: клик, наведение, нажатие клавиши, таймер. Вы выбираете элемент (кнопку, карточку, иконку), настраиваете событие и указываете, куда должен попасть пользователь. Figma поддерживает переходы между фреймами, открытие оверлеев, возврат на предыдущий экран, прокрутку к якорям — всё, что нужно для имитации реального интерфейса.
Главное преимущество такого подхода — скорость итераций. Изменили логику flow? Перетащили одну ссылку на другой фрейм за секунду. Добавили новый экран? Связали его с существующими через пару кликов. Никаких тяжеловесных инструментов прототипирования, никакого экспорта и импорта — всё происходит внутри одного файла, где живут и макеты, и компоненты, и готовый прототип интерфейса.
Мария Соколова, UX/UI-дизайнер
Работала над редизайном мобильного банкинга — 47 экранов, куча сценариев. Клиент требовал «увидеть, как это будет работать». Связала все экраны через панель Prototype за полдня, добавила анимации переходов. На презентации клиент сам кликал по прототипу, тестировал перевод денег, пополнение счёта. Сразу нашли три проблемы в логике, которые на статичных макетах были незаметны. Утвердили концепцию за одну встречу вместо трёх.
Пошаговая инструкция создания ссылок между экранами
Создание ссылок в Figma — процесс линейный и предсказуемый. Открываете файл с макетами, переключаетесь в режим прототипирования и начинаете связывать элементы. Никакого программирования, никаких сложных настроек — только визуальный редактор и логика причинно-следственных связей.
Шаг 1: Подготовка фреймов
Убедитесь, что все экраны оформлены как отдельные фреймы (Frame), а не группы (Group). Ссылки работают только с фреймами — это базовое правило Figma. Если элемент не фрейм, система просто не увидит его как целевую точку перехода. Проверить легко: выделяете объект и смотрите на название в левой панели Layers — там должно быть слово Frame.
Шаг 2: Переключение в режим Prototype
В правой панели свойств есть три вкладки: Design, Prototype, Inspect. Кликаете на Prototype — интерфейс меняется, появляются настройки взаимодействий. Теперь вы работаете не с визуалом, а с логикой переходов. Именно здесь создаются все ссылки между элементами.
Шаг 3: Выбор элемента-триггера
Выделяете объект, который должен запускать переход — кнопку, карточку товара, иконку меню. Справа от элемента появляется круглая точка (hotspot). Это точка связи, из которой тянется стрелка к целевому фрейму. Кликаете на точку, зажимаете левую кнопку мыши и тащите стрелку на нужный экран.
Шаг 4: Настройка взаимодействия
Когда стрелка соединила элемент с фреймом, справа открывается меню настроек. Первый параметр — Interaction. Здесь выбираете триггер: On Click (клик), On Hover (наведение), On Press (нажатие), After Delay (задержка по времени). Для большинства случаев подходит On Click — это стандартное поведение кнопок и ссылок.
Шаг 5: Выбор действия
Ниже триггера расположен параметр Action — что именно должно произойти при взаимодействии. Основные варианты:
- Navigate to — переход на другой экран с заменой текущего
- Open overlay — открытие модального окна поверх текущего экрана
- Back — возврат на предыдущий фрейм в истории навигации
- Close overlay — закрытие модального окна
- Scroll to — прокрутка к определённому месту внутри фрейма
Для стандартной навигации выбираете Navigate to и указываете целевой фрейм. Figma автоматически подставит экран, на который вы уже потянули стрелку, но можно изменить выбор через выпадающий список.
Шаг 6: Тестирование ссылки
Нажимаете кнопку Present (иконка треугольника) в правом верхнем углу Figma. Открывается полноэкранный режим прототипа. Кликаете на элемент, который настроили, — система переводит вас на связанный экран. Если переход работает, ссылка создана правильно. Если ничего не происходит, возвращаетесь в режим редактирования и проверяете настройки.
Дмитрий Волков, продуктовый дизайнер
Делал прототип для стартапа — маркетплейс услуг. Основатели хотели показать инвесторам работающий flow от поиска до оплаты. Связал 23 экрана через панель Prototype, добавил условные переходы (успешная оплата → экран благодарности, ошибка → модалка с предупреждением). На питче инвесторы сами тестировали прототип на планшете. Один из них нашёл нелогичность в сценарии возврата. Исправили за 5 минут прямо во время встречи. Получили финансирование.
Типы взаимодействий и переходов при создании ссылок
Figma предлагает несколько типов триггеров и действий, которые покрывают 95% задач прототипирования. Понимание различий между ними — это разница между прототипом «для галочки» и прототипом, который реально помогает принимать решения.
Триггеры взаимодействия
On Click — самый распространённый триггер. Пользователь кликает на элемент, происходит действие. Используется для кнопок, карточек, иконок — любых интерактивных элементов, требующих явного действия.
On Hover — срабатывает при наведении курсора. Идеально для desktop-интерфейсов: тултипов, выпадающих меню, превью карточек. На мобильных устройствах не работает (там нет курсора), поэтому используйте с умом.
On Press — реакция на нажатие без отпускания. Подходит для демонстрации состояний кнопок (active state), длительных действий, drag-and-drop сценариев. Редко применяется, но в специфичных кейсах незаменим.
After Delay — запуск действия через заданное время. Полезно для автоматических переходов: splash screens, онбординговые экраны, таймеры. Указываете задержку в миллисекундах, и система сама переключит фрейм.
Key/Gamepad — переходы по нажатию клавиш или геймпада. Нишевая функция для прототипов десктопных приложений, игр, TV-интерфейсов. Настраиваете горячие клавиши для быстрой навигации по прототипу.
Navigate to — основной тип перехода
Это полноценная навигация между экранами. Текущий фрейм заменяется новым, предыдущий сохраняется в истории (можно вернуться через Back). Используется для основных переходов: с главной на каталог, с каталога на карточку товара, с формы на экран успеха.
Дополнительные настройки: можно выбрать, сохранять ли позицию прокрутки при возврате (Preserve scroll position), и сбрасывать ли состояние интерактивных компонентов (Reset scroll position). Для длинных лент и таблиц важно сохранять позицию, чтобы пользователь не начинал с начала после каждого перехода.
Open overlay — модальные окна и всплывающие элементы
Открывает фрейм поверх текущего экрана как модальное окно. Базовый экран остаётся на фоне, часто с затемнением (настраивается через параметр Background). Overlay можно позиционировать: по центру, сверху, снизу, слева, справа — или вручную разместить в любом месте.
Ключевой параметр — Close when clicking outside. Если включён, клик вне оверлея закрывает его. Это стандартное поведение для попапов, тултипов, выпадающих меню. Если выключен, закрыть окно можно только через явное действие (крестик, кнопку «Отмена»).
| Тип перехода | Когда использовать | Особенности |
| Navigate to | Основная навигация между экранами | Заменяет текущий экран, сохраняет историю |
| Open overlay | Модальные окна, попапы, меню | Открывается поверх, требует явного закрытия |
| Swap with | Смена состояний компонента без перехода | Меняет элемент на месте, не влияет на навигацию |
| Scroll to | Навигация внутри длинного фрейма | Плавная прокрутка к якорю, полезно для лендингов |
Swap with — замена состояний компонента
Swap with меняет один элемент на другой без перехода на новый экран. Классический сценарий — переключение вариантов компонента: раскрытие аккордеона, смена вкладок, переключение иконки избранного с пустой на заполненную. Элемент остаётся на том же месте, меняется только его внешний вид или содержимое.
Работает только с вариантами компонентов (Variants). Создаёте компонент с несколькими состояниями, настраиваете ссылки между ними через Swap with — и получаете интерактивный элемент, который переключается при взаимодействии. Это продвинутый уровень прототипирования, но результат выглядит как финальный продукт.
Scroll to — навигация внутри экрана
Scroll to прокручивает фрейм до определённого элемента. Используется для одностраничных сайтов, лендингов, якорной навигации. Кликаете на пункт меню — система плавно прокручивает страницу к нужному разделу.
Настройка простая: выбираете Scroll to, указываете целевой элемент внутри фрейма, выбираете параметры анимации (мгновенная прокрутка или плавная). Figma автоматически рассчитывает позицию и выполняет переход. Единственное ограничение — элемент должен находиться внутри скроллируемой области, иначе действие не сработает.
Настройка параметров и анимации для ссылок в Figma
Ссылка без анимации — это телепортация. Пользователь кликает, экран мгновенно меняется, теряется ощущение непрерывности. Правильно настроенная анимация перехода создаёт плавный flow, помогает понять логику навигации и повышает воспринимаемую скорость интерфейса. Figma предлагает несколько типов анимаций и параметров, которые превращают прототип в почти готовое приложение.
Параметр Animation
Когда вы настраиваете ссылку, под параметром Action появляется раздел Animation. Здесь выбираете тип перехода и его длительность. Доступны следующие варианты:
- Instant — мгновенный переход без анимации. Подходит для быстрых действий, где задержка неуместна: закрытие модалок по крестику, переключение табов, смена иконок.
- Dissolve — плавное растворение одного экрана в другой. Универсальная анимация для большинства переходов, когда нет явной пространственной связи между экранами.
- Smart Animate — интеллектуальная анимация, которая сравнивает элементы на двух фреймах и плавно трансформирует совпадающие объекты. Если на обоих экранах есть элемент с одинаковым именем, Figma автоматически анимирует его перемещение, изменение размера, цвета.
- Move In/Move Out — новый экран въезжает с выбранной стороны (слева, справа, сверху, снизу), заменяя текущий. Типичная анимация для мобильных приложений при переходе вперёд по иерархии.
- Push — новый экран въезжает, выталкивая текущий в противоположную сторону. Создаёт ощущение горизонтальной навигации, как в слайдерах или свайпах между разделами.
- Slide In/Slide Out — новый экран наезжает поверх текущего или выезжает из-под него. Подходит для модальных окон, боковых меню, дополнительных панелей.
Smart Animate — мощь интеллектуальной анимации
Smart Animate анализирует слои на исходном и целевом фреймах, сопоставляет элементы с одинаковыми именами и автоматически создаёт переходы. Если кнопка на первом экране называется «Button» и на втором тоже «Button», Figma плавно трансформирует её позицию, размер, цвет, текст — всё, что изменилось между состояниями.
Ключевое правило: имена слоёв должны совпадать. Переименовали элемент — Smart Animate не увидит связь и просто растворит старый объект, показав новый. Это не баг, а особенность работы алгоритма. Поэтому при использовании Smart Animate следите за консистентностью именования.
Примеры сценариев для Smart Animate:
- Раскрытие карточки товара — миниатюра плавно увеличивается до полноэкранного изображения
- Анимация переключения состояний кнопки — изменение цвета, текста, иконки без скачков
- Трансформация списка в сетку — элементы перестраиваются с плавным перемещением
- Показ/скрытие дополнительной информации — блоки раздвигаются, появляется контент
Easing — кривые ускорения анимации
Easing определяет характер движения — равномерное, с ускорением в начале, с замедлением в конце. Это тонкая настройка, которая влияет на восприятие скорости и качества интерфейса.
Linear — равномерная скорость от начала до конца. Выглядит механистично, используется редко, в основном для технических анимаций (прогресс-бары, загрузки).
Ease Out — быстрый старт, замедление к концу. Стандартная кривая для появления элементов: модалки, всплывающие уведомления, выпадающие меню. Создаёт ощущение лёгкости.
Ease In — медленный старт, ускорение к концу. Используется для исчезновения элементов: закрытие окон, скрытие панелей. Элемент начинает двигаться плавно, потом быстро уходит из видимости.
Ease In and Out — плавный старт и финиш, ускорение в середине. Универсальная кривая для переходов между экранами, когда нужна мягкость и естественность движения.
Custom Bezier — ручная настройка кривой через четыре точки. Для перфекционистов, которые хотят точно контролировать характер анимации. В 99% случаев стандартных кривых достаточно.
Duration — длительность анимации
Задаётся в миллисекундах. Оптимальный диапазон для UI-анимаций — 200-400 мс. Меньше 200 мс — слишком резко, мозг не успевает зафиксировать изменение. Больше 400 мс — тормозит восприятие, создаёт ощущение медленного интерфейса.
Исключения: эффектные анимации (онбординг, поздравительные экраны) могут длиться 600-800 мс. Микровзаимодействия (hover-эффекты, смена иконок) — 100-150 мс. Длинные переходы (загрузка данных, процесс оформления заказа) — до 1000 мс, но с визуальным feedback'ом (лоадеры, прогресс-бары).
Дополнительные параметры для оверлеев
Когда вы используете Open overlay, появляются специфичные настройки:
- Position — позиционирование оверлея: Center, Top Left, Top Center, Top Right, Manual (ручное размещение)
- Background — затемнение фона под модалкой. Можно выбрать цвет и прозрачность (обычно чёрный с opacity 40-60%)
- Close when clicking outside — автоматическое закрытие при клике вне области оверлея
Эти параметры критичны для UX модальных окон. Затемнённый фон фокусирует внимание на попапе, показывает, что остальной интерфейс временно недоступен. Закрытие по клику вне области — стандартное поведение, которое пользователи ожидают от неблокирующих модалок.
Тестирование и шеринг интерактивного прототипа
Прототип, который никто не тестирует — это макет, а не прототип. Создание ссылок — только половина работы. Вторая половина — проверка логики, сбор обратной связи и передача результата команде или клиенту. Figma предлагает встроенные инструменты для этого, которые работают без экспорта, установки приложений или сложных настроек.
Режим Present — тестирование прототипа
Кнопка Present (треугольник) в правом верхнем углу Figma запускает полноэкранный режим прототипа. Система автоматически определяет стартовый экран (первый фрейм, от которого идут ссылки, или фрейм, отмеченный как Starting Frame).
В режиме Present можно:
- Кликать по интерактивным элементам и проверять переходы
- Использовать навигацию через стрелки (если настроены горячие клавиши)
- Открывать боковую панель Flows для быстрого перехода между разными сценариями
- Включать режим отображения hotspots — все кликабельные области подсветятся синим при наведении
Hotspots критичны при тестировании: если элемент не подсвечивается, значит ссылка не настроена или настроена неправильно. Это быстрая диагностика проблем без возврата в режим редактирования.
Share prototype — публикация прототипа
Кликаете Share в правом верхнем углу, выбираете вкладку Prototype. Figma генерирует уникальную ссылку на интерактивную версию вашего прототипа. Эту ссылку можно отправить кому угодно — клиенту, разработчикам, тестировщикам. Получатель открывает ссылку в браузере и сразу видит рабочий прототип.
Настройки публикации:
- Link to — что именно шарить: весь файл, конкретную страницу или отдельный фрейм
- Anyone with the link / Only invited people — доступ по ссылке для всех или только для конкретных email'ов
- Can view / Can edit — уровень доступа (для прототипов всегда Can view)
- Show prototype settings — показывать ли настройки прототипа в шаренной версии (device frame, background, starting frame)
| Метод шеринга | Когда использовать | Преимущества |
| Share link (Anyone with link) | Презентация клиенту, публичное тестирование | Не требует аккаунта Figma, открывается в любом браузере |
| Share link (Invited people) | Внутреннее тестирование в команде, конфиденциальные проекты | Контроль доступа, защита от утечки |
| Embed code | Размещение на сайте, в документации, в презентациях | Интеграция в любую веб-страницу через iframe |
| Figma Mirror (мобильное приложение) | Тестирование на реальном устройстве | Точная передача размеров, тач-взаимодействия |
Device Frame и Background — настройка контекста презентации
В настройках Prototype Settings (правая панель в режиме Prototype) можно выбрать Device Frame — рамку устройства вокруг прототипа. Доступны iPhone, iPad, Android-смартфоны, desktop-браузеры. Это визуальный контекст, который показывает, для какой платформы создан интерфейс.
Background определяет цвет фона вокруг фреймов. По умолчанию — светло-серый. Можно изменить на белый, чёрный или кастомный цвет. Для тёмных интерфейсов логично выбрать тёмный фон, чтобы не было резкого контраста.
Комментарии и обратная связь
Когда кто-то открывает шаренную ссылку прототипа, в правом верхнем углу доступна кнопка Comment. Пользователь кликает на любое место прототипа, оставляет текстовый комментарий — и он фиксируется прямо на фрейме. Автор прототипа видит все комментарии в исходном файле Figma, может отвечать, отмечать как выполненные.
Это встроенная система ревью без email-цепочек, скриншотов и гуглдоков с правками. Все замечания привязаны к конкретным элементам, видна история обсуждения, можно @упоминать коллег. Для итераций это критический инструмент — собрали обратную связь, внесли правки, снова опубликовали по той же ссылке (она автоматически обновляется при изменении файла).
Figma Mirror — тестирование на мобильных устройствах
Figma Mirror — бесплатное мобильное приложение для iOS и Android. Устанавливаете на телефон или планшет, логинитесь в аккаунт Figma, открываете свой прототип — и он отображается на реальном устройстве с сохранением размеров и разрешения.
Это единственный способ тестировать тач-взаимодействия (свайпы, долгие нажатия, мультитач) в реальных условиях. Desktop-версия имитирует клики курсором, но не передаёт ощущение мобильного интерфейса. Mirror синхронизируется с файлом в реальном времени — меняете что-то в Figma на компьютере, изменения мгновенно появляются на устройстве.
Embed code — встраивание прототипа в веб-страницы
В настройках Share есть опция Get embed code. Figma генерирует <iframe> с вашим прототипом. Этот код можно вставить на любой сайт, в Notion, Confluence, Google Sites — где угодно, где поддерживается HTML.
Встроенный прототип работает как обычная ссылка, но не требует перехода на другую страницу. Пользователь видит интерактивный макет прямо в документации или презентации, кликает, тестирует — без отрыва от контекста. Полезно для технических спецификаций, где нужно показать работу фичи рядом с описанием.
Ссылки в Figma — это не просто соединение экранов стрелочками. Это способ мышления прототипами вместо статичных картинок. Вы создаёте симуляцию продукта, которая позволяет находить проблемы до разработки, синхронизировать видение команды и убеждать стейкхолдеров в правильности решений. Настроили ссылки, добавили анимации, опубликовали прототип — и у вас в руках инструмент для валидации гипотез, который работает быстрее и дешевле любого MVP. Используйте это.
