figma/mcp-server-guide

2201

figma-use Official **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` di…

figma/mcp-server-guide

6.9K

2430

implement-design Official Translates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma fil…

figma/mcp-server-guide

6K

2859

figma-generate-design Official Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section lay…

figma/mcp-server-guide

4.9K

3354

figma-implement-design Official Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI co…

figma/mcp-server-guide

4.1K

3906

figma-generate-library Official Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variab…

figma/mcp-server-guide

3.4K

4726

figma-code-connect Official Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user…

figma/mcp-server-guide

2.8K

4698

figma-create-new-file Official **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `create_new_file` tool call.

figma/mcp-server-guide

2.8K

7054

figma-create-design-system-rules Official Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "gener…

figma/mcp-server-guide

1.7K

7561

figma-generate-diagram Official MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` dir…

figma/mcp-server-guide

1.5K

7637

figma-use-figjam Official This skill helps agents use Figma's use_figma MCP tool in the FigJam context. Can be used alongside figma-use which h…

figma/mcp-server-guide

1.5K

8096

create-design-system-rules Official Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "gener…

figma/mcp-server-guide

1.4K

8517

figma-use-slides Official This skill helps agents use Figma's use_figma MCP tool in the Slides context. Can be used alongside figma-use which h…

figma/mcp-server-guide

1.3K

8644

figma-design-to-code Official **MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You M…

figma/mcp-server-guide

1.2K

14

code-connect-components Connects Figma design components to code components using Code Connect. Use when user says "code connect", "connect t…

figma/mcp-server-guide

909

15

figma-swiftui Official SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER directio…

figma/mcp-server-guide

813

16

figma-implement-motion Official Translates Figma motion and animations into production-ready application code.

figma/mcp-server-guide

703

17

figma-use-motion Official Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation style…

figma/mcp-server-guide

656

18

figma-code-connect-components Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connec…

figma/mcp-server-guide

349

19

figma-shaders Official **MANDATORY prerequisite** — load this skill before calling `create_shader` or `update_shader`. Use when the user ask…

figma/mcp-server-guide

55

20

figma-generative-plugins Official **MANDATORY prerequisite** — load this skill before calling `create_generative_plugin` or `update_generative_plugin`.…

figma/mcp-server-guide

51

21

generate-project-plan Generate a FigJam project plan board from a PRD plus codebase context. Interactive flow: research → propose sections …

figma/mcp-server-guide

27

22

video-interaction-mapper This skill should be used when the user asks to analyze a UI screen recording and map interaction states into Figma. …

figma/mcp-server-guide

14