figma/mcp-server-guide
14 skills · 21,436 total installs
$npx skills add figma/mcp-server-guideSkillInstalls
figma-use**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first.figma-generate-designUse this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma.figma-generate-libraryBuild or update a professional-grade design system in Figma from a codebase.figma-create-new-file**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `create_new_file` tool call.figma-code-connectCreates and maintains Figma Code Connect template files that map Figma components to code snippets.figma-generate-diagramMANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first.figma-use-figjamThis skill helps agents use Figma's use_figma MCP tool in the FigJam context.figma-use-slidesThis skill helps agents use Figma's use_figma MCP tool in the Slides context.figma-swiftuiSwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into…figma-design-to-code**MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool.figma-implement-motionTranslates Figma motion and animations into production-ready application code.figma-use-motionMotion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration.generate-project-planGenerate a FigJam project plan board from a PRD plus codebase context.video-interaction-mapperThis skill should be used when the user asks to analyze a UI screen recording and map interaction states into Figma.