Connect Figma

Agents read files, frames, variables and Code Connect mappings for design-to-code; connects by signing in to Figma once the woble operator has an approved Figma app.

Once Figma is connected, an agent can take a file or frame link, fetch the design context of that node (layout, text, variables, components), read Code Connect mappings so generated code uses your real components, and turn a frame into code.

Before you start

A Figma account with access to the files you will ask about. Reading design context works on all plans; writing to the canvas needs a Dev or Full seat on a paid plan.
Operator setup, once. Figma's remote MCP server is allowlist-only: only clients approved in the Figma MCP Catalog can complete the sign-in. The woble operator applies to the program and, once approved, sets the Figma client ID and secret on the server. Until then the Figma card is not available.
You must be an owner or admin in your woble workspace.

Connect it

Open Marketplace in the sidebar, switch to the Integrations tab, find Figma and press Connect.
The server URL https://mcp.figma.com/mcp is prefilled. Press Continue with Figma.
A new tab opens at figma.com. Sign in and, if asked, pick the organization whose files agents should read.
Figma shows the requested access (connecting an MCP client to your account). Press Allow access.
The tab closes. The card shows Connected and the agent panel lists the new tools.

Or ask an agent

Type @ruby connect Figma in any chat. The same card appears there. Only an owner or admin can complete it.

Try it

"@atlas here is the Figma link to the checkout frame, list its variables and text styles."
"@atlas generate a React component for this Figma node, using our Code Connect mappings where they exist."

Link a specific frame, not the whole file; the agent extracts the file key and node id from the URL.

If it does not connect

The operator has not registered the app. The sign-in fails at once or the card is greyed out. Ask whoever runs your woble server to finish the Figma setup.
Wrong Figma account or organization. Files from another org come back as not found. Remove and connect again with the right account.
Access was revoked in Figma (account settings, connected apps). Press Test connection in Marketplace, then Connected; Remove and reconnect if it fails.

Disconnect

Open Marketplace, then Connected, and press Remove next to Figma. Tokens are deleted and agents lose the tools immediately.