figma-to-design-md — Андрей Антошкин

Забирает переменные, стили и компоненты из Figma через REST API и собирает markdown-спеки, которые агент может читать напрямую.

Как устроено

Figma file ──▶ figma-to-design-md ──▶ specs/
├── design-system.md
├── foundations/
│ ├── colors.md
│ ├── typography.md
│ ├── spacing.md
│ └── radii.md
├── components/
│ ├── README.md
│ ├── button.md
│ └── ...
└── gaps.md

Установка

# Run directly
npx figma-to-design-md extract --file <key> --token <token>

# Or install globally
npm i -g figma-to-design-md

Настройка

1. Возьми токен Figma

Открой настройки Figma → Personal access tokens → создай токен с правом File content: Read-only.

2. Возьми ключ файла

Из любого URL Figma:

https://www.figma.com/design/ABC123xyz/My-Design-System
                              ^^^^^^^^^^^
                              this is the file key

3. Run

figma-to-design-md extract \
  --file ABC123xyz \
  --token figd_xxx

Параметры

Флаг	По умолчанию	Описание
--file <key>	—	Ключ файла Figma (обязательно)
--token <token>	$FIGMA_TOKEN	Персональный токен Figma
--out <dir>	./specs	Папка для результата
--mode <mode>	full	full \| foundations \| components
--node <id>	—	Ограничить страницей или фреймом
--version		Показать версию
--help		Показать справку

Структура файлов

design-system.md

Верхний обзор: счётчики и ссылки на подробные файлы.

foundations/*.md

Файл	Содержимое
colors.md	Все переменные COLOR и стили FILL в markdown-таблицах
typography.md	Переменные шрифта и стили TEXT
spacing.md	Переменные с space, gap, padding, margin
radii.md	Переменные с radius, round, corner

У переменных с несколькими режимами (например, Light / Dark) выводятся все значения.

Пример основ

Как выглядит сгенерированный colors.md:

# Colors

## Variables (12 tokens)

| Name | Collection | Light | Dark |
|-------------------|------------|-----------|-----------|
| color/primary | Theme | #3b82f6 | #60a5fa |
| color/secondary | Theme | #6366f1 | #818cf8 |
| color/bg | Theme | #fafafa | #0a0a0a |
| color/text | Theme | #0a0a0a | #f5f5f5 |
| color/muted | Theme | #737373 | #a3a3a3 |

## Styles (3 styles)

| Name | Type |
|-----------------|-------|
| Primary Fill | FILL |
| Background | FILL |
| Text Default | FILL |

Пример компонента

Как выглядит файл компонента:

# Button

> Primary action element with label and optional icon.

- **Figma node:** 123:456
- **Type:** COMPONENT_SET

## Variants

| Property | Values |
|----------|-------------------|
| Size | sm, md, lg |
| Style | primary, outline |
| State | default, hover |

## Usage

_Add usage guidelines here._

Пробелы

Инструмент сам замечает возможные проблемы и пишет их в gaps.md:

Нет описанийУ компонентов нет описания в Figma — агент не понимает замысел
Нет токеновВ файле нет локальных переменных — спека будет неполной
Компоненты без документацииКомпоненты есть, но описания, которое сможет прочитать агент, нет

Цепочка

Markdown из Figma — это вход, который ds-context упаковывает для модели:

figma-to-design-md extracts the spec ← you are here
ds-context packs it for the model
ui-repair patches violations
ds-eval scores the result

Код