Read and render Figma designs — files, frames, variables.
After installing figma, your agent can read Figma files, render frame images, query variables, post comments, and convert FigJam connector graphs to Mermaid diagrams — all through the Figma REST API using a credential resolved via credential-brokers. The token never reaches the model; it resolves in-process at invocation time.
Requires:
figma1 gateReads Figma files, nodes, metadata, versions, comments, variables, and dev resources; renders frame images; posts comments; converts FigJam connector graphs to Mermaid diagrams.
Before the first API call, you confirm the Figma Personal Access Token is configured in credential-brokers. The agent checks that the credential resolves and reaches the target file.
You: Run credential-brokers setup if this is the first session, or confirm the existing token is still valid. Name the file key or file URL you want the agent to work with. This is a one-time setup per service — once the token is in place, every subsequent figma session resolves it automatically.
With the credential confirmed, the agent invokes the figma skill. It fetches the file structure, navigates to the target frame or component, and returns the design data — rendered image, node properties, variable values, or connector graph, depending on what you asked for.
You: Watch the fetch complete. If the agent returns data from the wrong frame — because a component name matches multiple instances in the file — redirect with the specific node ID or frame path. Figma’s file tree uses human-readable names that aren’t always unique; the node ID is the authoritative identifier.
The agent presents the extracted artifact — a rendered frame image, a CSS variable set, a Mermaid connector diagram, or a structured property dump. You review it at the G-output gate before passing it to the next step in your workflow.
You: Check that the extracted artifact matches the design you intended to capture. For FigJam diagrams, verify that all connectors and labels are preserved. For variable values, confirm they match the published (not draft) design system state. Pass the reviewed artifact to the next step — typically a design implementation task using the experience-design or core pack.
For each gate, everything you need to make a confident decision.
A valid token in credential-brokers, confirmed against the correct scope, and a file key the agent can resolve.
A token that worked on a different file but is scoped to a team the current file is not in. Or a prototype share link where the agent needs the original file link. Or a token that expired since the last session.
Figma API errors are opaque — 'access denied' doesn't tell you whether the token is invalid, expired, or scoped incorrectly. Confirming the credential before the session starts avoids a mid-session block that requires you to interrupt, reconfigure, and restart.
A frame render that matches the Figma canvas, a Mermaid diagram that preserves all connector relationships, and variable values that match the published design system state.
A frame render from the wrong variant or state — because Figma component instances can look identical in the file tree but render differently. Or a Mermaid conversion that drops connector labels because they were on a layer the agent didn't traverse.
Design data extracted incorrectly gets used to build the wrong thing. A wrong color value from the wrong component variant ships as a production style. Verifying at this gate costs five minutes; fixing the downstream result costs a full implementation loop.
agentbundle install --pack figma --scope user