Sphere Partners

A minimal guide · Claude × Figma

Turn Figma frames into production-ready designs with Claude.

Connect the Figma MCP server once, point Claude at a frame, and get code that matches your design system — not a generic approximation. This page is the shortest path we know.

Connect Figma MCPPrompting playbook

What this is

Figma MCP in one paragraph.

MCP (Model Context Protocol) is how Claude talks to external tools. Figma ships an official MCP server built into the desktop app. Once it is running, Claude can pull the frame you have selected — accurately, without guessing.

A live bridge to Figma

The Dev Mode MCP server runs inside your Figma desktop app and exposes the currently selected frame — structure, variables, text, assets — to Claude.

Claude reads the source of truth

No more pasting screenshots. Claude sees real design tokens, auto-layout, and variants, then generates code that respects them.

Your styleguide guides Claude

Combine Figma context with a clear styleguide (like the one below) and Claude produces designs that already look like they belong in your product.

Setup · 5 minutes

Connect Figma MCP to Claude.

  1. 01

    Open Figma Desktop

    The MCP server only runs in the desktop app, not in the browser. Make sure you are on the latest version. You need a Professional, Organization, or Enterprise seat with Dev Mode access.

  2. 02

    Enable the Dev Mode MCP server

    In Figma, open the menu: Figma → Preferences → Enable Dev Mode MCP Server. You should see a toast confirming the server is running on http://127.0.0.1:3845/sse.

  3. 03

    Register the server with Claude Code

    Run this once in your terminal. Claude Code will remember it across sessions.

    terminal
    claude mcp add \
  --transport sse \
  figma-dev-mode-mcp-server \
  http://127.0.0.1:3845/sse
  4. 04

    Or register it in Claude Desktop

    Prefer the desktop app? Add the same server to claude_desktop_config.json:

    claude_desktop_config.json
    {
  "mcpServers": {
    "figma-dev-mode-mcp-server": {
      "transport": "sse",
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}
  5. 05

    Verify the tools are loaded

    Restart Claude and ask: “List the Figma MCP tools you have available.” You should see things like get_code, get_variable_defs, and get_image. If not, reopen Figma with the server enabled and try again.

Playbook

How to prompt for amazing designs.

Six rules that move the output from “looks kind of like Figma” to “this shipped.”

01

Select first, prompt second

Click the exact frame you want in Figma before you prompt. Claude reads what is selected — not the whole file.

02

Anchor to your system

Tell Claude where the design tokens, components, and page routes live. Paste the styleguide link below if you are working in this repo.

03

Constrain the output

Specify the framework, file path, and whether you want a client component, server component, or pure markup. Fewer decisions for Claude = closer result.

04

Ask for responsive behavior

Figma frames are one breakpoint. Explicitly say how the layout should collapse at md and sm — or Claude will guess.

05

Iterate with screenshots

After the first pass, screenshot the rendered page and paste it back. Claude will reconcile what it built against what Figma shows.

06

Never hand-pick hex values

If Claude writes raw hex codes, stop and ask it to use the design tokens from the styleguide. Hex drift is how design systems die.

Prompt template

drop this into Claude
I have the Figma frame selected (<paste share link>).
Generate the React component for this section.

Context:
- Repo: sphereinc-com (Next.js App Router, Tailwind v4, TypeScript)
- Design tokens live in src/app/(frontend)/globals.css — use the CSS
  variables (e.g. var(--color-blue-600)), never raw hex.
- Existing component patterns live in src/components — reuse if a
  match exists, otherwise keep the component self-contained in the
  page file.
- Fonts: DM Sans for body, Lora italic for accent words in headings.
- Buttons are rounded-full, solid bg-[var(--color-blue-600)], white text.
- Max content width is 1200–1440px, padded px-6 md:px-16 lg:px-[120px].

Deliver:
1. A 'use client' component at <path>.
2. Tailwind classes only — no inline styles unless absolutely needed.
3. Responsive behavior: describe how it collapses at md and sm.
4. Pull real copy from the frame. Do not invent.

Styleguide · for you and for Claude

The rules Claude follows on this site.

Paste this section into your prompt (or link to it) and Claude will match the Sphere visual language on the first pass. It is deliberately short — the best styleguide is the one that fits in one prompt.

Color tokens

--color-blue-600

Primary brand / links / CTAs

--color-blue-500

Hover accents

--color-blue-700

Pressed state

--color-blue-50

Subtle blue wash

#1f2025

Text and dark sections (black-950)

#f5f7fa

Soft neutral background

Typography

Display / H1

Turn Figma frames into designs

Section / H2

Connect Figma MCP

Accent (Lora italic)

production-ready

Body

Point Claude at a frame and ship the result.

Eyebrow

SETUP · 5 MINUTES

Layout & component rules

  • Max content width: 1200–1440px · padding px-6 md:px-16 lg:px-[120px]
  • Sections: py-20 lg:py-28 — generous vertical rhythm, never cramped
  • Cards: rounded-xl, border-[#1f2025]/8, bg-white or bg-white/[0.03] on dark
  • Buttons: rounded-full, font-bold, solid blue-600 or outline 1f2025/15
  • Accent words in headings: always font-lora italic, always blue-600
  • Dark sections: bg-[#1f2025], text-white, blue-400 accents (not 600)
  • Icons: lucide-react, size 16–20, paired with colored square behind them
  • Grids: 1 / 2 / 3 columns with gap-5 or gap-6 — no denser
  • No raw hex in component code when a CSS variable exists
You are ready

Open Figma. Select a frame. Ask Claude.

That is the whole loop. If a design is not coming out the way you want, it is almost always because the styleguide above is missing from the prompt.

Back to setupTalk to Sphere