Figma logo
ConnectorFigma

Figma integration for Claude and Codex

Create a Figma connection, then control which Spaces can use its approved tools and data without pasting credentials into prompts or threads.

Use Figma from Claude

Add the Figma connection to a Space that runs Claude, then use it from every channel in that Space.

Use Figma from Codex

Add the Figma connection to a Space that runs Codex, then use it from every channel in that Space.

Use Figma from Sidekick

Connect your own OpenClaw to Sidekick while type.com provides the conversations, permissions, connections, skills, and automations.

Design & Media

What the Figma connector can do

Product teams design in Figma, creating interfaces and hand them off to engineering. Linked to type.com, Figma lets Claude leave comments and reactions on files, attach development resources such as tickets or docs to design nodes, update variables and modes in bulk, and register webhooks for file events. Designers and engineers coordinate the handoff in a shared thread.

One connection, many Spaces

Connect Figma once, then decide which Spaces can use it in threads, skills, automations, and coding work.

What teams do with Figma in type.com

Post review feedback on a file

Turn the design critique from a thread into comments on the Figma file itself, so designers see each piece of feedback right next to the frame it concerns.

Try asking
Add a Figma comment on the checkout file: 'Primary button contrast fails on dark mode, see thread for details.'

Link tickets to designs

Attach dev resources like issue or spec URLs to the right frames, so engineers can jump from a design to the work item.

Try asking
Create Figma dev resources on the 'Checkout v3' frames linking each to its Linear issue URL from this thread.

Update design tokens

Change variable values or add a mode across a collection in one batch, for example when the brand palette shifts.

Try asking
In our Figma tokens file, update the 'brand/primary' variable to #2B4CFF in both light and dark modes.

Representative actions

  • Add a comment to a file

    Posts a comment on a file or branch, optionally as a reply to an existing comment.

  • Add a reaction to a comment

    Adds an emoji reaction to a comment, a quick way to acknowledge feedback.

  • Create a webhook

    Registers a webhook that receives notifications when chosen file events occur.

  • Create dev resources

    Attaches development links, such as tickets or docs, to specific nodes in a file.

  • Create, modify, or delete variables

    Changes variables, collections, modes, and values in a file through batch updates.

Connection

API and auth details

Figma's REST API uses api.figma.com with OAuth 2.0 access tokens, plan access tokens, or personal access tokens for files, teams, projects, users, comments, webhooks, and enterprise APIs.

FAQ

Questions people ask before connecting Figma

Can Claude comment on Figma files?

Yes. With Figma connected to a type.com Space, Claude can add comments and reactions, attach dev resources, update variables, and create webhooks. Design feedback written in a thread can go straight onto the file.

How do I connect Figma to type.com?

You can sign in with OAuth or add a Figma personal access token as an API key. Admins create the connection once and share it with the Spaces that need it.

Can the agent update design tokens in Figma?

Yes. The variables action can create, modify, or delete variables, collections, and modes in a file. Review the planned changes in the thread before the agent applies them.

Is this the same as a Figma MCP server?

Not exactly. type.com uses connectors and connections to give selected Spaces access to approved app tools and data. Some connectors use hosted MCP, while others use OAuth, API keys, service accounts, or custom APIs.

More design & media connectors

All Design & Media integrations