Guide Builder for Figma

Я сделал этот плагин как рабочий инструмент для сборки структурированных гайдов в Figma из markdown-исходника. Вместо ручной раскладки десятков блоков по фреймам плагин берёт документ, индексирует компоненты текущего файла, сопоставляет секции с доступными шаблонами и собирает готовый auto-layout guide прямо на холсте.

Это не генератор "красивых картинок", а инженерный production tool для тех случаев, когда в Figma нужно быстро собирать повторяемую документацию, onboarding-материалы, how-to guides и demo-блоки на базе уже существующей дизайн-системы.

Что умеет плагин

• принимает markdown как исходный формат гайда;
• парсит структуру документа и превращает её в редактируемое дерево;
• индексирует INSTANCE и COMPONENT узлы текущей страницы;
• подбирает подходящие компоненты для guide-блоков и demo-секций;
• собирает итоговый guide во фреймы с auto-layout;
• хранит рабочее состояние и source links между сессиями.

Как устроен

Плагин разделён на два рантайма:

• src/main.ts работает с Figma Plugin API, индексацией, storage и сборкой;
• src/ui.ts и src/ui-app.tsx отвечают за React-интерфейс, ввод markdown, структуру и диагностику.

Ключевые модули:

• src/core/markdown-parser.ts - разбор markdown и outline;
• src/core/component-indexer.ts - индексация компонентов и инстансов;
• src/core/resolver.ts - сопоставление контента и источников;
• src/core/layout-engine.ts - сборка фреймов гайда;
• src/core/guide-structure.ts - редактируемая структура документа.

Технологии

• Figma Plugin API
• TypeScript
• React
• @create-figma-plugin
• Tailwind CSS
• Vitest

Локальная разработка

npm install
npm run watch

Для production-сборки:

npm run build

Проверка

npm run lint
npm run typecheck
npm test

Что посмотреть в репозитории

• src/ - код плагина;
• manifest.json - манифест Figma-плагина;
• docs/features/guide-rendering.md - как устроен рендер гайда;
• docs/features/markdown-ingestion.md - ingest markdown;
• docs/features/component-indexing.md - логика индексации компонентов;
• tests/ - тесты на ключевые модули.

Статус

Репозиторий показывает не учебный пример, а реальный Figma toolchain под задачу сборки документации из markdown с опорой на компоненты текущего файла.