---
title: "Figma Skills Reference — All Official Skills"
aliases: [figma-skills, figma-plugin-skills]
tags: [figma, mcp, skills, claude-code]
sources:
  - "raw/Figma skills for MCP.md"
  - "raw/Skill create_new_file — Create a New Figma File.md"
created: 2026-05-13
updated: 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

```bash
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.
