# figma-generative-plugins

Guides AI agents through authoring and updating generative Figma Design plugins. It enforces safe workflows for code generation, UI layout, and testing links.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 498 installs · ★ 2113
- Author: figma
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/figma/mcp-server-guide/tree/HEAD/skills-figquery/figma-generative-plugins/SKILL.md
- Updated: 2026-10-20
- HTML: https://affpapa.org/en/nevibecode/skills/figma-generative-plugins

## What it 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.

## Requirements
- Works with: Figma

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add figma/mcp-server-guide --skill figma-generative-plugins -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/figma-generative-plugins/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/figma-generative-plugins/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add figma/mcp-server-guide --skill figma-generative-plugins -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/figma-generative-plugins/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add figma/mcp-server-guide --skill figma-generative-plugins -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/figma-generative-plugins/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install figma/mcp-server-guide figma-generative-plugins
```

2. **Manually: put the files in place**
- File: `.github/skills/figma-generative-plugins/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add figma/mcp-server-guide --skill figma-generative-plugins -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/figma/mcp-server-guide --path skills-figquery/figma-generative-plugins
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/figma-generative-plugins/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add figma/mcp-server-guide --skill figma-generative-plugins -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/figma/mcp-server-guide/tree/HEAD/skills-figquery/figma-generative-plugins/SKILL.md

## When to use it
- 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
- 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

## Similar
- [figma-generate-design](https://affpapa.org/en/nevibecode/skills/openai-figma-generate-design.md) — skill · 2900 installs
- [figma-create-design-system-rules](https://affpapa.org/en/nevibecode/skills/figma-create-design-system-rules.md) — skill · 2900 installs
- [figma-code-connect-components](https://affpapa.org/en/nevibecode/skills/figma-code-connect-components.md) — skill · 2700 installs
- [figma-use](https://affpapa.org/en/nevibecode/skills/nexu-io-figma-use.md) — skill · 2700 installs
- [figma-build](https://affpapa.org/en/nevibecode/skills/figma-build.md) — skill · 1300 installs
- [figma](https://affpapa.org/en/nevibecode/skills/figma.md) — skill · 858 installs

From the same set: [figma/mcp-server-guide](https://affpapa.org/en/nevibecode/by/figma/mcp-server-guide.md) — 3 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md