Figma MCP: Design to Code

What Figma MCP does

Figma's official Dev Mode MCP server exposes your design file structure to Autohand. The agent can read layer hierarchies, auto-layout properties, component variants, text styles, colors, and spacing values. Instead of guessing from a screenshot, the agent works from the actual design data.

This means the generated code matches your Figma designs with correct padding, font sizes, border radius, and color values. The agent also understands component variants and responsive auto-layout, so it can produce code that handles different states and screen sizes.

Prerequisites

• A Figma account with Dev Mode access (included in Figma Professional and above).
• A Figma personal access token. Generate one at figma.com/developers/api.
• The design file must be published or shared with your account.

Setup

The Figma MCP server uses the stdio transport:

# Add Figma MCP
autohand mcp add figma npx -y @anthropic/mcp-server-figma

# Set your Figma token
export FIGMA_ACCESS_TOKEN="your-figma-token"

# Verify connection
autohand mcp list

Configuration in ~/.autohand/config.json:

{
  "mcp": {
    "servers": [
      {
        "name": "figma",
        "transport": "stdio",
        "command": "npx",
        "args": ["-y", "@anthropic/mcp-server-figma"],
        "env": {
          "FIGMA_ACCESS_TOKEN": "your-figma-token"
        },
        "autoConnect": true
      }
    ]
  }
}

Usage examples

Convert a component to React

# Point the agent at a specific Figma frame or component
autohand --prompt "Look at the card component in this Figma file: https://figma.com/design/abc123/MyApp and create a React component with Tailwind CSS"

# The agent reads the design layers, extracts spacing/colors/typography,
# and generates a matching React component

Build a full page layout

# Convert an entire page design
autohand --prompt "Implement the dashboard page from our Figma file https://figma.com/design/abc123/Dashboard as a Next.js page with responsive layout"

# Reads auto-layout properties to create proper flexbox/grid code

Extract design tokens

# Pull out the design system values
autohand --prompt "Read the design tokens from https://figma.com/design/abc123/DesignSystem and generate CSS custom properties for our theme"

# Creates variables for colors, spacing, typography, shadows

Match an existing codebase style

# Tell the agent to follow your existing patterns
autohand --prompt "Look at the signup form in Figma (https://figma.com/design/abc123/Forms) and implement it following the same patterns as src/components/LoginForm.vue"

What the agent sees

When Autohand reads a Figma file, it gets structured data about each element:

• Layer hierarchy: parent-child relationships, frame nesting, groups.
• Auto-layout: direction, padding, gap, alignment, wrap behavior.
• Typography: font family, size, weight, line height, letter spacing.
• Colors: fill colors, stroke colors, opacity, gradients.
• Dimensions: width, height, constraints, min/max sizing.
• Component variants: different states (default, hover, active, disabled).
• Effects: shadows, blurs, border radius.

This is the same data you see in Figma's Dev Mode inspect panel, delivered directly to the agent.

Tips

• Use clear naming in your Figma files. Layers named "Frame 47" are harder for the agent to work with than "hero-section" or "pricing-card".
• Organize designs with auto-layout. The agent maps auto-layout directly to CSS flexbox and grid, producing cleaner code.
• Share the Figma file URL with the specific frame selected. This focuses the agent on the component you want built.
• For complex pages, work component by component rather than asking for the entire page at once.
• Tell the agent your tech stack in the prompt. "React with Tailwind" produces different code than "Vue with scoped CSS".