Как собрать дизайн-систему в NeuroGate: из Figma через Builder.io
Пошаговый гайд: экспорт макета из Figma плагином Builder.io Figma, импорт JSON в NeuroGate и сборка design system — tokens.css, DESIGN.md и компоненты для лендингов, писем и презентаций.
Дизайн-система — это не «PDF с цветами в Notion». Это единый набор правил бренда, который потом автоматически подставляется в лендинги, email-рассылки и презентации. В NeuroGate Design вы собираете её один раз — и дальше каждый артефакт выглядит как ваш продукт, а не как случайный шаблон.
Важно: NeuroGate не подключается к Figma напрямую. Если макет живёт в Figma, мы рекомендуем передать его через Builder.io Figma plugin — и уже этот экспорт обрабатываем внутри пайплайна.
Коротко: что получится на выходе
После извлечения в кабинете появляется пакет дизайн-системы:
- DESIGN.md — палитра, типографика, тон, do/don't
- tokens.css — CSS-переменные (
--accent,--font-display, отступы) - components.html — эталонные UI-блоки (кнопки, карточки, формы)
- preview/ — HTML-страницы для проверки
- source/ — evidence, manifest, снимки фреймов из Builder.io
Пакет выбираете при создании проекта — AI генерирует лендинги, письма и deck в вашем стиле.
Зачем нужна design system до генерации
| Без design system | С design system |
|---|---|
| «Нейросетевый» generic-вид | Цвета, шрифты и компоненты бренда |
| Каждый раз объяснять стиль в промпте | Стиль зашит в `tokens.css` |
| Email и deck расходятся с лендингом | Один бренд на все форматы |
Для email и брендированных презентаций design system практически обязательна.
Маршрут: Figma → Builder.io → NeuroGate
Схема пайплайна:
- Figma (макет) → плагин Builder.io Figma → JSON с HTML-снимками фреймов (absoluteHtml)
- JSON вставляется в промпт NeuroGate → этап builder_vcp: зеркалирование ассетов, tokens-draft, evidence
- AI extract → DESIGN.md + tokens.css + components.html + preview
NeuroGate не читает .fig файлы и не тянет Figma API. Мы работаем с HTML-снимками, которые Builder.io отдаёт как JSON.
Часть 1. Экспорт из Figma через Builder.io Figma plugin
Шаг 1. Установите плагин
- Откройте макет в Figma
- Plugins → Manage plugins → вкладка Plugins & widgets
- Найдите Builder.io, нажмите Save и запустите плагин
Официальная документация: Builder Figma Plugin
Шаг 2. Выберите фреймы
Выделите 1–8 ключевых фреймов — достаточно для design system:
- UI Kit / компоненты (кнопки, инпуты, карточки)
- Типографика (заголовки H1–H3, body)
- Цветовая палитра / swatches
- Hero или главный экран продукта
Не экспортируйте весь файл целиком — лучше репрезентативные фреймы.
Шаг 3. Smart Export и копирование
В плагине Builder.io:
- Перейдите на вкладку Export
- Нажмите Smart Export
- Когда экспорт завершится — Click to Copy (скопировать в буфер)
- В буфере должен появиться JSON вида:
{
"absoluteHtml": [{
"url": "https://api.builder.io/api/v1/file/assets/TEMP/…",
"fileName": ".figma-design-UI-Kit.figma.html",
"frameId": "67:10437",
"frameName": "UI Kit",
"width": 960,
"height": 1200
}],
"vcpImportId": "vcp-…"
}
Поле absoluteHtml — массив HTML-снимков фреймов. Каждый url — временный адрес на Builder.io.
Срок годности ссылок TEMP: URL на api.builder.io/.../TEMP/... истекают. После экспорта сразу запускайте извлечение в NeuroGate — мы зеркалируем HTML и картинки на свой S3.Шаг 4. Сохраните JSON
- Скопируйте весь JSON в буфер, или
- Сохраните как
.json/.txtи приложите файлом
Часть 2. Запуск извлечения в NeuroGate
Шаг 1. Design → Design systems → Создать
- ng-ai.ru → Дизайн
- Дизайн системы → Создать
Шаг 2. Заполните форму
| Поле | Что указать |
|---|---|
| **Название** | Имя бренда, напр. «Acme Product UI» |
| **Brand brief** | Кто вы, аудитория, 3–5 прилагательных бренда, запреты. Сюда добавьте JSON из Figma, если использовали плагин |
| **Reference URLs** | Живой сайт, Dribbble и так далее |
| **Notes** | «Только light theme», «accent #2563EB» |
| **Attachments** | PDF brandbook, скриншоты (до 20 файлов) |
JSON можно вставить в поле brief — система найдёт блок {"absoluteHtml": [...]} автоматически.
Пример брифа:
B2B SaaS, аудитория — маркетологи SMB.
Тон: уверенный, дружелюбный.
Ниже JSON экспорт Builder.io Figma plugin из Figma UI Kit.
{"absoluteHtml":[...],"vcpImportId":"vcp-..."}
Нажмите «Извлечь дизайн-систему».
Шаг 3. Следите за пайплайном
В прогрессе слева отображаются этапы: reference_evidence (референсы, вложения, manifest), builder_vcp (импорт Builder.io, если найден JSON), extract stages (tokens → DESIGN.md → components → preview), checklist review (самопроверка качества), package ready (статус published или draft).
Альтернативы без Figma
Builder.io не единственный вход:
| Источник | Как передать |
|---|---|
| **Живой сайт** | URL в Reference URLs |
| **Brandbook PDF** | Attachment |
| **Скриншоты / HTML** | Прикрепленные файлы |
| **Каталог дизайн-систем** | Дизайн → Дизайн-системы → Использовать в проекте |
Для production-бренда с Figma-макетом путь Figma → Builder.io → NeuroGate даёт самую точную передачу визуала.
Доработка (Refine)
После первого прогона:
- Откройте design system → чат
- «Сделай accent #2563EB», «добавь pricing card», «усиль контраст body-текста»
- Можно приложить новый JSON из Builder.io после правок в Figma
- Запустится refine без discovery-вопросов
Использование в проектах
- Design → Projects → лендинг, письмо или презентация
- Design system picker → ваша система
- AI подставляет tokens и DESIGN.md
Дальше по форматам:
Частые ошибки
- JSON лежит неделю — TEMP-URL Builder.io протухли; экспортируйте заново и сразу запускайте extract
- Нет absoluteHtml в JSON — проверьте, что копируете полный экспорт через Smart Export → Click to Copy, а не фрагмент кода React
- Только Figma-ссылка без Builder.io — NeuroGate не откроет файл Figma напрямую; нужен экспорт через плагин
- Пустой brief — даже с JSON добавьте 3–5 предложений о бренде и аудитории
