Как веб-студия делает макет сайта в Figma — от вайрфрейма до спеки для верстальщика

Макет сайта в Figma удобнее собирать по структуре страниц, сетке и состояниям интерфейса. Сначала проверяют состав страниц и собирают вайрфрейм, затем оформляют UI-kit, адаптивы и прототип. Разберём, что подготовить к передаче разработчику и где заканчиваются возможности макета.

Как студия собирает сайт в Figma

Файл Figma для передачи разработчику должен показывать страницы, состояния интерфейса и поведение блоков. Один красивый экран этого не заменит: по нему нельзя понять отступы, состояния кнопок и правила сетки. Сначала согласуйте карту страниц и сценарии, потом собирайте экраны.

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

Начните с брифа и карты страниц. Затем соберите серый вайрфрейм, чтобы проверить структуру без споров о цветах и фотографиях. После согласования добавьте UI-kit, нарисуйте нужные версии страниц, соберите прототип и подготовьте материалы для передачи.

Для макета сайта достаточно инструментов Design и FigJam. Slides для подготовки к вёрстке не нужен.

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

Для баннера или разовой презентации такой процесс избыточен. Для коммерческого сайта без согласованных состояний интерфейса файл рано передавать разработчику.

Фреймы, сетка и брейкпоинты веб-макета

Сначала договоритесь о ширине фреймов и правилах сетки. Значения зависят от проекта и аудитории: можно начать с десктопного фрейма 1440 px и проверить узкий экран, а для планшета и телефона собрать отдельные версии. Это рабочие ориентиры, а не стандарт для каждого сайта.

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

Одна страница и одна ширина — один фрейм. Для многостраничного сайта размещайте страницы отдельно и называйте их понятно. Так легче найти границу между главной, контактами и другими разделами.

В панели фреймов есть готовые пресеты, но перед началом работы задайте размеры проекта. Для навигации по холсту пригодятся клавиша F для фреймов и пробел для перемещения.

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

Вайрфрейм, UI-kit, компоненты и Variables

Вайрфрейм помогает проверить структуру страницы до выбора цветов и изображений. Покажите в нём основные блоки, их порядок и состояния форм. Так команда раньше заметит лишние секции и пропущенные сценарии.

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

Текстовые стили и цветовые переменные помогают применять согласованные правила оформления. Variables можно использовать для цветов, отступов, радиусов и вариантов темы. Если стили не заданы, правки придётся повторять вручную.

Без общей библиотеки одинаковые кнопки на разных страницах легко разъезжаются по размеру и оформлению.

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

Десктоп, планшет и мобайл: Auto Layout и Constraints

Адаптивный макет описывает, как блоки меняются при сужении экрана. Auto Layout помогает задать направление, промежутки и внутренние поля элементов, а Constraints — их положение относительно краёв фрейма. Вместе они сокращают объём ручных правок при изменении содержимого.

Соберите основные страницы, затем проверьте узкие ширины. На телефоне отдельно проверьте меню, формы, таблицы, галереи и закреплённую шапку. Уменьшенная копия десктопа не покажет, как пользователь работает с этими элементами.

Адаптивный сайт проектируют с учётом поведения блоков на разных экранах. Если карточки просто уменьшили, а форма выходит за край, макет требует доработки.

Адаптив в Figma описывает поведение блоков, а не только набор картинок разной ширины.

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

Кликабельный прототип и совместная работа

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

Оставляйте комментарии на холсте и заранее определите, кто может редактировать файл. Заказчику обычно достаточно просмотра и комментариев, дизайнеру — доступа для правок. История версий помогает найти прежние варианты.

Ссылку на прототип можно открыть на телефоне. Так проще проверить мобильную навигацию и размеры интерактивных элементов.

Инструменты генерации могут помочь с черновыми вариантами текста или блока. Перед согласованием дизайнеру всё равно нужно проверить сетку, компоненты и смысл страницы.

Прототип нужен для проверки сценария. Он не заменяет работающий сайт.

Страницы файла, нейминг и командная библиотека

Понятная структура файла помогает дизайнеру и разработчику быстро найти нужный экран. Разнесите обложку, вайрфреймы, версии страниц для устройств, UI-kit и прототип по отдельным страницам. Состав и названия адаптируйте под проект.

Называйте фреймы и слои по смыслу: например, «Главная / Шапка / Кнопка». Имя вроде Frame 127 не объясняет, что находится внутри.

Повторно используемые компоненты удобно хранить в командной библиотеке. Если над файлом работают несколько человек, согласуйте порядок внесения изменений, чтобы не перезаписать общие компоненты.

Условия и ограничения планов Figma сверяйте с официальной страницей тарифов: состав функций может меняться.

• Добавьте обложку с названием и статусом проекта.
• Разнесите страницы по типам экранов, отдельно выделите UI-kit и прототип.
• Дайте фреймам и слоям понятные имена.
• Храните общие компоненты отдельно от экземпляров на страницах.
• Публикуйте компоненты в общей библиотеке, если они нужны команде.

Передача макета в вёрстку и сборка на WordPress

Перед передачей проверьте размеры, отступы, шрифты и состояния элементов, которые нужны разработчику. Dev Mode помогает изучить параметры выбранного слоя и подготовить ассеты. Он не описывает сетку CMS, серверную логику или поведение формы.

Для веба обычно готовят SVG-иконки и растровые изображения в нужном размере и качестве. Проверьте SVG на лишние группы и эффекты: они могут усложнить правки при разработке.

Макет для WordPress не загружается в админку как готовая тема. Разработчик собирает тему, блоки Gutenberg или страницу в конструкторе по согласованным сетке и отступам.

• Передайте ссылку на файл и прототип, проверьте доступ разработчика.
• Укажите используемые шрифты и проверьте условия их веб-лицензии.
• Подготовьте SVG-иконки и растровые изображения в подходящем размере.
• Покажите состояния наведения, фокуса, пустых и ошибочных форм.
• Добавьте системные страницы, если они нужны проекту.

Файл Figma помогает передать дизайн и параметры элементов. Структуру темы и логику сайта разработчик собирает отдельно.

Какой тариф нужен студии и из чего складывается срок макета

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

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

Если проект собирается из уже готовых компонентов, UI-kit может потребовать меньше работы. Если каждый экран уникален, срок будет зависеть от числа решений, которые нужно согласовать. Состав страниц для локального бизнеса можно обсудить на странице о разработке сайтов для бизнеса в Новороссийске.

Ошибки макета, из-за которых ломается вёрстка

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

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

Один JPG не передаёт структуру и поведение сайта.

Передавайте разработчику страницы, состояния и правила оформления, а не только скриншот.

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

Источники

• Статья 1286 ГК РФ. Лицензионный договор о предоставлении права использования произведения — КонсультантПлюс