figma_architecture_presentation

1.

Автогенерация
React-компонентов из Figma
Архитектура и пайплайн (FCC)

2.

Цель проекта
• Автоматизировать перенос дизайна из Figma в код
• Генерировать компоненты строго на базе FCC (@fcc/ui,
@fcc/icons, @fcc/tokens)
• Сократить время и вариативность ручной верстки

3.

Архитектура (слои)
Интеграция: Figma API + docs-context API
Нормализация: AST + индекс узлов
Компонентизация: граф граничных узлов
Контекст: layout/constraints/тексты/summary
Генерация: LLM + пост-обработка + детерминированные стили

4.

Поток данных
CLI (index.ts)
FigmaClient → normalize → ComponentGraph
ComponentContext → ComponentParser
CodeGenerator (LLM) → dist/*

5.

Ключевые модули
Интеграция и анализ
Генерация
figma-client.ts — Figma + docs-context component-parser.ts — FccComponen
normalize.ts — AST
code-generator.ts — LLM + код
componentizer.ts — граф
style-generator.ts — стили (огр.)
component-context.ts — контекст

6.

Артефакты
• dist/hierarchy/* и FULL_HIERARCHY.txt
• dist/nodes/*.tsx + styledComponents.ts
• Подготовка структуры для CI/автогенерации

7.

Почему работает стабильно
• AST + граф дают детерминированную структуру
• Контекст снижает шум в LLM
• Док-контекст ограничивает набор FCC-компонентов