Верстаем контент по сетке, делаем кликабельные элементы и автоматизируем работу
В 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 колонок — с ней удобно работать, когда контента не слишком много.
Полезно заранее определить, что и где будет на странице. На данном этапе мы лишь расставляем основные элементы на будущем лендинге: текст, иллюстрацию и кнопку. Все элементы пока показываем схематично: в виде серых прямоугольников, окружностей и крупного текста. Добавить элементы можно с помощью панели внизу.
Или с помощью горячих клавиш:
Чтобы окрасить фрейм в нужный цвет, нужно выделить фрейм и выбрать нужный цвет на панели цветов справа. Там же можно ввести код цвета, если вы точно знаете, что вам нужно. Например, фирменный оттенок из брендбука.
Чтобы добавить иллюстрацию в 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 — встроенные плагины. Через них можно вставлять в макет изображения и иконки, вставить фото несуществующих людей, найти симпатичную векторную графику, и даже создать анимацию. Вот четыре плагина, которые часто используют веб-дизайнеры:
Разыгрываем доступ к курсу «Email-стратегия: от рассылок к системе продаж». Чтобы испытать удачу, подпишитесь на тг-канал «Конверта» и нажмите кнопку «Участвовать».
Искренние письма о работе и жизни, эксклюзивные кейсы и интервью с экспертами диджитала.
