Development · 14 skills · 1 tool
figma
by figma official ★ 2k
Figma MCP server and skills for design-to-code: read design context, implement designs, Code Connect, write to the canvas.
Pinned to
figma/mcp-server-guide @ ae7e5e5. Your Mac fetches exactly this commit; you see everything it contains before anything is kept. Skills 14
- figma-code-connect, Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user m…
- figma-create-new-file, **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `create_new_file` tool call. NEVER call `create_ne…
- figma-design-to-code, **MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUS…
- figma-generate-design, Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layou…
- figma-generate-diagram, MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` direc…
- figma-generate-library, Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variable…
- figma-generative-plugins, **MANDATORY prerequisite** — load this skill before calling `create_generative_plugin` or `update_generative_plugin`. U…
- figma-implement-motion, Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion f…
- figma-shaders, **MANDATORY prerequisite** — load this skill before calling `create_shader` or `update_shader`. Use when the user asks…
- figma-swiftui, SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction…
- figma-use, **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` dire…
- 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…
- figma-use-motion, Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles,…
- 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…
Tools
- figmahttp https://mcp.figma.com/mcp
Provided by its author under its own license. Listed because its publisher is an official vendor org; Operator shows every skill, tool and bot before anything is kept, and installs through your paired Mac at the pinned commit.