Как создать макет сайта в Фигме

Когда владелец бизнеса или маркетолог ставит задачу «сделать сайт в Фигме», речь идет не столько о творчестве, сколько о четком инструменте для разработки. Figma превратилась в стандарт индустрии. Почему? Этот онлайн-сервис исключает путаницу версий, позволяет править макет сайта Figma в реальном времени и встроен во все современные процессы верстки.

Эксперты веб-продакшна «Экспансия» подготовили инструкцию, как создать макет сайта в Фигме, чтобы сэкономить время и деньги. Мы расскажем пошагово про кнопки, настройки и реальные рабочие процессы.

Почему Figma стала стандартом для бизнеса

Раньше для начинающих дизайнеров вход был сложным – нужен был дорогой Photoshop и мощный компьютер. Сейчас мир перевернула Figma. Фигма – это онлайн-сервис для разработки интерфейсов. Теперь не нужно устанавливать тяжеловесное и дорогое ПО. Достаточно зарегистрироваться на сайте figma.com.

Главное преимущество – работа в облаке. Не нужно беспокоиться о сохранении файлов, они всегда на диске сервера. Кросс-платформенность позволяет работать на Windows, Mac и Linux. И у него есть бесплатный базовый план, чего хватит для старта создания сайта в Фигме.

Начинаем с подготовки, а не с дизайна

Прежде чем открывать сервис и рисовать сайт в Фигме, нужно ответить на три вопроса:

• Какова цель сайта – продавать, информировать или регистрировать?
• Кто ваша ЦА и что им мешает совершить целевое действие?
• Что делают конкуренты, и где у них слабые места?

Важный совет от экспертов «Экспансия»: начните с прототипа. Не красьте и не рисуйте иконки. Возьмите серые прямоугольники и схематично расставьте блоки.

Прототипирование в Figma занимает 30 минут, но спасает дни правок на этапе верстки. Грамотное создание прототипа сайта на этом этапе позволяет утвердить логику навигации и расположение основных блоков.

Пошаговая инструкция по созданию макета сайта в Figma

Теперь переходим к практике. Открываем Figma. Слева доска проектов, справа пустой холст. Вот нумерованный список действий, который проведет вас от пустого экрана до готовой структуры.

Создайте фрейм под нужное устройство.

Фрейм в Figma – это контейнер для всего содержимого будущего сайта. Фрейм в Figma задает границы, внутри которых будет жить дизайн: шапка, текст, кнопки и картинки. В отличие от обычной фигуры, фрейм умеет обрезать лишнее, подстраиваться под содержимое через Автолэйаут и синхронизироваться с сеткой. Без фрейма создать макет сайта в Фигме невозможно – это как пытаться построить дом без фундамента.

Нажмите клавишу F на клавиатуре или выберите инструмент Frame на левой панели (иконка с перекрестьем). После этого справа во вкладке Design вы увидите поле Width. Для десктопа стандартно используйте 1440 пикселей, для мобильной версии – 375 пикселей. Если вы делаете интернет-магазин, сначала нарисуйте фрейм в Figma шириной 1440px – это самая популярная ширина для ноутбуков и мониторов.

Настройте сетку в Figma с 12 колонками

Кликните правой кнопкой мыши по созданному фрейму и в выпадающем меню выберите Layout grid. Нажмите на плюсик, чтобы добавить новую сетку. По умолчанию стоит тип Grid, но нам для веб-дизайна нужны Columns. Выберите в выпадающем списке тип Columns, поставьте количество 12 и отступы Gutter 20px. Сетка в Figma – это невидимый каркас, который держит весь дизайн. Без сетки создать макет сайта в Фигме можно, но на реальном экране блоки поедут, отступы поплывут.

В дизайне сайта в Figma есть три типа сеток, и каждый решает свою задачу.

Колоночная сетка – вертикальные полосы, которые делят фрейм на столбцы (чаще всего 12). Между ними остаются отступы – именно по этим колонкам можно выровнять текст, карточки товаров и боковые панели.

Строчная сетка работает как горизонтальные направляющие. Она помогает ровнять строки текста, отступы между абзацами и высоту блоков, чтобы ничего не «плыло» вверх или вниз.

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

Добавьте элементы с помощью инструментов

После создания фрейма в Figma (его ещё называют арт-бордом) и настройки сетки можно приступать к созданию элементов. В центре экрана находится этот самый фрейм-арт-борд, внутри которого и будет жить проект. Именно здесь начинаем расставлять блоки, тексты и кнопки для будущего дизайна сайта в Figma. В нижней части экрана расположена панель инструментов – отсюда можно брать всё нужное для создания фигур, текстовых блоков, а также для загрузки фото и видео. С левой стороны находится панель слоёв: она показывает каждый элемент внутри фрейма, их порядок и вложенность.

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

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

Включите Auto Layout для гибкости.

Выделите три маленьких прямоугольника, которые вы нарисовали в ряд, и нажмите Shift + A на клавиатуре. Произошла магия – теперь это умная группа. Если вы растянете край группы, все три прямоугольника изменят ширину автоматически. Автолэйаут нужен, чтобы адаптивный макет сайта в Figma не ломался на разных экранах, иначе верстальщик будет переделывать блоки вручную часами.

Работаем с компонентами. Экономия времени

Теперь представьте, что у вас на сайте 20 одинаковых кнопок. Рисовать каждую отдельно – долго и муторно. Решить задачу помогут компоненты в Figma. Нарисуйте одну кнопку инструментом Rectangle, добавьте внутрь текст (клавиша T). Выделите всё это правой кнопкой мыши или просто нажмите Ctrl + Alt + K (на Mac Command + Option + K). Готово, вы создали компонент. Теперь перетащите его копию из панели Assets (вкладка слева, иконка с книгой) в любое другое место.

Самое интересное – компоненты и варианты в Figma позволяют делать разные состояния. Нажмите на мастер-компонент (он отмечен ромбом в панели слоев). В правой панели рядом с именем компонента нажмите на иконку с четырьмя точками (Create component set). Добавьте свойство, например, «Состояние» со значениями Default и Hover. Теперь у вас есть кнопка, которая меняет цвет при наведении курсора. Изменив один раз цвета в мастер-кнопке, вы обновите все 20 кнопок в макете автоматически.

Требования к качественному макету сайта в Figma для разработки

Дизайн сайта в Figma считается профессиональным только тогда, когда его удобно передавать в работу. Мы в «Экспансии» выделили несколько ключевых требований, которые отличают хаотичную картинку от готового к верстке проекта.

1. В макете должны быть использованы стили для цветов и шрифтов – это означает, что каждый оттенок и размер текста сохранен в панели Styles, и разработчик может скопировать CSS готовым кодом.
2. Для дизайна сайта в Фигма важна правильная организация слоев: каждый слой в левой панели Layers должен иметь понятное имя вроде «Button_Submit», а не «Rectangle 144». Кроме того, требуется проработка всех состояний интерактивных элементов: кнопка должна иметь варианты Default, Hover, Pressed и Disabled, чтобы верстальщик понимал, как она ведет себя в каждом сценарии.
3. Наличие автолэйаут на всех повторяющихся блоках делает адаптивный макет гибким и живым, позволяя элементам подстраиваться под разные размеры экрана без ручных правок.
4. Прототипирование для интерактива. Сайт должен двигаться. Перейдите на верхнюю панель и нажмите на вкладку Prototype (третья иконка справа – квадрат с точкой). Кликните на созданную кнопку. Рядом с ней появится маленький кружок с точкой. Зажмите его мышкой и перетащите на второй фрейм (например, на страницу «Спасибо за заявку»). Отпустите мышь. В появившемся окошке выберите триггер On Click и анимацию Smart Animate. Теперь вы сделали настоящий кликабельный прототип. Прототипирование позволяет показать клиенту логику сайта до верстки, а не объяснять на пальцах.

Частые ошибки при создании дизайна сайта в Figma

За годы работы мы собрали типичные проблемы, из-за которых передача макета сайта в Figma в верстку превращается в конфликт.

1. Отсутствие сетки и направляющих. Дизайнер расставляет блоки на глаз, полагаясь на чутье. В результате на реальном экране элементы скачут на 5-10 пикселей, и верстальщик тратит полдня на выравнивание того, что должно было быть ровным с самого начала. Профессиональный дизайн сайта в Figma всегда начинается с сетки – без неё это не дизайн, а хаос.
2. Игнорирование адаптивных версий страницы под разные устройства. Студия рисует только десктопный макет шириной 1440px и считает, что этого достаточно. Но когда заказчик открывает сайт с телефона, кнопка «Купить» уезжает за край экрана, а текст накладывается на картинки. Хороший дизайн сайта в Figma обязан включать три фрейма: десктоп, планшет и мобильный телефон.
3. Невынесенные в Styles цвета и шрифты. Каждый заголовок имеет случайный оттенок серого, каждая кнопка помнит свой уникальный цветовой код. Разработчик не может быстро скопировать единую схему, а поддержка сайта превращается в лотерею. Если маркетолог попросит поменять акцентный цвет, дизайнер будет править сотню блоков вручную и всё равно где-то ошибётся.
4. Отсутствие комментариев для разработчиков по сложным элементам. Дизайнер оставляет сложный слайдер или анимированное меню без единого пояснения. Программисту приходится додумывать логику работы самостоятельно, что почти всегда приводит к ошибкам на тестировании. Нажмите клавишу C и оставьте три предложения – это сэкономит часы созвонов.
5. Неподготовленные к экспорту иконки и графика. Дизайнер передаёт иконки в формате PNG, хотя верстальщику жизненно необходим SVG, а изображения не оптимизированы по весу. В результате неподготовленные к экспорту иконки и графика увеличивают скорость загрузки сайта, а время загрузки напрямую влияет на SEO и удержание посетителей. Все векторные иконки должны быть в SVG, растровые фото – в WebP, и ни одного лишнего пикселя

Что в итоге и как заказать у нас

Создать макет сайта в Фигме по правилам – это не про красоту. Это про экономию. Качественно подготовленный макет с сеткой, автолэйаут, стилями и прототипами сокращает количество багов на этапе тестирования в разы. Вы меньше платите верстальщику за переделки. Вы быстрее запускаетесь. Вы обгоняете конкурентов.

Мы в «Экспансии» прошли сотни проектов и знаем, как сделать сайт в Фигме, чтобы он нравился и поисковым роботам, и живым людям. Мы создаем адаптивный макет, продумываем состояния кнопок и готовим файл так, что на этапе разработки возникает минимум вопросов. А еще мы всегда оставляем комментарии к сложным блокам и выносим все стили – никакой самодеятельности на глаз.

Хотите получить готовый к верстке и продвижению макет, где учтены все требования к качеству и SEO? Закажите создание макета сайта в Figma в «Экспансии» прямо сейчас. Мы разберем ваш бизнес, нарисуем прототип, проверим адаптивный макет на всех устройствах и сэкономим ваши время и деньги.