Перейти к основному содержимому

Вопрос-ответ Дизайн и UX

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

Марина, Самара 424 просм.

Хочу до найма дизайнера сама накидать структуру будущего сайта в Figma, чтобы показать команде, как вижу расположение блоков. Совсем новичок в этой программе - с чего начать?

Елена Захарова UI/UX-дизайнер

ответил

эксперт

Начните с создания фреймов под каждый экран: в Figma для этого есть готовые пресеты размеров, для сайта обычно нужны как минимум десктоп (1440 или 1920 px по ширине) и мобильный (390 px, под iPhone). На каждом фрейме простыми прямоугольниками и текстовыми блоками наметьте структуру - шапка, герой-блок, преимущества, форма, футер - без детальной прорисовки, задача прототипа показать расположение и логику, а не финальный дизайн.

Дальше два инструмента экономят больше всего времени. Auto Layout превращает блок в подобие flex-контейнера: элементы внутри выстраиваются автоматически с заданными отступами, и при добавлении нового пункта в список вся конструкция не разъезжается вручную. А режим Prototype (вкладка справа от Design) позволяет протянуть связи между элементами: нажали на кнопку "Подробнее" на одном фрейме - переход на нужный экран, с анимацией перехода на выбор (Instant, Smart Animate и другие).

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

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

Подробный разбор Прототип сайта: зачем платить за макет до вёрстки
Все вопросы темы

Задать свой вопрос

Вопросы проходят модерацию. Ответ специалиста студии публикуется на сайте в течение пары дней.

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

Все вопросы темы «Дизайн и UX»

Нужен сайт или доработка?

Опишите, что нужно сделать. Вернёмся с расчётом и предложением по структуре.