Figma
Plug Figma into Autonomy and use design frames as the visual baseline for test steps.
Connect Figma and a test step can compare the live product against the frame it was designed from. Autonomy renders the frame server-side and extracts design facts from it, so the check knows the intended geometry, colors, and type — not just a flat image.
How the Figma plugin works. Autonomy connects through the Figma REST API rather than running code inside the Figma editor, so there is nothing to install from the Figma community page. You supply a personal access token once, then paste frame URLs where you need them.
Connect Figma
- In Figma, open Account Settings → Personal Access Tokens and create a token with read access to files and nodes.
- In Autonomy, open Settings → Integrations and find the Figma card.
- Click Configure API Key, paste the token, and click Test connection. Autonomy verifies it against Figma before saving.
- Click Save key.
The token is encrypted at rest and never returned to the browser or to a runner. Replacing it is a write; there is no read-back.
Per-environment tokens
A workspace-level key covers everything by default. If different environments should read different Figma files — a separate design org for a white-labelled build, for example — override the key per environment under Environments → edit an environment → Figma integration. The environment key wins for runs in that environment.
Attach a frame to a step
- Open the test case and go to the Visual References tab.
- Select the step the reference belongs to.
- Click Add Figma frame and paste the frame URL.
The URL must be a full Figma link that includes a node-id:
https://www.figma.com/design/<fileKey>/<title>?node-id=1042-317Both figma.com/design/... and the legacy figma.com/file/... form are accepted. Open the frame in Figma and use Copy link — a bare file URL without a node has no frame to render.
What Autonomy fetches
When a reference is added, a background job resolves it:
- A PNG render of the node at 2× scale, stored as the baseline image.
- Design facts from the node subtree: frame width, height, and name; fill colors as hex; text styles including font family, weight, size, line height, and sample text; corner radii; and auto-layout padding and gaps.
Design facts are what let the comparison reason about intent. The vision model reviewing a mismatch is told the frame's actual color and type values, so it can distinguish "the accent is the wrong green" from "this screenshot was captured mid-animation".
Each reference shows its resolution state in the Visual References tab. A reference that failed to resolve can be retried in place. Unresolved references are re-attempted automatically when a run starts.
Keeping baselines current
The reference is a snapshot, not a live link. When the design changes, re-resolve the reference so the baseline matches. Treat an intentional design change as a two-part update: ship the UI, refresh the reference.
Limits
- The frame picker lists up to 24 top-level frames per file or node.
- Manually uploaded reference images are capped at 25 MB. Figma renders are not affected by this limit.
- The token needs read access to every file you reference. A token scoped to one team cannot render a frame from another.
Troubleshooting
"No Figma API key configured"
No key is set for the workspace or for the environment the run used. Add one under Settings → Integrations, or set an environment override.
"Figma URL is missing a node-id parameter"
You pasted a file URL rather than a frame link. Open the frame in Figma, copy its link, and paste the whole URL including the query string.
"Figma rejected the token (403)"
The token was revoked, expired, or does not have access to that file. Generate a new one and re-run Test connection before saving.
The baseline looks right but every run mismatches
Check the viewport. Compare a desktop frame against a desktop capture. See Visual Checks for tolerance and viewport guidance.