Back to Tools

Figma Digital Hand

Control Figma directly from Claude Code using Chrome DevTools MCP.

Introduction

The Chrome DevTools Protocol (CDP) gives you direct, low-level access to the browser. When you combine this with Claude Code, you get something powerful: an AI that can see and manipulate any web application - including Figma.

We call it the "digital hand" because that's what it feels like - Claude reaching into your browser and moving things around in Figma on your behalf. You describe what you want, and it handles the clicking, dragging, and typing.

Why Chrome DevTools?

There are multiple approaches to browser automation (WebDriver BiDi is another option worth looking into). CDP is the simplest for this use case - one install command, direct access to evaluate JavaScript in the browser context, and Figma's Plugin API is immediately available.

Installation

Step 1: Add the Chrome DevTools MCP

Run this command to add the Chrome DevTools MCP to your Claude Code installation:

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
bash

This gives Claude the ability to navigate pages, evaluate JavaScript, take screenshots, and interact with any web application.

Step 2: Create the Skill File

Skills are reusable instruction sets for Claude Code. Create this file to give Claude the context it needs for Figma interactions:

mkdir -p ~/.claude/skills/figma-digital-hand
touch ~/.claude/skills/figma-digital-hand/SKILL.md
bash

Or for a project-specific skill:

mkdir -p .claude/skills/figma-digital-hand
touch .claude/skills/figma-digital-hand/SKILL.md
bash

Where to put the skill?

~/.claude/skills/ - Available globally across all projects
.claude/skills/ - Only available in the current project

The SKILL.md File

Copy this content into your SKILL.md file:

# Figma Browser Control

Control Figma designs through the Chrome DevTools MCP.

## Workflow

1. **Open Figma** - Navigate the browser to figma.com. Ask the user to sign in and open their target design file.

2. **Verify Access** - Run `evaluate_script` to check that `typeof figma !== 'undefined'`. This confirms the Figma plugin environment is active.

3. **Execute Commands** - Use `evaluate_script` to run JavaScript against the Figma Plugin API. You can create nodes, modify properties, read layer data, export assets, and more.

## Guidelines

- Communicate in plain language. Describe actions before taking them.
- Work exclusively through the Plugin API. Do not suggest REST API calls or manual UI clicks.

## When figma is undefined

The global `figma` object may not initialize until a plugin has run. If access fails:
1. Check that the user has edit permissions (view-only blocks plugin access)
2. Have them create a branch of the file for edit rights
3. Have them open any plugin from the Figma menu, then close it - this activates the plugin runtime

## Reference

Figma Plugin API: https://developers.figma.com/docs/plugins/api/global-objects/
markdown

This skill instructs Claude on how to properly interact with Figma through the browser, including the common gotcha where the figma global isn't immediately available.

Using It

Once installed, the workflow is simple:

  1. 1.Open Claude Code
  2. 2.Log into Figma in Chrome and open your design file
  3. 3.Ask Claude to do whatever you need

Example Prompts

"Create a new frame called 'Header' that's 1440x80 pixels"

"List all the text layers in this file and their font sizes"

"Find all components named 'Button' and change their corner radius to 8px"

"Export all frames on the current page as PNG at 2x"

"Create a color style called 'Brand Blue' with the value #3B82F6"

Claude will navigate to Figma, verify access, and execute the appropriate Plugin API calls - explaining each step in plain language.

Troubleshooting

"figma is not defined"

This is the most common issue. The Figma plugin runtime doesn't always initialize automatically. Try these fixes in order:

  1. 1.
    Check permissions - You need edit access, not just view access. If you can't edit, create a branch of the file.
  2. 2.
    Activate the plugin runtime - Open any plugin from the Figma menu (Resources > Plugins), then close it. This initializes the figma global.
  3. 3.
    Refresh the page - Sometimes Figma's state gets stuck. A simple refresh often helps.

MCP Not Connected

If Claude can't access browser tools, verify the MCP is installed:

claude mcp list
bash

You should see chrome-devtools in the list. If not, re-run the installation command.

Additional Resources