figma/mcp-server-guide
Official
- skills.sh installs
- 48.5K
- skills
- 14
Install
$ npx -y skills add figma/mcp-server-guide --agent claude-codeInstalls into .claude/skills of the current project.
Skills
1
figma-usefigma/mcp-server-guide**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Sk9.8Kskills.sh installs
figma-usefigma/mcp-server-guide**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Sk9.8Kskills.sh installs2figma-generate-designfigma/mcp-server-guideUse this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma',6.4Kskills.sh installs
figma-generate-designfigma/mcp-server-guideUse this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma',6.4Kskills.sh installs3implement-designfigma/mcp-server-guideTranslates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions "implement design", 5.9Kskills.sh installs
implement-designfigma/mcp-server-guideTranslates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions "implement design", 5.9Kskills.sh installs4figma-generate-libraryfigma/mcp-server-guideBuild or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, crea4.7Kskills.sh installs
figma-generate-libraryfigma/mcp-server-guideBuild or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, crea4.7Kskills.sh installs5figma-implement-designfigma/mcp-server-guideTranslates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "im4Kskills.sh installs
figma-implement-designfigma/mcp-server-guideTranslates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "im4Kskills.sh installs6figma-create-new-filefigma/mcp-server-guide**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `create_new_file` tool call. NEVER call `create_new_file` directly without loading this ski3.7Kskills.sh installs
figma-create-new-filefigma/mcp-server-guide**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `create_new_file` tool call. NEVER call `create_new_file` directly without loading this ski3.7Kskills.sh installs7figma-code-connectfigma/mcp-server-guideCreates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component map3.6Kskills.sh installs
figma-code-connectfigma/mcp-server-guideCreates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component map3.6Kskills.sh installs8figma-generate-diagramfigma/mcp-server-guideMANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Tri2.2Kskills.sh installs
figma-generate-diagramfigma/mcp-server-guideMANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Tri2.2Kskills.sh installs9figma-use-figjamfigma/mcp-server-guideThis 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_f2.2Kskills.sh installs
figma-use-figjamfigma/mcp-server-guideThis 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_f2.2Kskills.sh installs10figma-use-slidesfigma/mcp-server-guideThis 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_f1.9Kskills.sh installs
figma-use-slidesfigma/mcp-server-guideThis 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_f1.9Kskills.sh installs11figma-create-design-system-rulesfigma/mcp-server-guideGenerates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design r1.6Kskills.sh installs
figma-create-design-system-rulesfigma/mcp-server-guideGenerates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design r1.6Kskills.sh installs12create-design-system-rulesfigma/mcp-server-guideGenerates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design r1.3Kskills.sh installs
create-design-system-rulesfigma/mcp-server-guideGenerates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design r1.3Kskills.sh installs13code-connect-componentsfigma/mcp-server-guideConnects Figma design components to code components using Code Connect. Use when user says "code connect", "connect this component to code", "connect Figma to c870skills.sh installs
code-connect-componentsfigma/mcp-server-guideConnects Figma design components to code components using Code Connect. Use when user says "code connect", "connect this component to code", "connect Figma to c870skills.sh installs14figma-code-connect-componentsfigma/mcp-server-guideConnects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map 330skills.sh installs
figma-code-connect-componentsfigma/mcp-server-guideConnects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map 330skills.sh installs