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: Группировка и анализ Сортирует найденные элементы по типам, частоте использования, контексту.

// Примерная структура ответа 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: Пишем основной скрипт

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.

Пример оптимизированного результата:

{
  "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 →