figma-create-design-system-rules
by 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
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…
official
figma-create-new-file
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.…
official
figma-generate-design
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…
official
figma-generate-diagram
figma
MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. Routes to type-specific guidance (generic flowchart, architecture…
official
figma-generate-library
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…
official
figma-implement-design
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…
official
figma-use
figma
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first.…
official
figma-use-figjam
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…
official