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

В Figma можно собрать макет любого многостраничного сайта или лендинга, возможности дизайна почти не ограничены. Готовый макет легко выгрузить, экспортировать в Tilda или передать разработчикам.

Рассказываем, как создать макет сайта в Figma и превратить его в анимированный прототип для презентации клиенту.

Со статьей помог Илья Поликарпов, UX-дизайнер, автор Telegram-канала «Фигма для редакторов».

Признаки хорошего сайта: что учесть

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

Иногда на сайте бывает всего один блок. Например, форма для подписки на рассылку или красивая анимация с QR-кодом для перехода на другой ресурс — задачи бывают разные.

Есть три принципа базовой дизайнерской гигиены, которым лучше следовать:

• Теория близости. Объекты, которые располагаются рядом друг с другом, кажутся связанными. 
• Закон Фиттса. Каждое действие на сайте требует нацеливания курсором. В маленькие объекты в центре экрана попасть тяжело. 
• Правило якорных объектов. Ключевые элементы дизайна будут цеплять взгляд, если расположить их в углу страницы или визуальном центре.

Это три общих правила любой дизайнерской композиции — своего рода теория. Дальше — немного практических рекомендаций.

Используйте сетку. В Figma можно выбрать сетку с разным количеством колонок. По ней легко выравнивать объекты. 

Расположение элементов на странице называется ритмом. Например, вы выбрали сетку с тремя колонками и располагаете все элементы в три столбца: у вас три иллюстрации, потом три колонки текста, затем три абзаца с контактами. 

Если вы создаете длинную страницу, то одинаковый ритм может утомить посетителей. Ритм можно чередовать, но это удобнее делать на сетках с бо́льшим количеством колонок, например, 8, 10, или 12.

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

Выберите читаемый шрифт. Лучше — гротески без лишних декоративных элементов. Для основного текста подойдут бесплатные простые шрифты из Google Fonts — например, Inter или Roboto. Для заголовка иногда можно использовать вторую гарнитуру в качестве шрифтовой пары. Скажем, с засечками, но тоже читабельную. Больше двух разных шрифтовых семейств брать не стоит.

Используйте цвета по назначению. Золотое правило: спокойные цвета — для фона; броские — для акцентов. Не забывайте, что цвет задает настроение. Палитрой сайта можно вызвать нужные эмоции у посетителя. Например, цвета сайта детского центра развития «Первые шаги» передают атмосферу спокойствия и надежности — здесь не страшно оставить детей.

Сайт бренда Gucci ориентирован на люксовую аудиторию. Поэтому на сайте компании используются «дорогие» цвета: матовый бордовый, темно-зеленый, приглушенный фиолетовый и белый. 

Вы можете подобрать подходящую палитру онлайн: воспользуйтесь сервисами по подбору оттенков из нашей подборки.

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

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

Перейдем к пошаговой инструкции, как собрать сайт в Figma.

Начнем с подготовки: важно понять, для чего нужен сайт, кто ЦА, что ей важно знать. Представим, что мы провели предварительный анализ и решили, что компании нужен небольшой информационный сайт. Мы сделаем главную страницу. На ней будет основной блок с описанием предложения и CTA-элементом, блок с описанием преимуществ в трех колонках, меню для перехода на другие страницы и футер — «подвал сайта» с формой подписки на рассылку и контактной информацией.

Создаем фрейм и сетку

В Figma есть шаблоны фреймов для разных устройств. Полное меню открывается, если кликнуть на значок с сеткой в нижней панели или зажать горячую клавишу А. Выбираем один для ПК (Desktop → Desktop) и один для мобильной версии (Phone → IPhone 16).

Чтобы было удобнее выравнивать элементы, настроим себе сетку. Она настраивается в меню справа, в пункте Layout guide. Сетку устанавливаем в 6 колонок — с ней удобно работать, когда контента не слишком много.

Собираем структуру страницы

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

Или с помощью горячих клавиш:

• Прямоугольник — R
• Окружность — O
• Текст — T

Добавляем цвет и иллюстрации

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

Чтобы добавить иллюстрацию в Figma, ее можно просто вставить из буфера обмена (горячие клавиши Ctrl+C → Ctrl+V), или загрузить из общего меню. Получаются вот такие страницы:

Добавляем текст

Выбираем любой читаемый шрифт — например, классический Inter. Сделаем основной текст 30 кеглем, а заголовок — 50 кеглем. Все настройки текста можно найти на панели справа: здесь можно добавить тексту жирности или курсива, установить интерлиньяж, расстояние между буквами, создать список, и многое другое.

Для мобильной версии шрифты сделаем мельче — 30 и 15 кегль соответственно. Страницы все больше похожи на лендинг:

Создаем кнопки и связь между страницами

Кнопка должна выделяться — это главный элемент на странице. Рисуем прямоугольник (горячая клавиша R) и заливаем его черным цветом через палитру справа. Сверху прямоугольника пишем текст (горячая клавиша Т).

Просто прямоугольник выглядит примитивно, поэтому скруглим углы. Для этого выделим прямоугольник и в меню «Appearance» справа установим радиус скругления 30. Это можно сделать с клавиатуры, или нажать на поле и двигать мышь вправо.

Делаем то же самое с кнопкой в мобильной версии. Получаются такие страницы:

Теперь можно отключить сетку — она нам больше не понадобится. Для этого нужно выделить фрейм, пролистать правое меню в самый низ и нажать на иконку глаза в разделе «Layout guide». 

Почти готово! Но пользователь будет взаимодействовать с сайтом — а значит, кликабельные элементы должны реагировать на его действия. У кнопок может быть много разных состояний: исходное, во время наведения курсора, во время нажатия, после нажатия. Самый минимум — сделать одно дополнительное состояние при наведении курсора. Так пользователь понимает, что на элемент в принципе можно нажать и что-то произойдет. Обычно кнопки в таких случаях меняют цвет.

Для удобства работы повторяющиеся элементы сайта оформляют как компоненты. Когда сайт состоит из множества страниц, это помогает быстро обновить дизайн главного компонента и распространить изменения на все копии. С кнопками принято поступать именно так. Чтобы сделать кнопку компонентом, ее подложка и текст либо должны быть сгруппированы (Ctrl+G), либо находиться внутри одного маленького фрейма. Мы сделали кнопку фреймом. По клику правой кнопкой появится всплывающее меню с пунктом Create Component.

Компоненты подсвечиваются фиолетовым. Главный компонент в меню слева будет показан жирным шрифтом, а если сделать копию — она будет обычным шрифтом.

Но копии нам сейчас не нужны, у нас только одна кнопка. Ей просто нужно новое состояние — Variant. Возвращаемся в контекстное меню, находим пункт Main Component — Add Variant.

Создаем вариант, меняем ему цвет, называем его Hover. Исходный компонент по умолчанию называется Default. Когда мы создали вариант, вокруг двух кнопок образовалась общая рамка. Лучше оставить кнопки в ней, разработчику они пригодятся отдельно от макета. На макете можно использовать копии компонента Default.

Добавляем другие блоки

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

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

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

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

Теперь макет выглядит как полноценная главная страница сайта.

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

Упрощаем работу

В Figma есть много функций, которые облегчают работу над сайтом.

Представьте, что вы создаете кнопку. Вы нарисовали прямоугольник, написали текст «Жми!» и разместили его ровно по центру. А потом решили сделать шрифт крупнее — и текст уже выше центра. Если вы сделаете эту же кнопку с функцией автолейаута, вы сможете настроить отступы между элементами. Можно задать:

• Отступы от верхнего, нижнего, левого и правого края внутри кнопки;
• Расстояния между элементами внутри кнопки;
• Вертикально или горизонтально будут располагаться элементы внутри кнопки.

Попробуем сделать кнопку с автолейаутом на нашем макете. Для этого выделяем кнопку (фрейм и текст) и включаем автолейаут (Shift+A). Открывается меню настроек, в котором мы назначаем расстояния от текста до краев кнопки: 50 по горизонтали и 15 по вертикали.

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

Автолейаут избавляет от рутины и помогает сделать макет адаптивным.

Чтобы потом было легче передавать макет разработчику, можно создать библиотеку цветов и шрифтов — UI-кит. Так разработчику будет удобнее ориентироваться в макете. Для этого надо настроить переменные и стили для текста и цветов.

Чтобы сохранить цвет, нужно выделить элемент нужного цвета, выбрать в разделе «Fill» иконку с четырьмя кругами, а потом нажать на «+».

То же самое можно сделать и с текстом: выбрать текст, в разделе «Typography» нажать на иконку с четырьмя кругами и нажать на «+».

Все стили сохраняются во вкладке «Styles» в меню справа.

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

• Text Prettier. Автоматически расставляет неразрывные пробелы и убирает дубликаты знаков препинания.
• Insert Big Image. Помогает загружать большие картинки без потери качества.
• Unsplash. Помогает найти красивые картинки, которые можно использовать бесплатно.
• Iconify. С ним можно найти иконки в одном стиле для сайта.