Когда-то верстальщик получал от дизайнера набор статичных PNG или PSD-файлов, где каждый отступ приходилось вымерять пиксель в пиксель. Сегодня всё иначе. Figma совершила революцию не только в дизайне, но и в вёрстке, превратив процесс из утомительной расшифровки в диалог. Это не просто инструмент для просмотра макетов — это полноценная среда для точного, быстрого и осмысленного переноса дизайна в код.
Почему Figma — это must-have для современного верстальщика?
Figma стёрла границы между дизайнером и разработчиком. Работа в одном облачном файле в реальном времени означает, что вы всегда видите актуальную версию макета. Больше никаких «я отправил обновление вчера вечером на почту». Но главное — это невиданная ранее прозрачность замысла дизайнера.
Ключевое преимущество — инспектирование. Нажав на любой элемент, вы мгновенно видите все его CSS-свойства: точные отступы, цвета (в HEX, RGB, HSL), параметры теней, шрифты и даже готовый код для некоторых свойств.
Инструменты Figma, которые экономят часы работы
1. Режим инспектора и панель «Code»
Правая панель в режиме «Inspect» — ваш лучший друг. Здесь вы можете:
- Копировать CSS-свойства для margin, padding, width/height.
- Экспортировать любую иконку или изображение в нужном формате (SVG, PNG, JPG) с выбранным разрешением.
- Видеть точную информацию о типографике: font-family, size, line-height, letter-spacing.
- Анализировать авто-лейауты (Auto Layout) — мощнейший инструмент Figma, который показывает, как элементы должны адаптироваться и выстраиваться относительно друг друга.
2. Компоненты и стили
Дизайнер создаёт кнопку как компонент? Это золотая жила для вас. Изучив главный компонент (Master Component), вы сразу понимаете все его состояния (hover, active, disabled) и варианты. Вёрстка становится системной, а не хаотичной.
3. Плагины для верстальщиков
Экосистема плагинов делает Figma бесконечно расширяемой:
- CSS Gen или Figmattic — генерируют готовый CSS-код для выбранного элемента.
- Px to Rem / Em — мгновенно конвертируют пиксели в относительные единицы.
- Image Palette — извлекает цветовую палитру из загруженных изображений.
- Copy as HTML/CSS — позволяет скопировать элемент с базовой разметкой и стилями.
Как правильно «читать» макет в Figma: Стратегия
Не бросайтесь сразу в код. Проведите рекогносцировку:
- Изучите структуру слоёв (Layers). Как дизайнер логически сгруппировал элементы? Это часто подсказывает структуру DOM-дерева.
- Найдите и сохраните все стили (Text Styles, Color Styles, Effect Styles). Это ваш будущий CSS-файл с переменными (Custom Properties).
- Проанализируйте сетки (Grids) и направляющие (Guides). Поймите логику выравнивания и отступов.
- Проверьте адаптивность. Часто дизайнеры готовят макеты для разных разрешений (Desktop, Tablet, Mobile). Переключайтесь между ними, чтобы увидеть, как элементы трансформируются.
Не стесняйтесь оставлять комментарии (комбинация C) прямо на макете. Спросите у дизайнера про неочевидные состояния элементов или уточните логику анимации. Это сократит количество правок на этапе приёмки.
От Figma к коду: Практические шаги
Создайте чёткий pipeline:
- Экспорт ресурсов: выгрузите все иконки (предпочтительно в SVG), изображения, шрифты.
- Настройка базы: создайте CSS-файл, пропишите переменные на основе сохранённых стилей Figma (цвета, шрифты, тени).
- Вёрстка по компонентам: начните с мелких, независимых компонентов (кнопки, поля ввода, карточки), сверяя каждый параметр с инспектором.
- Сборка страницы: используя Auto Layout и Constraints как подсказки, соберите крупные блоки и страницы.
FAQ: Часто задаваемые вопросы
Можно ли получить готовый HTML-код из Figma?
Нет, Figma не генерирует полноценный, семантически верный HTML. Плагины и режим инспектора дают лишь CSS-свойства и подсказки по структуре. Основная интеллектуальная работа — построение правильной HTML-структуры и «оживление» её на JS — остаётся за верстальщиком.
Как точно перенести отступы и выравнивание?
Внимательно смотрите на параметры Auto Layout (пространство между элементами, выравнивание, паддинги). Используйте в инспекторе режим просмотра расстояний (наведите курсор между элементами с зажатым Alt/Option).
Дизайнер использует нестандартные шрифты. Что делать?
В Figma часто подключены шрифты из Google Fonts или других библиотек. В панели инспектора, в разделе текста, обычно есть ссылка на источник шрифта. Если шрифт кастомный, попросите дизайнера предоставить файлы (.woff2, .ttf) или ссылку на веб-сервис.
Как работать, если дизайнер не структурировал макет?
Предложите коллеге базовые правила: именовать слои, группировать элементы, использовать компоненты. Это в ваших общих интересах. Если дизайн «сырой», начните диалог и совместно наведите порядок — это сэкономит время всем на этапе вёрстки и дальнейшей разработки.