figma-create-design-system-rulesby figma
Generates 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…
npx skills add https://github.com/figma/dev-mode-mcp-server-guide --skill figma-create-design-system-rulesMore skills from figma
figma-code-connect
by figma
Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component…
figma-create-new-file
by figma
Create a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling use_figma.…
figma-generate-design
by figma
Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to…
figma-generate-diagram
by figma
MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. Routes to type-specific guidance (generic flowchart, architecture…
figma-generate-library
by figma
Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set…
figma-implement-design
by figma
Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions…
figma-use
by figma
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first.…
figma-use-figjam
by figma
This 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…