figma-mcp: Skill for Claude Code

Figma Design System Skill

Build professional, well-structured UI designs through the Figma MCP server. This skill ensures Claude approaches Figma design work systematically — thinking like a designer, not just an API caller.

Core Philosophy

The Figma MCP gives you 67 tools to manipulate a Figma file. But tools without design thinking produce messy files. This skill teaches you how to think about structure, then use the tools to execute that structure.

The golden rule: Plan the layout tree in your head first. Then build from the inside out.

---

1. Design Workflow

Every design task follows this sequence. Do not skip steps.

Step 1: Understand Context

• Use get_document_info to see existing pages, frames, and structure
• Use get_local_components to know what components already exist
• Use get_local_styles to see established color/text/effect styles
• Use get_variables to check for existing variable collections
• Ask the user about target screen size, brand, and content if not specified

Step 2: Set Up Foundation

• Navigate to the correct page with set_current_page, or create one with create_page
• If no design system exists yet, establish styles and variables first (see Section 4)
• Determine the frame dimensions (common: 1440×900 desktop, 390×844 mobile, 768×1024 tablet)

Step 3: Plan the Layout Tree

Before creating anything, map out the hierarchy. Example for a landing page hero:

hero-section (frame, 1440×900, vertical auto layout)
├── nav-bar (frame, horizontal auto layout, fill width)
│   ├── logo (frame or image)
│   ├── nav-links (frame, horizontal auto layout, gap 32)
│   │   ├── link-1 (text)
│   │   ├── link-2 (text)
│   │   └── link-3 (text)
│   └── cta-button (frame, horizontal auto layout, padding 12/24)
│       └── button-label (text)
├── hero-content (frame, vertical auto layout, centered, gap 24)
│   ├── headline (text, H1)
│   ├── subtitle (text, body large)
│   └── action-row (frame, horizontal auto layout, gap 16)
│       ├── primary-button (frame)
│       └── secondary-button (frame)
└── hero-image (rectangle or image fill)