Как сделать прототип в Figma: от фрейма и кнопок до кликабельного сценария

Что такое прототип в Figma и чем он отличается от макета

Макет в Figma — это статичное изображение интерфейса, картинка будущего сайта или приложения. Представьте фотографию экрана, где видно тексты, картинки, кнопки, но, если на них нажать, ничего не происходит.

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

Что подготовить перед началом работы: файл, страницы, фреймы

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

Как создать рабочую область в Figma

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

Как сделать фрейм в Figma

Для фрейма используйте инструмент Frame — в нижней панели инструментов или через горячую клавишу F. Справа отобразится библиотека фреймов: для экранов мобильных устройств, десктопа, печатной продукции, презентаций и других форматов.

Если вам нужен фрейм нестандартного размера, курсором мыши отрисуйте его прямо на рабочей области. После этого получившийся фрейм можно подправить в настройках справа: изменить размер, цвет и расположение.

Как организовать слои и страницы в файле

По ходу работы старайтесь сразу давать страницам и слоям понятные названия, например «Первая страница сайта», «Главный экран», «Каталог», «Экран оплаты». Это сэкономит вам время и нервы в будущем. 

Группируйте связанные элементы внутри слоев, удаляйте ненужные объекты. Не держите в файле старые версии на всякий случай. Все это захламляет рабочее пространство и усложняет работу.

ЧИТАЙТЕ ТАКЖЕ:

6 ловушек прототипирования

Интерфейс Figma для прототипирования: что где находится

Чтобы «оживить» макет в Figma, активируйте режим Prototype в верхней панели. Именно там настраиваются связи между экранами, триггеры, действия и анимации. Используйте правую панель, чтобы задать логику переходов и выбор анимации при переключении между фреймами.

Вкладки Design и Prototype

Для прототипирования в Figma есть два ключевых режима: Design и Prototype. Design — для создания статичного макета. Здесь вы добавляете текст, кнопки, изображения, сетки и все остальное, что отвечает за внешний вид. Prototype — интерактивный режим, здесь вы связываете экраны, задаете поведение по клику, наведению или перетаскиванию, выбираете анимацию перехода.

Переключиться в режим Prototype можно в правом меню. После переключения в панели доступны опции для создания связей между фреймами, настройки триггеров и анимаций перехода.

Что такое Hotspot, Connection, Trigger и Action

Hotspot, или «горячая зона», — это элемент, с которым пользователь будет взаимодействовать напрямую. С него начнется анимация или переход к другой локации экрана. Чаще всего Hotspot — это кнопки, ссылки, карточки, пункты меню.

Connection в режиме прототипа — это стрелка, которая отражает переход к другому элементу. Чтобы создать Hotspot Connection, кликните на плюсик на будущей кнопке и курсором проведите к нужному фрейму или экрану.

После этого Figma предложит настроить Trigger и Action. Trigger — это событие, которое запускает действие. Action — это собственно действие, которое запускается. Например, триггерами называются пункты On Click — при клике, On Hover — при наведении курсора. Действие происходит после совершения триггера от пользователя. Самые популярные: Navigate To — перейти к другому экрану, Open Overlay — открыть всплывающее окно.

Один объект может запускать несколько взаимодействий. Но некоторые триггеры Figma не дает сочетать между собой напрямую, например On Click / On Tap и While Hovering.

Что такое Flow и Starting Point

Flow — конкретный пользовательский сценарий. Например: человек открыл главный экран, нажал кнопку, перешёл в каталог, выбрал товар, дошёл до оплаты. 

Figma автоматически создаёт Flow — цепочку этих экранов и переходов, — когда созданы связи между элементами. Количество потоков и заданные в них действия отображаются в правой панели.

Starting Point — стартовый экран прототипа. Это элемент или фрейм, с которого пользователь начнёт свой путь по сценарию. Figma может назначить его автоматически, когда вы создаете первую связь между фреймами. Но стартовую точку можно добавить и вручную. Один верхнеуровневый фрейм может участвовать в нескольких сценариях, при этом стартовая точка у него будет одна.

Начальной точкой могут стать главный экран приложения, страница авторизации или первая страница сайта. Рядом с фреймом в Figma появляется стрелка или метка, показывающая, что он выбран как начало сценария.

Прокрутка в Figma

В Figma можно создать прототипы с вертикальной, горизонтальной и комбинированной прокруткой. Убедитесь, что все элементы находятся внутри фрейма — иначе они не будут прокручиваться. Помните, прокрутка в прототипе — это симуляция. Она не заменяет реальный код.

Некоторые элементы должны оставаться на месте при прокрутке — например, шапка сайта или меню. Чтобы зафиксировать их, используйте функцию Fixed Position. Выделите элемент, который хотите закрепить, и выберите Fixed в панели справа.

Где запустить предварительный просмотр

Проверять прототип удобнее всего через Present. В этом режиме видно, как интерфейс ведет себя для пользователя: где работает клик, где открывается оверлей. Этот режим доступен по иконке презентации рядом с фреймом или в правой панели прототипирования.

ЧИТАЙТЕ ТАКЖЕ:

Как создать прототип мобильного приложения с нуля

Пошаговая инструкция: как сделать первый прототип в Figma

Создавать прототипы в Figma проще, чем кажется. Предлагаем вместе с нами шаг за шагом создать простой прототип: от первого фрейма до кликабельных кнопок и переходов между экранами.

Шаг 1. Создайте фреймы для экранов

Из библиотеки фреймов выберите экран ноутбука или мобильного устройства. Обозначьте, какой экран за что отвечает, какой идет первым. При необходимости скорректируйте фоновый цвет и размер в пикселях в меню Design справа. Сразу подпишите все фреймы по смыслу: «Главная», «Каталог», «Корзина», «Оплата».

Шаг 2. Соберите базовый макет интерфейса

Используя инструменты Figma, соберите примерный макет сайта или приложения. Разместите на экранах текст, кнопки, изображения и базовые блоки интерфейса. Задайте фирменный стиль. Важно, чтобы на макете было несколько кликабельных зон, чтобы протестировать разные сценарии пользователей.

Шаг 3. Свяжите экраны через функции Prototype

Откройте вкладку Prototype. Выделите кнопку или другой интерактивный элемент и протяните связь к нужному фрейму. Затем настройте Trigger и Action. Попробуйте применить действия, создать связи и выставить прокрутку на дизайн-макетах. Например, сделать по кнопке переход на второй экран или всплывающее окно.

Не забудьте установить начальную точку — Starting Point — для потока прототипа, чтобы действие происходило логично. Если потоков несколько, они могут пересекаться друг с другом — например, если и после входа, и после регистрации пользователь попадает на одну и ту же страницу.

Шаг 4. Запустите предварительный просмотр

Превью помогает отследить реальный опыт пользователя. Там удобно проверить, работает ли прокрутка, запускаются ли анимации и переходы. Презентация также поможет продемонстрировать, как работает сайт или приложение, коллегам или заказчику.

Какие Triggers и Actions полезны для прототипов в Figma 

В Figma Prototype для дизайнеров доступны основные действия, которые может совершить пользователь. Разберем, как они работают на конкретном макете.

On Click 

Триггер «по клику» — самый распространенный вид взаимодействия на сайтах. Пользователь кликает на ссылки, кнопки, картинки, подсказки. В макете On Click пригодится для перехода между страницами или чтобы открыть всплывающие окна.

On Drag

Такой триггер предполагает, что после того, как пользователь нажал на элемент, он будет его перетаскивать. On Drag полезен для помещения предметов в корзину, создания капчи при переходе на сайт, а также для кнопки прокрутки вниз, вверх и по горизонтали.

While Hovering

To hover означает «зависнуть» над элементом. Триггер While Hovering на реальных сайтах используют для подсказок — например, чтобы кнопка меняла цвет, если пользователь задерживает курсор на ней. Это побуждает нажать на кнопку и перейти к следующему экрану.

Но тут есть нюанс: Figma не позволяет напрямую сочетать On Click / On Tap и While Hovering на одном объекте. В таких случаях часто используют Mouse Enter и Mouse Leave.

Navigate To / Back

Эти два действия используются для перехода к новому экрану (Navigate) и для возвращения (Back) на предыдущую страницу. При создании объемного прототипа их лучше подключить в первую очередь, чтобы построить основной путь пользователя.

Open Overlay / Close Overlay

Open Overlay и Close Overlay открывают и закрывают всплывающие окна. Например, их используют для экранов оплаты, для рекламных баннеров, которые пользователь может закрыть, не переходя на новые вкладки.

Функция Smart Animate

Smart Animate — это инструмент в режиме Prototype в Figma, который автоматически создаёт плавные анимации перехода между фреймами. Дизайнеру не нужно вручную анимировать каждый элемент. Figma сама «понимает», как должны двигаться и изменяться объекты при переходе от одного экрана к другому.

Важно, что элементы в начальном и конечном фреймах должны иметь одинаковые названия и находиться на одном уровне в панели слоев. Анимировать фреймы нужно после выставления связей, триггеров и действий.

Типичные ошибки при создании прототипа в Figma

Чаще всего новички сталкиваются с проблемами из‑за плохой организации файла. Отсутствие групп и названий для слоев и экранов мешает быстро находить нужные элементы и корректно настраивать анимации. Так, например, Smart Animate не сработает, если слои названы по‑разному.

Дизайнеры могут забыть о стартовой точке, из‑за чего прототип в режиме просмотра откроется с любого экрана. Часто неправильно задаются триггеры или прототип перегружен анимациями, что замедляет работу и отвлекает от основного сценария. 

После прототипирования важно не пропускать этап проверки прототипа в режиме предварительного просмотра. Без наглядной работы прототипа легко не заметить неработающие кнопки, неверные переходы или проблемы с прокруткой.

Что лучше: Wireframe, макет или интерактивный прототип

Важно использовать тот вид визуала, который лучше всего покроет приоритетные задачи. Wireframe подойдёт на старте: он быстро создается, фокусирует команду на структуре и логике интерфейса, без отвлечения на визуальные детали. Макет же дает точное представление о внешнем виде продукта, но остается статичным.

Интерактивный прототип полезен для тестирования пользовательских сценариев и демонстрации работы продукта. Он позволяет пошагово пройти путь будущего пользователя. В прототипе можно кликнуть по кнопкам, перейти между экранами, проверить логику навигации и анимации. Прототип выбирают для UX‑тестирования, и наглядного показа клиенту.

FAQ