figma/mcp-server-guide

2514

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

8.5K

3291

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

3391

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

5.6K

4423

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

4.1K

4560

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

5435

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

figma/mcp-server-guide

3.3K

5503

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

3.2K

7560

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

2.1K

8268

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.9K

8389

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.8K

9167

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

9379

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.5K

13

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

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

figma-code-workflows Official Import or upload local HTML or project files into Figma, choose editable Design frames, runnable Code Layers or stand…

figma/mcp-server-guide

14

23

figma-spec Official This skill is required to create, read, edit, review, or comment on Figma specs. You must read it when working on a P…

figma/mcp-server-guide

14

24

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