figma/mcp-server-guide: 18 Agent Skills
A guide on how to use the Figma MCP server
| Repository | figma/mcp-server-guide · website |
|---|---|
| GitHub stars | 2,103 |
| Skills | 18 · 3 with scripts |
| Category | Design and frontend |
| Last updated | Oct 20, 2026 |
| Install counts | figma/mcp-server-guide on skills.sh, Vercel's skills directory, which shows installs and security audits per skill |
Install figma/mcp-server-guide
| All skills, any agent | npx skills add figma/mcp-server-guide |
|---|---|
| One skill | npx skills add figma/mcp-server-guide --skill figma-code-connect |
| Only for Claude Code | npx skills add figma/mcp-server-guide -a claude-code, or copy a skill folder to ~/.claude/skills/ (all projects) or .claude/skills/ (one project) |
npx skills is the open-source skills CLI; it asks which agents to install for. Skills can include scripts that your agent will run: read a skill before installing it, as you would any code.
Skills in figma/mcp-server-guide
| Skill | What it does |
|---|---|
| figma-code-connect | Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files.npx skills add figma/mcp-server-guide --skill figma-code-connect |
| figma-create-new-file | 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 `create_new_file` tool call.npx skills add figma/mcp-server-guide --skill figma-create-new-file |
| figma-design-to-code | **MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this Figma design',…npx skills add figma/mcp-server-guide --skill figma-design-to-code |
| figma-generate-design | 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…npx skills add figma/mcp-server-guide --skill figma-generate-design |
| figma-generate-diagram | MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram — flowchart, architecture diagram, sequence…npx skills add figma/mcp-server-guide --skill figma-generate-diagram |
| figma-generate-library | 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… has scriptsnpx skills add figma/mcp-server-guide --skill figma-generate-library |
| figma-generative-plugins | **MANDATORY prerequisite** — load this skill before calling `create_generative_plugin` or `update_generative_plugin`. Use when the user asks to create, author, change, fix, or extend a reusable generative Figma plugin.npx skills add figma/mcp-server-guide --skill figma-generative-plugins |
| figma-implement-motion | Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions "implement this motion", "add animation from Figma", "animate this component", provides a Figma URL whose node is animated, or when…npx skills add figma/mcp-server-guide --skill figma-implement-motion |
| figma-shaders | **MANDATORY prerequisite** — load this skill before calling `create_shader` or `update_shader`. Use when the user asks to create, author, change, fix, or iterate on a shader effect, shader fill, custom effect, custom fill, or procedural shader in Figma.npx skills add figma/mcp-server-guide --skill figma-shaders |
| figma-swiftui | SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into SwiftUI (design → code), or pushing SwiftUI views / screens / tokens back into a Figma file (code → design). Triggers on phrases like 'implement…npx skills add figma/mcp-server-guide --skill figma-swiftui |
| figma-use-figjam | This skill helps agents use Figma's use_figma MCP tool in the FigJam context. Can be used alongside figma-use which has foundational context for using the use_figma tool.npx skills add figma/mcp-server-guide --skill figma-use-figjam |
| figma-use-motion | Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load alongside figma-use whenever a task involves adding, editing, or inspecting animation on a node.npx skills add figma/mcp-server-guide --skill figma-use-motion |
| figma-use-slides | This skill helps agents use Figma's use_figma MCP tool in the Slides context. Can be used alongside figma-use which has foundational context for using the use_figma tool.npx skills add figma/mcp-server-guide --skill figma-use-slides |
| figma-use | **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` 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… has scriptsnpx skills add figma/mcp-server-guide --skill figma-use |
| figma-code-workflows | Import or upload local HTML or project files into Figma, choose editable Design frames, runnable Code Layers or standalone Code (also known as Make), and repair imported previews. Use only when the user explicitly names editable Design layers, a runnable Code Layer, or a standalone Code/Make file,…npx skills add figma/mcp-server-guide --skill figma-code-workflows |
| figma-spec | This skill is required to create, read, edit, review, or comment on Figma specs. You must read it when working on a PRD, brief, RFC or any kind of document in either a standalone Figma spec or a Figma spec embedded in a Figma Design or Figjam file.npx skills add figma/mcp-server-guide --skill figma-spec |
| generate-project-plan | Generate a FigJam project plan board from a PRD plus codebase context. Interactive flow: research → propose sections → per-section deep research → per-section content + block-shape proposal → create FigJam → skeleton → fill → diagrams → wrap. Each content block (section, nested section, intro…npx skills add figma/mcp-server-guide --skill generate-project-plan |
| video-interaction-mapper | This skill should be used when the user asks to analyze a UI screen recording and map interaction states into Figma. Trigger for requests such as "put video frames in Figma", "extract states from my recording", "map interactions from video to Figma", "analyze this screen recording", "create a… has scriptsnpx skills add figma/mcp-server-guide --skill video-interaction-mapper |
Names and descriptions come from each skill's SKILL.md and are written by the pack's authors.
More design and frontend skill packs
| # | Skill pack | Skills | GitHub stars | Updated |
|---|---|---|---|---|
| 1 |
nextlevelbuilder/ui-ux-pro-max-skill An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
|
7 | 139K | 2026-10-23 |
| 2 |
Leonxlnx/taste-skill Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages
|
1 | 101K | 2026-10-20 |
| 3 |
tt-a1i/archify Turn any idea, plan, or codebase into a beautiful interactive diagram. An agent skill for Claude Code, Codex, and more.
|
5 | 88K | 2026-10-23 |
| 4 |
pbakaus/impeccable The design language that makes your AI harness better at design.
|
2 | 85.2K | 2026-10-23 |
| 5 |
cathrynlavery/diagram-design Editorial diagram design for Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, Qoder, and Pi. 45 diagram types. Self-con…
|
1 | 60.2K | 2026-10-21 |
| 6 |
openai/skills Skills Catalog for Codex
|
43 | 28.3K | 2026-09-08 |