RAB2B | Lab 6 — Figma MCP (Bonus)

Objectives

By the end of this lab, you will have:

Connected Claude Code to Figma via MCP
Extracted design tokens from a Figma file
Generated component code from a design spec
Experienced the design-to-code workflow

Optional

This lab requires a Figma account with API access. If you don't have one set up, you can follow along with the facilitator's demo or skip ahead to the Framework Review session.

Why This Matters

In Labs 2-5 you went from product brief to working, tested app. But in many teams, the starting point isn't a text brief — it's a Figma design. This lab shows how MCP connects Claude directly to Figma, extracting specs programmatically instead of manually reading a design file.

In this lab, you'll use Figma MCP to extract design specs and generate code. If your facilitator has provided an AI Trust Check Figma file, you'll refine your Lab 4 build using actual design specs — closing the loop from brief to code to test to design polish.

This is the same "AI Delivers, Human Decides" pattern — applied to the design handover.

Prerequisites

Figma account with API access
A Figma file with components to extract (the facilitator may provide one)
Figma Personal Access Token

Getting Your Figma Token

Go to Figma > Settings > Account
Scroll to "Personal access tokens"
Generate a new token
Save it securely (you'll need it below)

Step 1: Install Figma MCP 10 min

Add the MCP server

claude mcp add figma

Configure with your token

When prompted, enter your Figma Personal Access Token.

Or configure manually in .claude/mcp.json:

{
  "servers": {
    "figma": {
      "command": "npx",
      "args": ["@anthropic-ai/mcp-figma"],
      "env": {
        "FIGMA_API_TOKEN": "your-token-here"
      }
    }
  }
}

Verify the connection

/mcp

You should see "figma" listed as an available server.

Step 2: Explore a Figma File 10 min

Get the file key

From your Figma file URL:

https://www.figma.com/file/ABC123xyz/My-Design-File
                           ^^^^^^^^^^^
                           This is the file key

Ask Claude to read it

You: "Connect to Figma and read the file with key [YOUR_FILE_KEY]. List all the components you can see."

Explore the structure

You: "What design tokens are defined in this file? Show me colors, typography, and spacing values."

Step 3: Extract a Component 15 min

Pick a component

Choose a component from the Figma file (button, card, input field, or a safety rating badge if the file has one).

Ask Claude to analyze it

You: "Look at the [ComponentName] component in the Figma file. Tell me: 1. Its dimensions and spacing 2. Colors used (with hex values) 3. Typography styles 4. Any variants or states 5. Responsive behavior (if specified)"

Generate the code

You: "Now create a React component that matches this design exactly. Use: - TypeScript - Tailwind CSS (match the Figma values) - Proper accessibility attributes Include all variants you found in Figma."

Bonus: Apply to AI Trust Check

If the Figma file contains designs for AI Trust Check components:

You: "Compare the Figma spec with the safety rating card component in our AI Trust Check app. What's different? Update our component to match the Figma design exactly."

Step 4: Design Tokens Export 10 min

Extract a full token set

You: "Extract all design tokens from this Figma file and create: 1. A Tailwind config extension with custom colors and spacing 2. A TypeScript file with token constants 3. CSS custom properties version"

Integrate with your project

You: "Update tailwind.config.js to include these design tokens."

Checkpoint

Before moving on, confirm:

Figma MCP is connected and working
You've extracted design information from a Figma file
You've generated at least one component from a Figma spec
You understand how design tokens flow from Figma to code

Common Issues

"Cannot connect to Figma"

Verify your API token is valid
Check the token has read permissions
Ensure the file is accessible to your account

"Component not found"

Use the exact component name from Figma
Check if it's nested inside a frame
Try listing all components first

"Styles don't match"

Ask Claude to show the raw values it extracted
Compare with Figma's inspect panel
Consider Figma's responsive/auto-layout settings

Reflection Questions

How accurate was the Figma-to-code translation?
What information was lost or misinterpreted?
How would this change the design-to-dev handover on your team?

Congratulations!

You've completed all the hands-on labs — from a product brief, through architecture, through two rounds of AI-assisted development, automated testing, and design integration.

Take the deployed AI Trust Check URL and this experience back to your team. The takeaway: structured input produces structured output, and the developer's role is to provide that structure.

The Takeaway

AI Delivers. Human Decides. Process Multiplies.