Figma-парсер для брендбука: автосбор цветов и шрифтов из 100 макетов

Коротко: Figma-парсер автоматически извлекает цвета, шрифты и стили из макетов для создания брендбука. За 10 минут скрипт обрабатывает 100+ макетов, экономя дизайнерам 15-20 часов ручной работы и исключая ошибки при сборе элементов фирменного стиля.

Содержание

• Зачем нужен парсер для Figma-макетов?
• Что именно извлекает парсер из макетов?
• Как работает автоматический сбор стилей?
• Пошаговая инструкция: создаём парсер
• Какие результаты даёт автоматизация?
• Как оптимизировать собранный брендбук?
• Реальные кейсы использования

Зачем нужен парсер для Figma-макетов?

Представьте: у вас 100 макетов интерфейса, и нужно собрать из них брендбук. Дизайнер садится и начинает вручную выписывать все цвета, шрифты, размеры — это занимает дней 5-7. А ещё половину элементов он пропустит, потому что человеческий глаз не идеален. Мы в DS495 столкнулись с этой проблемой, когда клиент принёс проект с 150+ экранами мобильного приложения. Сказал: "Хотим брендбук на основе готового дизайна". Первая мысль — сколько это займёт времени? Вторая — а что если автоматизировать?

Парсер Figma — это как металлоискатель для дизайнера. Находит все скрытые сокровища в макетах, которые глазом не заметишь.

Основные проблемы ручного сбора:

• Время — 15-20 часов работы дизайнера
• Ошибки — пропущенные цвета и шрифты
• Несистемность — нет единой структуры данных
• Дублирование — один цвет считается как разные из-за округления

Парсер решает всё это за 10-15 минут. Загружаете макеты, запускаете скрипт, получаете структурированный брендбук в формате JSON или CSV.

Что именно извлекает парсер из макетов?

Парсер — это не волшебная палочка, он видит то же, что видит Figma API. Но зато он видит всё и сразу, без человеческого фактора.

Тип элемента	Что извлекается	Формат данных
Цвета заливки	HEX, RGB, градиенты	#FF5733, rgba(255,87,51,1)
Цвета обводки	Границы элементов	#333333, толщина 2px
Шрифты	Семейство, размер, вес	Inter, 16px, Medium
Тени и эффекты	Drop shadow, inner shadow	blur 10px, offset 2px
Радиусы скругления	Border radius	8px, 16px, 24px

Самое крутое — парсер находит неочевидные вещи. Например, в одном проекте обнаружил 47 оттенков синего, хотя дизайнер был уверен, что использует только 5. Оказалось, часть цветов попала в макеты через copy-paste из других проектов. Парсер также извлекает метаданные:

1. Частота использования каждого элемента
2. Страницы, где встречается элемент
3. Контекст применения (кнопки, фон, текст)
4. Связанные стили и компоненты

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

Нужна помощь с этой задачей? Команда DS495 решит её под ключ. Обсудить проект →

Как работает автоматический сбор стилей?

Парсер подключается к Figma через REST API. У Figma отличная документация — всё прозрачно и логично. Основная магия происходит в нескольких шагах: **Шаг 1: Получение структуры файла** API возвращает JSON с полным деревом объектов. Каждый элемент — прямоугольник, текст, группа — имеет свойства стилей. **Шаг 2: Рекурсивный обход** Скрипт проходит по всем элементам, включая вложенные группы и фреймы. Собирает все стили в массив. **Шаг 3: Дедупликация** Удаляет дубликаты по цветам и шрифтам. Например, #FF5733 и #ff5733 — это один цвет. **Шаг 4: Группировка и анализ** Сортирует найденные элементы по типам, частоте использования, контексту. ```javascript // Примерная структура ответа API { "fills": [ {"type": "SOLID", "color": {"r": 1, "g": 0.34, "b": 0.2}} ], "fontFamily": "Inter", "fontSize": 16, "fontWeight": 500 } ``` Хитрость в том, что Figma хранит цвета в RGB от 0 до 1, а не от 0 до 255. Парсер конвертирует в привычные форматы.

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

Сейчас покажу, как мы делаем парсер в DS495. Без лишних заморочек — только то, что работает. **Шаг 1: Получаем токен доступа** Идём в Figma → Settings → Personal access tokens → Generate new token. Токен даёт доступ ко всем вашим файлам. **Шаг 2: Находим ID файлов** URL файла в Figma выглядит так: `figma.com/file/ABC123/Project-Name`. Часть `ABC123` — это и есть ID. **Шаг 3: Настраиваем окружение**

• Node.js версии 16+ (для работы с современным JavaScript)
• Библиотека axios для HTTP-запросов
• Модуль fs для сохранения результатов

**Шаг 4: Пишем основной скрипт** ```javascript const figmaToken = 'your-token-here'; const fileIds = ['ABC123', 'DEF456']; // Массив ID файлов async function parseColors(node) { const colors = []; if (node.fills) { node.fills.forEach(fill => { if (fill.type === 'SOLID') { const hex = rgbToHex(fill.color.r, fill.color.g, fill.color.b); colors.push(hex); } }); } return colors; } ``` **Шаг 5: Обрабатываем результаты** Парсер сохраняет данные в JSON-файл с такой структурой:

Раздел	Содержимое	Пример
colors.primary	Основные цвета бренда	#FF5733, #33A1FF
colors.secondary	Дополнительные цвета	#F0F0F0, #999999
typography.headings	Шрифты заголовков	Inter Bold 32px
typography.body	Шрифты основного текста	Inter Regular 16px
effects	Тени и эффекты	box-shadow: 0 4px 8px rgba(0,0,0,0.1)

**Шаг 6: Экспорт в нужный формат** Можно сгенерировать CSS-переменные, Sass-миксины или даже готовые компоненты для дизайн-системы.

Какие результаты даёт автоматизация?

Цифры говорят сами за себя. За последние полгода мы запустили парсер на 15 проектах разного масштаба. **Экономия времени:** - Ручной сбор брендбука: 18-25 часов - Автоматический парсинг: 0.5 часа - Экономия: 95% времени дизайнера **Точность результата:** - Ручной поиск находит 60-70% элементов стиля - Парсер находит 98-100% элементов - Снижение ошибок в 15-20 раз Конкретные кейсы из практики:

• Проект банка: 230 экранов, найдено 156 уникальных цветов (дизайнер нашёл бы 45-50)
• E-commerce платформа: 180 макетов, обнаружено 23 разных размера шрифтов
• SaaS-продукт: 95 экранов, выявлено 12 вариантов одной кнопки

Парсер — это как рентген для дизайна. Показывает всё, что скрыто от глаз, включая проблемы консистентности.

**Дополнительные бонусы:**

1. Находит неиспользуемые стили (мёртвый код в дизайне)
2. Выявляет нарушения гайдлайнов
3. Создаёт основу для дизайн-токенов
4. Упрощает передачу проекта новым дизайнерам

Как оптимизировать собранный брендбук?

Парсер собрал всё — и нужное, и лишнее. Теперь нужно навести порядок. Это как разбор гардероба: оставляем то, что действительно нужно. **Очистка цветовой палитры:** Парсер может найти 200+ цветов, но для брендбука нужно 15-20. Алгоритм оптимизации:

• Группируем похожие цвета (разница менее 5% по HSL)
• Выбираем самый частый цвет из группы
• Удаляем цвета, которые использованы менее 3 раз
• Проверяем контрастность для текста

**Упрощение типографики:** Из 30 найденных размеров шрифта оставляем 8-12. Принцип простой — создаём математическую шкалу (например, 1.25x). **Стандартизация отступов:** Парсер находит отступы 14px, 15px, 16px — приводим к единой сетке: 8px, 16px, 24px, 32px. Пример оптимизированного результата: ```json { "colors": { "primary": "#3366FF", "secondary": "#6C757D", "success": "#28A745", "warning": "#FFC107", "error": "#DC3545" }, "typography": { "scale": [12, 14, 16, 20, 24, 32, 40, 48], "families": ["Inter", "Inter Medium", "Inter Bold"] } } ```

Реальные кейсы использования

Расскажу про несколько проектов, где парсер сэкономил кучу времени и нервов. **Кейс 1: Ребрендинг финтех-стартапа** Компания росла 3 года, дизайн делали разные люди. К моменту ребрендинга накопилось 340 экранов в 15 Figma-файлах. Задача — понять текущее состояние и создать новую дизайн-систему. Результаты парсинга: - 287 уникальных цветов (хаос!) - 43 размера шрифтов - 18 разных кнопок для одного действия После оптимизации свели к 12 цветам, 8 размерам шрифта и 4 типам кнопок. Экономия времени дизайнера — 3 недели. **Кейс 2: Аудит дизайна интернет-магазина** Клиент жаловался, что сайт выглядит "как винегрет". Парсер показал: - Основной цвет бренда имеет 23 вариации - На сайте 67 оттенков серого - Используется 12 разных шрифтов Это объяснило, почему пользователи путались в интерфейсе. Привели к единообразию — конверсия выросла на 15%. **Кейс 3: Подготовка к дизайн-системе** Большая IT-компания хотела создать единую дизайн-систему для 8 продуктов. Парсер обработал макеты всех продуктов и нашёл пересечения:

Продукт	Уникальных цветов	Общих элементов	Потенциал унификации
CRM-система	45	12	65%
Мобильное приложение	32	18	80%
Админ-панель	28	15	75%
Лендинги	67	8	45%

На основе этих данных создали roadmap унификации — начали с элементов с высоким потенциалом.

Это часть серии материалов по теме «Скрипты и парсеры». Основная статья серии: Node.js скрипт для ETL: как собрать данные с 25 API за час.

Читайте также

• Node.js скрипт для ETL: как собрать данные с 25 API за час — основная статья кластера
• Безопасность мобильных приложений: 8 уязвимостей iOS и Android
• Как проверить качество кода сайта перед оплатой: чек-лист для непрограммиста в 2026 году
• Как составить техническое задание на разработку сайта в 2026 году: структура, примеры и типичные ошибки

Частые вопросы

В: Можно ли парсить приватные файлы Figma?

О: Да, если у вас есть токен доступа и права на файл. Парсер работает через официальный API Figma.

В: Сколько времени занимает парсинг 100 макетов?

О: Обычно 5-15 минут в зависимости от сложности макетов и скорости интернета. Основное время тратится на HTTP-запросы.

В: Находит ли парсер компоненты и стили Figma?

О: Да, парсер извлекает все опубликованные стили (Color Styles, Text Styles) и компоненты из библиотек.

В: Можно ли настроить парсер под конкретные нужды?

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

В: Что делать, если парсер нашёл слишком много вариантов одного элемента?

О: Используйте алгоритмы кластеризации. Группируйте похожие элементы и выбирайте наиболее частые или округляйте к ближайшим значениям из дизайн-токенов.

В: Работает ли парсер с файлами других дизайн-инструментов?

О: Напрямую — нет. Но можно экспортировать файлы из Sketch или Adobe XD в Figma, а затем запустить парсер.

В: Как часто нужно обновлять данные парсера?

О: Зависит от интенсивности работы над дизайном. Для активных проектов — раз в неделю, для стабильных продуктов — раз в месяц.

Нужна помощь с этим? Обсудить проект с DS495 →