figma-ai-plugin/IDEA.md

IDEA — Figma AI Plugin (MVP)

Проект: автономный Figma-плагин с AI-ассистентом. Локальная копия: /root/.hermes/projects/figma plugins/figma-ai-plugin/ Копия на Matebook: D:\Figma Plugins\figma-ai-plugin\ Gitea: http://x1qnvk08zec2u5cx6yh5iexh.155.212.186.39.sslip.io/admin/figma-ai-plugin

Ресурсы

UI-фреймворк (@create-figma-plugin/ui)

• Storybook компонентов (живые примеры, темы Light/Dark/FigJam): https://yuanqing.github.io/create-figma-plugin/ui/
• Репозиторий фреймворка: https://github.com/yuanqing/create-figma-plugin
• Cheat-sheet компонентов (InvStd): https://github.com/invstd/Figma-Plugin-Quickstart/blob/main/FIGMA-PLUGIN-UI-COMPONENTS-REFERENCE.md

Официальная документация по созданию плагинов Figma

• Plugin API (официальная): https://www.figma.com/plugin-docs/
• Quick start (plugin setup): https://www.figma.com/plugin-docs/plugin-quickstart/
• Руководство по UI (design/iframe): https://www.figma.com/plugin-docs/how-plugins-work/#the-iframe
• Типы плагина (plugin-typings): npm @figma/plugin-typings

Примеры плагинов (уже есть / опорные)

• Исходный плагин «AI assistant» (Николай, Matebook): D:\YandexDisk\Figma Plugins DEVs\AI assistant — рабочий движок (eval + RPC, CodeMirror), оттуда переиспользуем main.ts/ui.tsx.
• create-figma-plugin templates: https://github.com/yuanqing/create-figma-plugin/tree/main/templates
• Figma Plugin Quickstart (InvStd): https://github.com/invstd/Figma-Plugin-Quickstart
• create-figma-plugin-native (кастомные компоненты Tabs/Modal/Checkbox): https://www.npmjs.com/package/@inversestudio/create-figma-plugin-native

Стек

• TypeScript (зафиксирован ~5.6.3 — TS 7 ломает @create-figma-plugin/build)
• @create-figma-plugin/ui + @create-figma-plugin/utilities (Preact)
• Сборка: build-figma-plugin (npm run build / npm run watch)
• Важно: tsconfig наследует @create-figma-plugin/tsconfig (jsx: react + jsxFactory: h). Не оверрайдить jsx на react-jsx.

Рабочий флоу (Hello World проверен)

1. Пишешь код на VPS в /root/.hermes/projects/figma plugins/figma-ai-plugin/
2. npm install + npm run build (проверка сборки)
3. git push → Gitea (admin/figma-ai-plugin)
4. Копия на Matebook: D:\Figma Plugins\figma-ai-plugin\ (через tar-архив по SSH, без node_modules/build)
5. В Figma: Plugins → Development → Import plugin from manifest → выбрать manifest.json из папки Matebook
6. Запуск плагина для теста