figma-generative-plugins — Claude Code skill: setup and workflow
Guides AI agents through authoring and updating generative Figma Design plugins. It enforces safe workflows for code generation, UI layout, and testing links.
npx skills add figma/mcp-server-guide --skill figma-generative-plugins -a claude-codeWhat figma-generative-plugins does
This skill establishes strict instructions before invoking create_generative_plugin or update_generative_plugin. It requires the assistant to determine the user workflow and identify the target planKey through whoami. Once the initial scaffold is ready, the agent pulls source URIs with get_generative_plugin and replaces boilerplate files with custom TypeScript logic and HTML views.
File manipulation is strictly limited. The update step replaces code.ts and ui.html, but it cannot touch manifest.json or create additional source paths. Keeping secrets out of the codebase is essential because anyone with plugin access can inspect the raw text. If an external service requires authentication, use public endpoints or offline fixtures instead.
After saving the code, the agent outputs a direct URL for launching the plugin inside a fresh or existing canvas. Build failures trigger a single focused patch against compiler diagnostics instead of an endless rewrite loop.
What it helps with
- build interactive Figma Design extensions from prompt descriptions
- update existing plugin TypeScript logic and HTML interface files
- avoid embedding sensitive credentials in visible plugin source code
- generate launch links to test unreleased plugins in Figma files
Example prompts for the agent
- Create a Figma plugin that generates consistent color palettes across artboards
- Update the plugin UI to include padding and margin controls
- Fix the TypeScript compilation error returned by update_generative_plugin
How to install figma-generative-plugins
1Skills CLI (Vercel)
npx skills add figma/mcp-server-guide --skill figma-generative-plugins -a claude-code2Manually: put the files in place
~/.claude/skills/figma-generative-plugins/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/figma-generative-plugins/
1Skills CLI (Vercel)
npx skills add figma/mcp-server-guide --skill figma-generative-plugins -a codex2Manually: put the files in place
.agents/skills/figma-generative-plugins/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add figma/mcp-server-guide --skill figma-generative-plugins -a cursor2Manually: put the files in place
.cursor/skills/figma-generative-plugins/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install figma/mcp-server-guide figma-generative-plugins2Manually: put the files in place
.github/skills/figma-generative-plugins/SKILL.md1Skills CLI (Vercel)
npx skills add figma/mcp-server-guide --skill figma-generative-plugins -a gemini-cli2Platform CLI
gemini skills install https://github.com/figma/mcp-server-guide --path skills-figquery/figma-generative-pluginsManually: put the files in place
.devin/skills/figma-generative-plugins/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add figma/mcp-server-guide --skill figma-generative-plugins -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about figma-generative-plugins
How do I install figma-generative-plugins in Claude Code?
Run the following command: npx skills add figma/mcp-server-guide --skill figma-generative-plugins -a claude-code.
What is the role of figma-generative-plugins?
It provides operational guardrails for generating and editing Figma Design plugins. The skill guides the model to handle scaffolding, file replacement for code.ts and ui.html, and build error recovery.
Can a generative plugin create extra source files?
No, the tooling only permits replacing existing code.ts and ui.html files. It cannot generate new files or modify manifest.json.
