Claude Code is Anthropic's official CLI for agentic coding tasks. It runs directly in your terminal, reads and edits your project files, and can invoke MCP servers to pull in external data sources like Figma. When you connect Figma MCP to Claude Code, the agent gains access to your design files without leaving the terminal — it can inspect a Figma frame, understand the component structure, match it against your existing codebase, and write production-ready code, all in a single prompted session.
This topic walks through installing and configuring Figma MCP for Claude Code, extracting design context, generating component code, and mapping Figma design tokens to your codebase's CSS variables.
Installing and Connecting Figma MCP to Claude Code
Figma provides an official MCP server at https://mcp.figma.com/mcp. Claude Code connects to it over HTTP — no local server process, no Node.js dependency, no npx command to manage.
Prerequisites
- Claude Code CLI installed (npm install -g @anthropic-ai/claude-code or via the Anthropic installer)
- A Figma account (free or paid)
Step 1: Install the Figma plugin for Claude Code
claude plugin install figma@claude-plugins-official
This registers the Figma MCP integration with Claude Code.
Step 2: Connect to the Figma MCP server
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp
The --scope user flag makes this available across all your Claude Code projects.
Step 3: Trigger authentication
Start a Claude Code session:
claude
Authenticate by running a Figma tool inside the session:
Use the Figma MCP to get metadata for the file at https://www.figma.com/design/ABC123/My-Design-File
Claude Code will pause, display an authorization URL, and open your browser for Figma OAuth. Complete the login and grant access — Claude Code automatically continues the session and completes the tool call.
Step 4: Verify the connection
claude mcp list
You should see figma listed as an active MCP server. You can also verify inside a session:
Use the Figma MCP tool to get metadata for the file at https://www.figma.com/design/ABC123/My-Design-File
If connected correctly, Claude Code will call get_metadata and return the file name, page list, and last-modified date.
VS Code integration
If you use the Claude Code VS Code extension, the Figma MCP server configured with --scope user is automatically available in extension-initiated sessions. No additional VS Code configuration is needed.
Tips
- Runclaude mcp listto verify which MCP servers are active before starting a design-to-code task.
- The--scope userflag persists the connection across all projects. Use--scope projectif you want the Figma MCP only for a specific project.
- If the connection fails, runclaude mcp remove figmaand repeat Steps 2–3 to reconnect.
Extracting Design Context and Identifying Components from Figma Frames
Before generating code, get the agent oriented on what it's working with. The get_design_context tool returns a rich JSON tree, and a well-structured extraction prompt ensures the agent summarizes the right things before writing a single line of code.
Finding the node ID
In Figma, right-click any frame or component and select "Copy/Paste as" > "Copy link". The URL contains the node-id parameter:
https://www.figma.com/design/ABC123/DesignSystem?node-id=42%3A100
The node-id here is 42:100 (URL-decoded from 42%3A100).
Orientation prompt — always run this first
Using Figma MCP, get the design context for node-id=42:100 in Figma file ABC123. Do not generate any code yet. Instead:
1. Describe the overall layout structure (flexbox direction, nesting depth, number of distinct sections).
2. List all Figma component instances found (name and how many times they appear).
3. List all unique fill colors and map them to any matching tokens in src/styles/tokens.css if the values match.
4. List all typography styles used (font, size, weight).
5. Flag anything that looks ambiguous or that I should clarify before code generation.
This two-phase approach (orient first, generate second) catches mismatches between what the designer intended and what the agent interprets before wasted code is produced.
Identifying reusable components
From the design context of node-id=42:100 in file ABC123, identify which elements correspond to components in our src/components/ directory. For each match, state the Figma component name, the React component you plan to use, and any prop differences between what Figma shows and what our component supports.
Tips
- Include the Figma file ID and node ID in every prompt — Claude Code does not remember these between sessions unless you set them in a project system prompt (.claude/system.md).
- Ask for the component inventory before code generation — it surfaces gaps in your component library that need to be filled before the feature is complete.
- If a frame is deeply nested and the full context is too large, focus on a sub-frame: copy the node ID of the specific section you're implementing, not the entire page.
- Use the orientation step output as a checklist: after code generation, verify each listed component instance and token appears correctly in the output.
Generating React and CSS Code from Figma Designs via Claude Code
Once you have a clear orientation, prompt Claude Code to generate the component. Be specific about your project's conventions — TypeScript vs JavaScript, CSS modules vs Tailwind vs styled-components, file naming, prop types pattern, and test file expectations.
Full component generation prompt
Now generate the React component for node-id=42:100 in file ABC123. Requirements:
- TypeScript with explicit prop types (no `any`)
- CSS Modules (file: NotificationBanner.module.css alongside the component)
- Use components from src/components/ for matched instances (Button, Icon, etc.)
- Map colors to tokens from src/styles/tokens.css using CSS custom properties
- Follow the spacing scale in src/styles/spacing.css (4px base unit)
- Add ARIA attributes: role="alert" on the root, aria-live="polite" for the message region
- Export a named export NotificationBanner
- Create the file at src/components/NotificationBanner/NotificationBanner.tsx
Incremental refinement prompt (after reviewing the first draft)
The generated NotificationBanner looks correct structurally, but:
1. The close button should use our existing <IconButton> component (src/components/IconButton/) instead of a raw <button>
2. The background color for the "warning" variant uses #FEF3C7 — this maps to var(--color-warning-50) in our token file, update the CSS module
3. Add a `onDismiss?: () => void` prop and wire it to the close button's onClick
Regenerate only the changed sections, not the whole file.
Generating a Storybook story
Using the same design context from node-id=42:100 in file ABC123, generate a Storybook 7 story file for NotificationBanner. Include:
- A story for each variant visible in the Figma design (info, success, warning, error)
- Controls for the message text prop
- A story that demonstrates the onDismiss callback
Place the file at src/components/NotificationBanner/NotificationBanner.stories.tsx
Generating a unit test
Generate a Vitest + React Testing Library test file for NotificationBanner.tsx. Cover:
- Renders the message text
- Renders the correct icon for each variant
- Calls onDismiss when the close button is clicked
- Is accessible (use toBeInTheDocument and getByRole queries, not getByTestId)
Place the file at src/components/NotificationBanner/NotificationBanner.test.tsx
Tips
- The more specific your constraints (file path, naming conventions, existing component names), the fewer correction passes you need.
- Ask Claude Code to read an existing similar component first (Read src/components/Alert/Alert.tsx) before generating a new one — it will pattern-match your conventions automatically.
- For large components, break generation into stages: layout structure first, then styling, then interactive behavior. Review each stage before proceeding.
- After generation, always runtsc --noEmitand your linter — Claude Code can then fix type errors in a follow-up turn rather than requiring manual editing.
Mapping Figma Design Tokens to Codebase CSS Variables
Figma Variables are the source of truth for design tokens in modern Figma workflows. The get_variable_defs tool returns the full variable collection — all the color, spacing, typography, and radius values defined by the design team.
Extracting variables and generating a token file
Get all variable definitions from Figma file ABC123 using get_variable_defs. Then:
1. List all variable collections and the number of variables in each.
2. For each variable with a mode (e.g., Light/Dark), show both values.
3. Generate a CSS file src/styles/figma-tokens.css with CSS custom properties for all color and spacing variables, using the naming convention --figma-{collection}-{variable-name} converted to kebab-case.
Mapping Figma variables to existing code tokens
When a codebase already has a design token file, the task is reconciliation rather than generation:
I have two token sources:
1. Figma variables from file ABC123 (fetch with get_variable_defs)
2. Our existing token file at src/styles/tokens.css
Compare them and produce a mapping report:
- Tokens that exist in both (show Figma name → CSS variable name)
- Tokens in Figma but missing in tokens.css (these need to be added)
- Tokens in tokens.css but not in Figma (these may be deprecated or undocumented)
Format the output as a markdown table.
Generating a token migration when the design system is rebranded
The design team has updated Figma file ABC123 with rebranded color tokens. The old prefix was "brand-" and the new prefix is "nova-". Fetch the current variable definitions, then:
1. Generate a diff showing renamed tokens
2. Update src/styles/tokens.css with the new names
3. Generate a sed command to bulk-rename old token references across the src/ directory
Example output from the last prompt step:
find src -name "*.css" -o -name "*.tsx" | xargs sed -i '' 's/var(--brand-/var(--nova-/g'
Dark mode token generation
The Figma Variables in file ABC123 have a "Dark" mode collection alongside the default "Light" mode. Generate a CSS file that uses @media (prefers-color-scheme: dark) and data-theme="dark" overrides for all dark-mode token values. Follow the pattern in src/styles/tokens.css for the :root selector structure.
Tips
- Runget_variable_defsat the start of any major feature sprint to catch token changes from the design team before they become integration bugs.
- Ask the agent to output token mappings as a markdown table first and review it before applying changes to CSS files — catching naming mismatches at this stage is far cheaper than post-merge.
- Figma variables support aliases (one variable pointing to another). Theget_variable_defsoutput includes resolved values — ask the agent to flag aliased tokens separately so you understand the dependency chain.
- Keep atokens.mdfile in your design system package documenting the expected Figma-to-code mapping. Ask Claude Code to update it as part of any token synchronization task.