figma-mcp-0to1

name	figma-mcp-0to1
description	Guide users from Figma MCP installation and authentication through first canvas creation, with function-level tool coverage and operational recovery patterns.
skillMetadata	{"author":"skilly-hand","last-edit":"2026-06-20","license":"Apache-2.0","version":"1.1.0","changelog":"Synced the official Figma MCP surface for asset transfer, Code Connect context, library discovery, Figma Slides, current Figma-provided skills, and per-minute limits; affects tool routing, canvas workflows, prompts, troubleshooting, and the official matrix","auto-invoke":"Installing, configuring, or using Figma MCP from setup through first canvas creation","allowed-tools":["Read","Edit","Write","Glob","Grep","Bash","WebFetch","WebSearch","Task","SubAgent"]}

Figma MCP 0-to-1 Guide

When to Use

Use this skill when:

• You need to set up Figma MCP from scratch.
• You need a reliable path from connection to first successful canvas output.
• You need to choose the right Figma MCP function for a task.
• You need operational recovery for permission, auth, tool-loading, or rate-limit failures.
• You need to understand which skilly-hand agents overlap with Figma-supported MCP clients.

Do not use this skill for:

• Generic frontend implementation that does not require Figma MCP.
• One-off code-only tasks with no design context.
• Legacy repository-specific Figma pipelines that already define their own strict workflow.

---

Routing Map

Choose subskills by intent:

Intent	Subskill
Install and authenticate MCP connection	agents/install-auth.md
Select exact function/tool and expected inputs	agents/tool-function-catalog.md
Create first canvas output safely	agents/canvas-creation-playbook.md
Recover from errors, limits, or drift	agents/troubleshooting-ops.md

---

Standard Execution Sequence

1. Set up server transport and authentication.
2. Verify connectivity with a low-risk call (whoami on remote, or a read tool).
3. Select the smallest tool that solves the immediate task.
4. For writes, inspect existing file/design-system context before creating new content.
5. Run creation in short, validated steps (avoid large one-shot requests).
6. If anything fails, use troubleshooting flow before retrying.

---

Core Rules

• Prefer remote server for broadest feature coverage, write workflows, code-to-canvas, and FigJam agent workflows.
• Treat official Figma MCP docs as the source of truth for official tools, supported clients, permissions, and limits.
• Keep client-specific helpers separate from official Figma MCP tools.
• Treat write actions as staged operations, not a single large operation.
• Use link-based node targeting for reliable design-context extraction.
• Keep a clear distinction between read context tools and write/canvas tools.
• For repeated team workflows, reuse prompts and config snippets from assets/, and prefer Figma-provided skills when they exist.
• Pair use_figma with the editor-specific skill: figma-use for Design, figma-use-figjam for FigJam, or figma-use-slides for Slides.
• Use download_assets and upload_assets when the task requires asset delivery, non-PNG exports, original images, or cross-file image transfer.

---

Agent Coverage

Figma MCP support and skilly-hand installation support are related but not identical:

Coverage	Agents or Clients	Guidance
Figma-documented and skilly-hand-supported	codex, claude, cursor, copilot	Use concrete setup paths where published; Copilot support is currently documented for Copilot CLI write-to-canvas.
Figma-documented but not skilly-hand-native	VS Code, Xcode, Claude Desktop, Warp, Augment, Factory, Firebender	Mention only for the workflows where Figma lists them; do not add skilly-hand install assumptions.
skilly-hand-supported but not source-backed in current Figma docs	gemini, antigravity, windsurf, trae	Keep broad agentSupport; require verification in the Figma MCP Catalog or client documentation before setup.

Figma-Provided Skills

Prefer Figma-provided skills for workflows they cover:

Skill	Use
figma-use	Foundational Figma Design write-to-canvas workflow for frames, components, variables, styles, and auto layout.
figma-use-figjam	Foundational FigJam write workflow for boards, stickies, sections, connectors, shapes, tables, and code blocks.
figma-use-slides	Foundational Slides write workflow for decks, sections, themes, and speaker notes.
figma-swiftui	Translate between Figma designs and SwiftUI in both directions.
figma-code-connect	Map published Figma components to code implementations.
figma-create-new-file	Create blank Design, FigJam, or Slides files before writing.
figma-generate-diagram	Create editable FigJam diagrams from descriptions or source material.
figma-generate-library	Example workflow for creating or syncing a Figma design-system library from code.
figma-generate-design	Example workflow for building screens/views in Figma from code or a design-system-aware brief.

---

Key References

• Full function matrix: references/official-tools-matrix.md
• Client setup snippets: assets/client-config-snippets.md
• Prompt starters: assets/prompt-recipes.md

---

Commands

# Codex CLI (manual remote setup)
codex mcp add figma --url https://mcp.figma.com/mcp

# Claude Code plugin setup
claude plugin install figma@claude-plugins-official

# Claude Code manual remote setup
claude mcp add --transport http figma https://mcp.figma.com/mcp

# Claude Code manual remote setup, user scope
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

# Claude Code manual desktop setup
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

# Cursor plugin setup
/add-plugin figma

# Verify catalog integrity in this repository
npm run catalog:check