Дизайн и конверсия

Как создать прототип сайта в Figma?

Светлана, Хабаровск 1,8 тыс. просмотров

У меня в Figma готовы картинки экранов лендинга, но клиент просит прототип, по которому можно покликать. Разве это не одно и то же с макетом? Как сделать так, чтобы кнопки реально переключали экраны?

Дмитрий Акиндинов разработчик лендингов, 15 лет практики

ответил

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

Делается это во вкладке Prototype: выделяете кнопку или блок, тянете стрелку к нужному фрейму - например, от кнопки "Оставить заявку" к экрану с формой или к попапу "Спасибо, заявка принята". Переход добавляется для каждого клика, который есть в реальном сценарии: меню, якорные ссылки на блоки лендинга, кнопки в шапке.

Для лендинга обычно хватает 5-8 связей: переходы по якорям, открытие и закрытие формы, состояние кнопки при наведении. Не нужно прототипировать каждую мелочь - это демонстрация логики для показа, а не рабочий сайт, код всё равно пишется отдельно и с нуля.

Готовый прототип удобен, чтобы защитить логику переходов перед клиентом или командой, но на вёрстку он не влияет напрямую: верстальщик берёт макет и пишет код заново. Нужен он не для каждого лендинга - обычно хватает статичных экранов с комментариями, к интерактивной версии есть смысл переходить, если в проекте несколько сложных сценариев или его показывают инвестору.

Не нашли свой вопрос

Задайте его напрямую

Отвечаю сам, на почту, обычно в тот же день. Разбор самых частых вопросов потом попадает в этот раздел.

Похожие вопросы

Все вопросы темы "Дизайн и конверсия"

Помогу выбрать

Сомневаетесь — напишите, разберёмся за 10 минут

Расскажете про ваш бизнес и задачу — подскажу, что нужно: лендинг, многостраничник или вообще не сайт. Без обязательств, бесплатно.

Отвечаю в течение 15 минут в рабочее время (будни 11:00–20:00 МСК). Если удобнее e-mail: 9123578@gmail.com

Telegram TG MAX MAX Звонок