---
title: "Figma MCP Skills Reference"
aliases: [figma-skills, figma-mcp-skills]
tags: [figma, mcp, skills, claude-code, design-to-code, code-to-design]
sources: [raw/Figma skills for MCP.md]
created: 2026-05-15
updated: 2026-05-15
---

# Figma MCP Skills Reference

Pre-built instructions that teach Claude how to handle common Figma tasks reliably. Included automatically when the Figma MCP plugin is installed in Claude Code.

Manual download: [github.com/figma/mcp-server-guide](https://github.com/figma/mcp-server-guide/archive/refs/heads/main.zip)

---

## Skills Overview

| Skill | Purpose | Direction |
|-------|---------|-----------|
| `figma-use` | Write frames, components, variables, layouts to canvas | Code → Canvas |
| `figma-use-figjam` | Write stickies, sections, connectors to FigJam boards | Code → Canvas |
| `figma-implement-design` | Turn Figma design into working code | Canvas → Code |
| `figma-create-new-file` | Create blank design file or FigJam board in drafts | Utility |
| `figma-code-connect-components` | Link Figma components to their code implementations | Bridge |
| `figma-create-design-system-rules` | Persist team conventions to a config file once | Setup |
| `figma-generate-library` | Build/sync full design system library from codebase | Code → Canvas |
| `figma-generate-design` | Push full-page screens into Figma from app code | Code → Canvas |

---

## Core Skills

### `figma-use`
The foundational write-to-canvas skill. Required by all other canvas-writing skills.

- Creates/modifies frames, components, variables, auto layout on a Figma Design canvas
- **Requires:** Figma Design file URL + edit access
- **Paid feature** (free during beta) — Full or Dev seats on paid plans; Dev = read-only outside drafts

Prompt patterns:
```
"Using this Figma file: <URL>, create a settings screen using our existing components."
"Using this selection: <URL>, add an empty state matching the design system."
"Using this Figma file: <URL>, convert raw colors to variables."
```

### `figma-use-figjam`
Same as `figma-use` but for FigJam boards (stickies, connectors, sections, tables).

- **Requires:** FigJam file URL + edit access
- Same beta/paid status as `figma-use`

### `figma-implement-design`
Design → Code. Reads a Figma frame, pulls assets, generates code using existing project components.

- Self-validates output against the original design before finishing
- **Requires:** Link to specific frame or component

### `figma-create-new-file`
Creates a blank file in drafts. Usually the first step before `figma-use`.

```
/figma-create-new-file                          → design file "Untitled"
/figma-create-new-file figjam My Whiteboard     → FigJam "My Whiteboard"
/figma-create-new-file design My New Design     → design file named
```
Returns a direct link. Prompts to select org if account spans multiple.

---

## Bridge Skills

### `figma-code-connect-components`
Links published Figma components to their code implementations (Figma Code Connect).

- Scans codebase for matching components, shows proposed mappings for review, then creates in bulk
- **Requires:** Figma URL or selected components; components published to team library; **Organization or Enterprise plan**

### `figma-create-design-system-rules`
One-time setup: analyzes codebase, writes a rules config file (component paths, token names, file conventions).

- Run once per project or when onboarding AI to an existing codebase
- **Requires:** Codebase access

---

## Example/Advanced Skills

### `figma-generate-library`
Builds or syncs a full Figma design system library from a codebase. Multi-phase with review pauses:

1. **Discovery** — scan codebase + existing Figma file, confirm scope
2. **Foundations** — variable collections (colors, spacing, tokens), text/effect styles
3. **File structure** — standard pages (Cover, Foundations, Components, Utilities)
4. **Components** — variants, auto-layout, variable bindings, screenshot validation
5. **Integration & QA** — Code Connect mappings, naming, accessibility check

**Requires:** Codebase access + existing Figma file (create with `figma-create-new-file` first)

### `figma-generate-design`
Pushes full app pages/screens into Figma using real design system assets. Can screenshot a live app for layout reference.

- Assembles screens section by section from codebase + design system
- **Requires:** Codebase access + Figma file with linked design system library

---

## Key Takeaways

- **`figma-use` is the foundation** — all write-to-canvas skills depend on it; load this skill first for any canvas work
- **Direction matters** — `figma-implement-design` is Canvas→Code; `figma-use`/`figma-generate-design` are Code→Canvas
- **Plugin install = auto-include** — skills are bundled automatically in Claude Code when the Figma MCP plugin is installed; no manual setup needed
- **`figma-create-new-file` first** — always create the target file before running `figma-use` or `figma-generate-library`
- **Code Connect requires Enterprise** — `figma-code-connect-components` only works on Organization/Enterprise plans
- **`figma-generate-library` is multi-phase** — it pauses for human review between phases; don't expect single-shot output
- **Community skills** — additional skills available at figma.com/community/skills

---

## Related Articles

- [[wiki/claude-code/figma-mcp-setup|figma-mcp-setup]] — how to connect Figma MCP server to Claude Code
- [[wiki/claude-code/figma-mcp-code-connect|figma-mcp-code-connect]] — Code Connect deep dive (CodeConnectSnippet, CLI mappings)
- [[wiki/claude-code/figma-mcp-code-to-canvas|figma-mcp-code-to-canvas]] — code-to-canvas via `generate_figma_design`
- [[wiki/claude-code/figma-mcp-custom-rules|figma-mcp-custom-rules]] — CLAUDE.md rules for Figma MCP workflows
- [[wiki/claude-code/skills|skills]] — Claude Code skills system: creation, storage, invocation

## Sources

- `raw/Figma skills for MCP.md` — scraped from help.figma.com/hc/en-us/articles/39166810751895
