4.2 KiB
| title | aliases | tags | sources | created | updated | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Figma Skills Reference — All Official Skills |
|
|
|
2026-05-13 | 2026-05-13 |
Figma Skills Reference
Skills = pre-built workflow instructions bundled with the Figma plugin. They tell the AI which tools to call, in which order, and how to handle results. Without skills, you'd have to describe the steps manually every time.
Setup
claude plugin install figma@claude-plugins-official
After install + restart: /plugin → Installed → figma → Allow access (OAuth in browser).
If OAuth fails mid-flow, see figma-mcp-oauth-reconnect-restart for the restart fix.
Skills for Developers (Code-Focused)
figma-implement-design ← the main one
Turns a Figma frame into working code. Reads design context, pulls assets, generates code matching project conventions, and validates against the original design.
Trigger: provide a Figma URL + ask to implement
Requires: link to a specific frame or component
Workflow: get_design_context → get_screenshot → download assets → adapt to project → validate
See figma-design-to-code-workflow for the full step-by-step.
figma-code-connect-components
Scans the codebase for components matching selected Figma components, shows proposed connections, then bulk-creates Code Connect mappings. After this, Dev Mode shows real component code instead of generated CSS.
Trigger: "connect these Figma components to code"
Requires: Figma URL with published library components + Org/Enterprise plan for MCP publishing (or use CLI for any plan — see figma-code-connect-plan-requirements)
figma-create-design-system-rules
Analyzes the codebase and writes a CLAUDE.md (or equivalent) section with project-specific Figma integration rules: component paths, naming, design tokens, layout primitives. Run once, saves repetitive prompting.
Trigger: "generate design system rules for Figma" or "set up Figma CLAUDE.md rules"
Requires: access to the codebase
Skills for Designers (Canvas-Focused)
figma-use
The foundational write-to-canvas skill. Creates/modifies real Figma content: frames, components, variables, Auto Layout. Other write-to-canvas skills build on top of it.
Requires: Figma file URL + edit access + Full or Dev seat on paid plan
Note: Usage-based paid feature (currently free in beta)
figma-use-figjam
Same as figma-use but for FigJam boards: stickies, sections, connectors, shapes, tables.
figma-create-new-file
Creates a blank Figma Design or FigJam file in drafts.
/figma-create-new-file [editorType] [fileName]
# Examples:
/figma-create-new-file
/figma-create-new-file figjam My Whiteboard
/figma-create-new-file design Homepage Redesign
Internally calls whoami to get planKey, then create_new_file. Use before figma-use when no file exists yet.
Example Skills (Reference Implementations)
These are fully functional but also serve as templates for building custom skills.
figma-generate-library
Builds a full Figma design system library from your codebase in phases: Discovery → Foundations (color/spacing variables) → File structure (pages) → Components (with variants + Code Connect) → QA.
Requires: codebase access + existing Figma file (create with figma-create-new-file)
figma-generate-design
Builds full-page Figma screens from code using real components from the design system. Can also take a live screenshot of the running app as layout reference.
Requires: codebase access + Figma file with connected design system
Skill vs Tool
| Skill | Tool | |
|---|---|---|
| What it is | Pre-built workflow instructions | Raw MCP function |
| Where it lives | Plugin / SKILL.md file | MCP server |
| How to invoke | /skill-name or natural language |
Called by Claude Code automatically |
| Example | figma-implement-design |
get_design_context |
Skills orchestrate tool calls. The skill tells Claude when and why to call tools; the tools do the actual data retrieval.