figma

How to start

1. Paste the command into Claude Code and press Enter.
2. Restart Claude Code so the plugin loads.
3. Just ask Claude. Its skills step in when your request fits.

What it adds

16 skills · 1 MCP server

Skills Claude loads these when the task fits

• figma-code-connectCreates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component ma…
• figma-code-workflowsImport or upload local HTML or project files into Figma, choose editable Design frames, runnable Code Layers or standalone Code (also known as Make), and repai…
• figma-create-new-fileAlways 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…
• 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 w…
• figma-generate-designUse this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma'…
• figma-generate-diagramMANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Tr…
• figma-generate-libraryBuild or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, cre…
• 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,…
• figma-implement-motionTranslates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions "impl…
• 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 itera…
• figma-specThis 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…
• figma-swiftuiSwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into SwiftU…
• …and 4 more in the source.

MCP servers Connections it sets up for you

• figmaRemote server at mcp.figma.com

Read from the plugin's own files in figma/mcp-server-guide, 26 Oct 2026.

What it needs

No keys or settings: its files ask for none. A remote server may still ask you to sign in the first time.