# figma

Связывает Figma с Codex: переносит макеты в код, собирает шаблоны Code Connect и правила дизайн-системы. Пригодится при вёрстке по макетам.

- плагин · `type=plugin` · Codex, ChatGPT · ★ 7596
- Автор: Figma · официальный репозиторий OpenAI
- Лицензия: LicenseRef-Figma-Developer-Terms · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/openai/plugins/tree/HEAD/plugins/figma
- Обновлён: 2026-10-08
- HTML: https://affpapa.org/nevibecode/plugins/figma-figma

## Что делает

Плагин живёт в `plugins/figma` и работает через подключённую интеграцию Figma. Внутри семь скиллов: `figma-implement-design`, `figma-code-connect`, `figma-create-design-system-rules`, `figma-create-new-file`, `figma-generate-design`, `figma-generate-library` и `figma-use`. Каждый скилл устроен обычно: `SKILL.md` плюс папки `agents/`, `references/`, `assets/`, `scripts/` по необходимости.

Что это даёт на практике. Скиллы переводят фреймы и компоненты Figma в код интерфейса, разбирают контекст макета и скриншоты через инструменты Figma, собирают шаблоны Code Connect без парсера для опубликованных компонентов. Отдельно генерируются правила дизайн-системы под конкретный проект, чтобы следующие задачи «из Figma в код» шли по одному шаблону. Ещё можно создавать и обновлять целые экраны и библиотеки дизайн-системы прямо в Figma, а также заводить новые файлы Figma или FigJam.

Подключение описано в `.app.json`: плагин опирается на интеграцию Figma, поэтому инструменты Figma должны быть доступны, а ссылки на файлы с node ID понадобится передавать вручную. Метаданные и содержимое связывает `.codex-plugin/plugin.json`, иконки лежат в `assets/`, рядом оставлены каталоги `commands/`, `hooks.json`, `scripts/` и `ui/` как примеры соглашений. Использование скиллов регулируют Figma Developer Terms — условия в `LICENSE.txt` и файлах лицензий отдельных скиллов.

## Требования
- Работает с: Figma

## Когда брать
- перенести фрейм из Figma в готовый код интерфейса
- собрать шаблоны Code Connect для опубликованных компонентов
- записать правила дизайн-системы под свой проект
- обновить экран или библиотеку прямо в Figma
- завести новый файл Figma или FigJam под задачу

## Примеры запросов агенту
- Реализуй экран из этой ссылки на Figma в коде проекта
- Сделай шаблон Code Connect для опубликованного компонента
- Сгенерируй правила дизайн-системы для перевода макетов в код

## Похожие
- [example-skills](https://affpapa.org/nevibecode/plugins/example-skills.md) — плагин · ★ 183839
- [impeccable](https://affpapa.org/nevibecode/plugins/impeccable.md) — плагин · ★ 88212
- [hyperframes](https://affpapa.org/nevibecode/plugins/hyperframes.md) — плагин · ★ 72481
- [playground](https://affpapa.org/nevibecode/plugins/playground.md) — плагин · ★ 44635
- [frontend-design](https://affpapa.org/nevibecode/plugins/frontend-design.md) — плагин · ★ 44635
- [visual-explainer](https://affpapa.org/nevibecode/plugins/visual-explainer.md) — плагин · ★ 10630

Из того же набора: [openai/plugins](https://affpapa.org/nevibecode/by/openai/plugins.md) — 304 карточки

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md