Если вы верстальщик и до сих пор считаете Figma исключительно инструментом дизайнеров, вы упускаете огромный пласт возможностей для ускорения и улучшения своей работы. Это не просто просмотрщик макетов — это полноценная среда для извлечения точных данных, прототипирования логики и организации процесса разработки. Давайте разберемся, как превратить Figma из источника PSD-файлов нового поколения в вашего главного союзника.
Почему Figma — это больше чем макет
В отличие от статичных файлов, Figma — это живой, интерактивный документ. Дизайнер может оставлять комментарии прямо на элементах, создавать прототипы с переходами, а главное — поддерживать актуальную версию дизайна в одном месте. Для верстальщика это означает конец эпохи "дизайнер прислал финальный_макет_правки_точно_финальный.psd". Все правки, состояния элементов (hover, active, disabled) и вариации (десктоп/мобильный) собраны в одном файле с четкой структурой.
Ключевое преимущество: Figma хранит историю изменений. Вы всегда можете посмотреть, что и когда менялось в макете, и откатиться к предыдущей версии, если нужно.
Инструменты верстальщика в панели Inspect
Правая панель в режиме "Inspect" — ваша главная рабочая станция. Здесь вы найдете не только базовые параметры.
Точные CSS-свойства
Figma не просто показывает значения, она генерирует готовый CSS-код для выбранного элемента, включая:
- Сложные тени и размытия: Значения box-shadow и backdrop-filter с указанием всех параметров.
- Градиенты и границы: Точный CSS для linear-gradient и border-radius, даже для сложных составных радиусов.
- Типографика: Полный набор свойств font (font-family, weight, size, line-height, letter-spacing) в пикселях, rem или em (настройка в Preferences).
Работа с ресурсами
Нажав на любой ресурс (изображение, иконка, SVG), вы получаете:
- Возможность экспорта в нужном формате (PNG, JPG, SVG, WebP) с выбором плотности (1x, 2x, 3x).
- Для SVG — просмотр чистого кода, который можно скопировать прямо в проект.
- Информацию о размере файла, что критично для оптимизации.
Продвинутые техники для эффективной верстки
1. Компоненты и вариации
Умные дизайнеры создают кнопки, инпуты и карточки как Components. Изучите панель "Assets" — там собраны все компоненты. Кликнув на экземпляр, вы увидите все его возможные состояния (Properties) и сможете переключать их, чтобы получить стили для :hover или :disabled.
Используйте плагин "CSS Gen" или "Style Organizer" для автоматической генерации CSS-переменных (Custom Properties) на основе цветов и типографики из макета. Это залог согласованного дизайн-системы в коде.
2. Авто-лейаут (Auto Layout)
Если дизайнер использовал Auto Layout (а он должен был!), это ваша подсказка к структуре Flexbox или Grid в CSS. Нажав на фрейм с Auto Layout, вы увидите направление (direction), правила распределения пространства (justify-content) и отступы (gap/padding). Это почти готовый каркас для стилей.
3. Работа с сетками (Grids)
Активируйте отображение сеток (Layout Grids) в меню. Это поможет вам понять выравнивание, колоночную структуру и отступы. Для сложных Grid-сеток Figma показывает все линии и промежутки.
Плагины — суперсила верстальщика
Сообщество создало десятки плагинов, которые решают рутинные задачи:
- Px to Rem / Em: Мгновенно конвертирует все размеры из пикселей в относительные единицы.
- Image Palette Extractor: Извлекает доминирующую палитру цветов из изображений для создания гармоничных overlay-эффектов.
- Contrast Checker: Проверяет контрастность текста относительно фона на соответствие WCAG.
- HTML to Figma / Figma to HTML: Экспериментальные плагины для конвертации (пока не идеальны, но полезны для прототипов).
FAQ: Частые вопросы верстальщиков о Figma
Как точно перенести отступы и размеры?
Используйте панель Inspect. Для отступов между элементами выделите оба объекта — Figma покажет расстояние между ними. Все значения можно копировать одним кликом.
Дизайнер не использует компоненты. Что делать?
Ведите просветительскую работу! Покажите, как компоненты экономят время им при правках и вам при верстке. Можно начать с малого — создать компоненты для кнопок самостоятельно в копии файла.
Как работать с адаптивом?
Ищите в файле отдельные фреймы для разных разрешений (например, Desktop 1440, Tablet 768, Mobile 375). Часто они собраны на одной странице или в виде вариаций компонентов. Используйте Constraints (ограничения) в панели Design, чтобы понять, как элементы должны себя вести при ресайзе.
Можно ли экспортировать весь текст сразу?
Да, с помощью плагинов типа "Text Exporter" или "Copy Doc". Это полезно для подготовки контента или передачи текстов на перевод.
Figma показывает странные шрифты, которых нет у меня.
Figma использует шрифты из Google Fonts или загруженные дизайнером. Если шрифт отсутствует, он будет заменен на системный. Уточните у дизайнера названия используемых шрифтов и их вес (например, Inter Regular 400, Inter Medium 500). Часто достаточно подключить одно семейство с несколькими weight.
В итоге, Figma — это мост между дизайном и кодом. Чем глубже вы в нее погрузитесь, тем меньше времени уйдет на "угадывание" замысла дизайнера и тем точнее будет конечный результат. Ваша задача — не просто взять цвета и размеры, а понять систему, логику и состояния. Тогда верстка перестанет быть механической работой и станет осмысленным воплощением дизайна в коде.