figma — плагин для Codex: дизайн в код и Code Connect
Связывает Figma с Codex: переносит макеты в код, собирает шаблоны Code Connect и правила дизайн-системы. Пригодится при вёрстке по макетам.
Открыть на GitHubЧто делает 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 в готовый код интерфейса
- собрать шаблоны Code Connect для опубликованных компонентов
- записать правила дизайн-системы под свой проект
- обновить экран или библиотеку прямо в Figma
- завести новый файл Figma или FigJam под задачу
Примеры запросов агенту
- Реализуй экран из этой ссылки на Figma в коде проекта
- Сделай шаблон Code Connect для опубликованного компонента
- Сгенерируй правила дизайн-системы для перевода макетов в код
Вопросы о figma
Как установить figma в Codex?
Плагин лежит в репозитории openai/plugins в каталоге plugins/figma. Подключите его как плагин Codex и убедитесь, что доступна интеграция Figma, на которую ссылается .app.json.
Что делает плагин figma?
Он объединяет семь скиллов для работы с макетами: перевод фреймов и компонентов в код, шаблоны Code Connect, правила дизайн-системы, создание экранов, библиотек и новых файлов Figma или FigJam.
Что нужно, чтобы скиллы заработали?
Подключённая интеграция Figma и доступные инструменты Figma. Ссылки на файлы с node ID передаются вручную, когда скилл их запрашивает.
