Figma MCP

Figma MCP settings card in Project Settings with the enable toggle

Figma MCP lets agents pull layout, styles, and other design context straight from your Figma files. Give agents a Figma link in a ticket, and they can build UI that matches the design instead of guessing.

What agents can do

With Figma MCP enabled, agents can:

Read frames, components, and layers from a Figma file
Inspect layout, spacing, colors, and typography
Use design context to implement or update UI

Setup

Figma MCP is enabled per project, but each teammate connects their own Figma token. That way, agents use the design access of whoever they're working with.

Go to Project Settings -> Skills and MCPs.
Enable Figma.
Each workspace member adds their own Figma personal access token in Personal Settings.

To create a token, go to Figma settings and generate a personal access token. Set these two scopes to Read-only. The other scopes aren't used, so leave them unchecked:

Scope	Why it's needed
File content (`file_content:read`)	Read file contents and render images from files
Dev resources (`file_dev_resources:read`)	Read dev mode resources attached to a file

If a scope is missing, Figma returns a 403 and the agent can't read the file. Figma scopes are set when you create the token, so add the missing scope by creating a new token and pasting it into Personal Settings.

Your token is stored encrypted, saved only to your membership in the workspace, and passed to agents only when a project enables Figma MCP.

Link directly to your design

Figma MCP works best when you give agents a link to the exact frame or layer they should inspect. The link must include the selected object's node ID, so don't copy a generic file link unless you want the agent to inspect the whole file.

To copy the right link:

Open the design in Figma.
Select the frame, component, or layer you want the agent to use.
Press Command + L on macOS, or Ctrl + L on Windows/Linux, to copy a link to the selection.
Paste that link into the Superconductor ticket or chat message with the implementation request.

You can also right-click the selection and choose Copy/Paste as -> Copy link to selection.

Figma context menu showing Copy/Paste as and Copy link to selection

The copied URL should include a node-id parameter. For example:

https://www.figma.com/design/FILE_KEY/File-name?node-id=123-456

You can also copy the URL from the browser address bar after selecting the target frame or layer, as long as the URL includes node-id.

Whose token gets used

Agents use the Figma token of the person a run belongs to, not the person viewing it:

For an implementation you launch, agents use your token.
For runs started automatically — such as from an automation, Slack, GitHub, or email triage — agents use the token of the person who created the ticket.

Your token is never used for a teammate's runs, and theirs is never used for yours. If the relevant person hasn't added a Figma token, the run simply proceeds without Figma access.

When to use it

Ask agents to use Figma when a ticket involves building or updating UI from a design. Include the Figma file or frame link in the ticket so the agent knows what to read.

If the agent reads the wrong part of a design, send a new link copied from the specific frame or layer. A file-level link may leave the agent guessing which screen or mockup matters.