figma-generative-plugins
MANDATORY prerequisite — load this skill before calling creategenerativeplugin or updategenerativeplugin. Use when the user asks to create, author, change, fix, or extend a reusable generative Figma plugin.
- Installs
- 509
- Last 24h
- +11
- Trending rank
- #8233
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/figma/mcp-server-guide --skill figma-generative-plugins- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads figma-generative-plugins automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Create and update generative Figma plugins
Load this skill before every create_generative_plugin or update_generative_plugin call. In user-facing language, call the result a “plugin.” The “generative” qualifier only distinguishes this account-library tool from other plugin systems.
Preflight
Before authoring, confirm the request fits this surface:
- Plugins run in the Figma Design editor.
- Every plugin must provide functional UI for its core workflow. A plugin with no configurable inputs still needs a clear primary action and useful status or validation feedback.
- Never embed API keys, OAuth tokens, signed URLs, or other secrets. Plugin source is readable by people who can access it. For authenticated integrations, stop and offer a static dataset, a public no-auth endpoint, or a different architecture.
Create workflow
- Resolve the requested workflow and its useful controls. Ask a concise question only if required inputs or behavior are genuinely ambiguous.
- Resolve
planKey. Reuse one supplied by the user; otherwise callwhoami. Use the sole eligible plan automatically, or ask the user to choose when several materially different plans are available. - Call
create_generative_pluginonce with a concise name, description, andplanKey. This creates a runnable square-drawing scaffold, not the requested final plugin. - Call
get_generative_pluginwith the returnedid, then read every source URI. This establishes the scaffold's manifest, UI message contract, and current TypeScript entrypoint. - Replace the scaffold with complete authored files for the requested behavior and UI.
- Call
update_generative_pluginwith the returnedid, afilesarray containing complete replacements forcode.tsand, when the UI changes,ui.html, plus a specificcommitMessage. Usemetadatawhen changing the name or description.
Never stop after create_generative_plugin: the starter must be replaced with the requested experience.
Update workflow
- Identify the plugin. If needed, call
list_generative_plugins, thenget_generative_plugin. - Read every source URI returned by the get tool before editing. Treat those files as the current source of truth.
- Preserve existing UI, controls, relaunch behavior, validation, and user-visible affordances unless the user asks to change them.
- Call
update_generative_pluginwith complete replacement content for every changed existing file. Use{ path: "code.ts", content: "..." }for the entrypoint and{ path: "ui.html", content: "..." }for the UI. Unspecified files are preserved.
Authoring rules
- Before writing replacement files, read Plugin source authoring. It covers the file replacement contract, UI/message lifecycle, PropsKit controls, dynamic-page compatibility, fonts, relaunch behavior, bounded work, geometry, and Plugin API gotchas.
- Keep the plugin’s primary action obvious and make invalid selection or input states understandable.
update_generative_plugincan replace existingcode.tsandui.htmlfiles, but cannot replacemanifest.jsonor create new files. Keepfigma.showUI(__html__, ...)incode.tsand replaceui.htmlwhen the requested workflow needs different controls.- Avoid destructive canvas changes unless they are the explicit purpose of the plugin and the UI makes that clear.
- Do not close before asynchronous work and UI messages have completed.
- Treat a non-error
update_generative_pluginresult as success. Record the returned version when present; a successful response may omit it. - On a build error, use the returned compiler output to make the smallest source correction and retry once. If it still fails, surface the error instead of repeatedly rewriting the plugin.
Completion
Report the plugin name and id, plus the returned version when present and a short description of its UI and primary action. Construct and include a clickable URL that opens a new Design file with the unpublished plugin ready to try, using the exact plugin id as try-tool-resource-content-id:
https://www.figma.com/file/new?try-tool-resource-content-id=<id>&try-tool-resource-type=gen_tool&type=design&mode=design
After presenting the new-file link, ask whether the user wants to open the plugin in an existing Figma Design file instead. If yes, reuse a file URL already provided or ask for one, then add the same try-tool-resource-content-id and try-tool-resource-type query parameters to that URL. Never guess the file URL.
FAQ
What does the figma-generative-plugins skill do?
MANDATORY prerequisite — load this skill before calling creategenerativeplugin or updategenerativeplugin. Use when the user asks to create, author, change, fix, or extend a reusable generative Figma plugin.
How do I install figma-generative-plugins?
Run npx skills add https://github.com/figma/mcp-server-guide --skill figma-generative-plugins in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/figma-generative-plugins/ (personal) or .claude/skills/figma-generative-plugins/ (project).
Which AI agents can use figma-generative-plugins?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is figma-generative-plugins safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains figma-generative-plugins?
It is published by figma in figma/mcp-server-guide. It has 509 recorded installs.
More from figma/mcp-server-guide
figma-use
figma/mcp-server-guide
MANDATORY prerequisite — you MUST invoke this skill BEFORE every usefigma tool call. NEVER call usefigma directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.
figma-generate-design
figma/mcp-server-guide
Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code', 'convert this modal/dialog/drawer/panel to Figma'. This is the preferred workflow skill whenever the user wants to build or update a full page, modal, dialog, drawer, sidebar, panel, form, dashboard, list, table, card, header, message preview, or other composed product UI in Figma from code or a description—even when the user calls that composed UI a component. Discovers design system components, variables, and styles from Code Connect files, existing screens, and library search, then imports them and assembles views incrementally section-by-section using design system tokens instead of hardcoded values.
implement-design
figma/mcp-server-guide
Translates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions "implement design", "generate code", "implement component", "build Figma design", provides Figma URLs, or asks to build components matching Figma specs. Requires Figma MCP server connection.
figma-generate-library
figma/mcp-server-guide
Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, create individual components with proper variant sets and variable bindings, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. Also use when the user asks to create or generate any component in Figma — even a single one — since components require proper variable foundations, variant states, and design token bindings to be production-quality. This skill teaches WHAT to build and in WHAT ORDER — it complements the figma-use skill which teaches HOW to call the Plugin API. Both skills should be loaded together.
figma-implement-design
figma/mcp-server-guide
Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via usefigma, use figma-use.
figma-create-new-file
figma/mcp-server-guide
Always use this skill when the user wants to create a new Figma Design, FigJam, or Slides file. You MUST invoke this skill BEFORE every createnewfile tool call.
Popular media & creative skills
hyperframes
heygen-com/hyperframes
Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.
media-use
heygen-com/hyperframes
Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.
hyperframes-registry
heygen-com/hyperframes
About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.
hyperframes-creative
heygen-com/hyperframes
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.
ai-video-generation
101-skills/superpowers
Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse
ai-image-generation
101-skills/superpowers
Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image