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

Вопрос-ответ Лендинги

Как сделать лендинг в Figma?

Виктор, Уфа 990 просм.

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

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

ответил

эксперт

Лендинг в Figma собирают на одном фрейме фиксированной ширины: обычно 1440 px под десктоп и 375 px под мобильную версию как отдельный макет на той же странице. Блоки делают через Auto Layout, а кнопки и карточки выносят в компоненты, чтобы не перерисовывать заново; готовый макет разработчик открывает прямо в Figma через панель Dev Mode, ставить отдельную программу ему не нужно.

Если Figma открываете впервые, не начинайте с чистого листа. В разделе Community лежат сотни бесплатных UI-китов и готовых секций для лендингов, из них собрать первую версию проще, чем разбираться с сеткой и отступами с нуля. Сетку (обычно 12 колонок с шагом 16-24 px) и типографику стоит выставить в самом начале, а не подгонять потом под уже нарисованные блоки. И сразу пишите настоящие тексты вместо lorem ipsum: заголовок в три строки вместо одной ломает верстку блока, и это лучше увидеть на этапе макета, а не после сборки сайта.

Для передачи разработчику важны не красивые картинки, а порядок: понятные названия слоев и фреймов вместо "Frame 47", цвета и шрифты вынесены в стили, иконки и фото экспортированы в нужном формате. Отступы, заданные через Auto Layout, разработчик увидит в пикселях прямо в Dev Mode - вопросов "а тут сколько между блоками" не возникнет.

Если после первого макета видите, что верстка расползается на разных экранах или не получается сделать так, чтобы кнопка бросалась в глаза - это нормально, глаз на это тренируется не за один вечер. Отрисовка лендинга у дизайнера обычно стоит от 15 до 25 тысяч рублей и занимает 3-5 дней, и сразу учитывает адаптив под все размеры экрана, а не только десктоп и один мобильный.

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

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

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

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

Все вопросы темы «Лендинги»

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

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