Как сделать верстку в фигме

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

Что такое верстка в Figma: зачем она нужна

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

Качественная верстка позволяет быстро экспортировать CSS, понять взаимосвязь блоков и адаптировать интерфейс под разные устройства. Без неё разработчику приходится «гадать» по пикселям, что увеличивает сроки и риск ошибок. Особенно это критично в командах, где работает несколько дизайнеров и разработчиков.

Figma предоставляет инструменты, которые делают верстку эффективной: Auto Layout, компоненты, переменные, стили текста и заливок. Использование этих возможностей превращает макет из картинки в живую документацию. Верстка становится частью системы дизайна, а не одноразовым артефактом.

Основные правила верстки в Figma

Чтобы верстка была удобной для восприятия и использования, необходимо следовать проверенным принципам. Они работают независимо от масштаба проекта — от лендинга до сложного SaaS-интерфейса.

• Используйте сетку и отступы: Работайте с 8px-системой. Все отступы, размеры и интервалы должны быть кратны 8. Это обеспечивает визуальную гармонию и совместимость с CSS-фреймворками.
• Группируйте логически: Каждый блок (например, карточка товара) должен быть отдельной группой. Внутри — строгая иерархия: контейнер → заголовок → описание → кнопка.
• Называйте слои осмысленно: Вместо «Rectangle 3» пишите «Button / Primary / Hover». Это помогает разработчику быстро найти нужный элемент.
• Избегайте вложенных фигур: Не используйте маски и булевы операции там, где можно обойтись стилями. Маски не экспортируются в код напрямую и усложняют работу.
• Следите за z-индексом: Элементы не должны пересекаться без необходимости. Перекрытия — источник путаницы при верстке.

Пошагово к чистой верстке: практическое руководство

Создание правильно сверстанного макета — это последовательный процесс. Ниже приведен алгоритм, который подходит как новичкам, так и опытным дизайнерам.

1. Определите размер холста. Выберите стандартный размер (например, 375×812 для мобильных, 1440×900 для десктопа). Используйте фреймы с фиксированными размерами.
2. Настройте сетку и направляющие. Включите 8px-сетку в настройках фрейма. Добавьте внутренние отступы (padding) 16–32px.
3. Создайте базовые стили. Настройте текстовые стили (heading, body, caption) и цвета через библиотеку Figma. Это сэкономит время и обеспечит единообразие.
4. Стройте снизу вверх. Начинайте с атомарных элементов: кнопки, иконки, инпуты. Затем собирайте из них карточки и секции.
5. Применяйте Auto Layout. Оберните каждый составной элемент в Auto Layout. Это сделает его адаптивным и предсказуемым.
6. Группируйте и называйте. После создания блока выделите его, нажмите Ctrl+G и дайте понятное имя.
7. Проверьте на разных размерах. Измените ширину фрейма и убедитесь, что элементы ведут себя корректно.
8. Подготовьте к экспорт. Убедитесь, что все компоненты извлечены, переменные используются, а ненужные слои удалены.

Работа с Auto Layout: основа адаптивного дизайна

Auto Layout — один из самых мощных инструментов Figma. Он позволяет создавать гибкие контейнеры, которые автоматически изменяют размер и позицию содержимого. Без него невозможно сделать современную верстку.

Когда вы применяете Auto Layout к группе элементов, они становятся частью одного потока — горизонтального или вертикального. Вы можете задать расстояние между ними (gap), выравнивание и направление роста. Это аналог flexbox в CSS.

Как добавить Auto Layout

• Выделите элементы (текст, иконки, кнопки).
• Нажмите Shift+A или выберите в панели справа «Auto Layout».
• Выберите направление: горизонтальное или вертикальное.
• Настройте gap, padding и выравнивание.

Практические примеры

• Кнопка с иконкой: Оберните текст и иконку в Auto Layout с gap 8px. Кнопка будет масштабироваться под любой текст.
• Навигационное меню: Создайте горизонтальный Auto Layout с пунктами. При добавлении нового пункта он автоматически займет свое место.
• Список уведомлений: Вертикальный Auto Layout с gap 12px. Каждое новое уведомление добавляется снизу.

Компоненты и слоты: переиспользование без потерь

Компоненты — основа масштабируемого дизайна. Они позволяют создать один элемент (например, кнопку) и использовать его по всему проекту. При изменении мастер-компонента все экземпляры обновляются автоматически.

Но обычные компоненты ограничены: нельзя заменить текст или иконку без разрыва связи. Здесь на помощь приходят слоты (component properties).

Как создать компонент со слотами

1. Создайте элемент (например, карточку).
2. Выделите часть, которую нужно сделать изменяемой (заголовок).
3. В правой панели найдите раздел «Component Properties».
4. Нажмите «+» и выберите «Text». Назовите свойство, например «title».
5. Повторите для других частей: «description», «image», «buttonText».

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

Система дизайна как основа масштабируемой верстки

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

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

• Цвета: Создайте набор цветовых переменных (primary, secondary, success, error) с оттенками (50, 100, …, 900).
• Типографика: Определите шрифтовые стили: H1, H2, Body, Caption — с точными размерами, интерлиньяжем и весом.
• Пространство: Задайте переменные для отступов: spacing-4, spacing-8, spacing-16 и т.д.
• Тени и радиусы: Добавьте стили для теней (small, medium, large) и скруглений (4px, 8px, 12px).
• Иконки: Используйте векторные иконки как компоненты, чтобы их можно было менять цвет и размер.

Подключение библиотеки:

1. Перейдите в File > Settings > Libraries.
2. Включите свою библиотеку (например, «Design System Core»).
3. Теперь все стили и компоненты доступны в любом проекте.

Типичные ошибки верстки в Figma и как их избежать

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

Ошибка 1: Отсутствие Auto Layout

Без Auto Layout элементы не адаптируются. Текст вылезает за границы, кнопки не растягиваются.
Решение: Применяйте Auto Layout ко всем составным элементам.

Ошибка 2: Жесткая привязка к размеру

Фреймы с фиксированной шириной 375px, но без адаптации под 414px.
Решение: Используйте constraints (ограничения) и min/max width.

Ошибка 3: Непонятные названия слоев

«Copy 3», «New Group», «Rectangle — don’t delete».
Решение: Называйте слои по шаблону: [Тип] / [Назначение] / [Состояние].

Ошибка 4: Дублирование стилей

Один и тот же синий цвет создан 5 раз с разными названиями.
Решение: Используйте глобальные стили и переменные.

Ошибка 5: Отсутствие документации

Разработчик не знает, какой отступ между строками или как ведет себя модалка.
Решение: Добавьте страницу «Developer Notes» с пояснениями.

Экспорт и передача макетов разработчикам

После завершения верстки важно правильно передать макет. Figma позволяет экспортировать не только изображения, но и данные для кода.

• Используйте режим Developer: Переключитесь во вкладку «Dev Mode» (Ctrl+Shift+E). Здесь разработчики увидят отступы, цвета, шрифты и CSS-свойства.
• Добавьте заметки: Через плагины (например, «Notes for Developers») можно оставлять комментарии: «Анимация 300ms ease-in-out», «Загружается по API».
• Экспортируйте ассеты: Для иконок и логотипов задайте 1x, 2x, 3x экспорт в SVG или PNG.
• Поделитесь ссылкой: Отправьте read-only ссылку с включенным Dev Mode. Убедитесь, что все страницы доступны.

Экспертное мнение

Он отмечает, что лучшие практики сегодня — это не опция, а стандарт. Команды, которые игнорируют Auto Layout и компоненты, теряют в скорости и качестве. «Figma — это не Photoshop. Здесь дизайнер должен думать как инженер.»

Вопросы и ответы

Заключение

Верстка в Figma — это мост между дизайном и разработкой. Она превращает статичные макеты в живые, масштабируемые интерфейсы. Использование Auto Layout, компонентов, переменных и четкой структуры делает процесс проектирования быстрее, а результат — качественнее.

• Используйте 8px-сетку и кратные отступы.
• Применяйте Auto Layout ко всем составным элементам.
• Создавайте компоненты со слотами для гибкости.
• Развивайте систему дизайна с переменными и стилями.
• Передавайте макеты в Dev Mode с пояснениями.