Figma Toolkit

A Claude Code skill for integrating Figma into your development workflow using the Figma MCP server. Connects Claude directly to your Figma files for inspecting designs, extracting specifications, and translating design tokens into code — all without leaving your terminal.

When to Use This Skill

Choose Figma Toolkit when:

• You want to inspect Figma designs and extract specs directly from Claude Code
• You need to pull colors, typography, spacing, and component details from Figma
• You're setting up the Figma MCP integration for your project
• You want to compare your implementation against the original Figma design
• You need to extract design tokens from Figma files programmatically

Consider alternatives when:

• You need to implement a full Figma-to-code workflow (use a Figma implement design skill)
• You want general frontend design guidance (use a frontend design skill)
• You need a complete design system setup (use a UI design system skill)

Quick Start

Copy
# Install the skill
claude install figma-toolkit

# Set up Figma MCP (requires Figma access token)
export FIGMA_ACCESS_TOKEN="your-figma-access-token"

# Inspect a Figma file
claude "Inspect the Figma file at [URL] and list all the components and their properties"

# Extract design tokens
claude "Extract the color palette and typography scale from this Figma file: [URL]"

# Compare implementation to design
claude "Compare my Button component implementation against the Button in this Figma file"

Core Concepts

Figma MCP Integration

Feature	Description	Use Case
File Inspection	Read Figma file structure and metadata	Understand design organization
Component Extraction	Pull component properties and variants	Build matching React components
Style Extraction	Get colors, fonts, effects, grids	Create design token files
Layer Inspection	Examine specific frames and layers	Get precise measurements
Image Export	Export assets from Figma layers	Download icons and images

Design Token Pipeline

Figma File
├── Colors → CSS custom properties / Tailwind config
├── Typography → Font family, size, weight, line-height scales
├── Spacing → Consistent spacing scale (4px, 8px, 16px...)
├── Shadows → Box-shadow values
├── Border Radius → Border radius scale
└── Breakpoints → Responsive design breakpoints

Output formats:
  → CSS Custom Properties (--color-primary: #3B82F6)
  → Tailwind config (theme.extend.colors)
  → JSON tokens (Style Dictionary format)
  → TypeScript constants

Figma Node Types

Node Type	Description	Code Equivalent
Frame	Container with layout	div with flexbox/grid
Component	Reusable design element	React component
Instance	Component usage with overrides	Component with props
Text	Typography layer	p, h1-h6, span
Rectangle	Shape layer	div with styling
Group	Logical grouping	Wrapper div

Configuration

Parameter	Type	Default	Description
figma_token	string	""	Figma personal access token
output_format	string	"tailwind"	Token format: tailwind, css, json, typescript
framework	string	"react"	Target framework: react, vue, svelte
include_variants	boolean	true	Extract component variants
pixel_to_rem	boolean	true	Convert pixel values to rem

Best Practices

1. Set up the Figma MCP server first — The MCP server provides direct Figma API access. Configure it with your access token in the Claude Code MCP settings. Verify the connection before trying to extract designs.

2. Extract design tokens before building components — Pull the color palette, typography scale, and spacing values first. Set these up as CSS variables or Tailwind config. Then build components using those tokens for consistency.

3. Use component names as your source of truth — Figma component names should map to your code component names. If the designer names it "Button/Primary/Large," your code should have a Button component with variant="primary" and size="large".

4. Compare at the property level, not pixel level — Don't try to match screenshots pixel-by-pixel. Compare colors, font sizes, spacing values, and layout properties. Small rendering differences between Figma and browser are normal.

5. Automate token extraction — Set up a script that pulls tokens from Figma and generates your design token files. Run it when designs update to keep code and design in sync automatically.

Common Issues

MCP connection fails — Check that your Figma access token is valid and has the right permissions. Ensure the MCP server is configured in your Claude Code settings. Test with a simple file request first.

Extracted values don't match implementation — Figma uses absolute pixel values while your code might use rem or percentage units. Set up a consistent conversion (1rem = 16px) and apply it during token extraction.

Too many components to extract — Focus on your design system's core components first: buttons, inputs, cards, navigation. Extract page-specific layouts as needed rather than trying to extract everything at once.