Figma Integration
The Figma integration connects a Specor workspace to your Figma designs so you can link design frames directly to the nodes they implement, and see a node’s spec while you’re designing. It works through the Specor Figma plugin: the plugin reads the open file locally and pushes what Specor needs, so Specor never has to call Figma’s API on your behalf.
It covers four things:
- Frame linking — from inside Figma, attach a selected frame to any node (a Feature, Flow, and more).
- Spec in Figma — the plugin shows the selected frame’s Specor spec (its needs, rules, acceptance criteria, and flows) while you design.
- Design coverage — features with no linked frame are surfaced by the Coverage agent, so design gaps don’t go unnoticed.
- Inline preview — a thumbnail on the node in Specor, with an optional live embed and a one-click “Open in Figma”.
Why a plugin
Reading designs through Figma’s REST API is rate-limited per Figma seat and shared across a whole workspace, and it requires storing a Figma OAuth token. The plugin avoids both: it runs inside the Figma editor, reads the open document directly (no rate limit, no stored token), and pushes each frame’s structure and a rendered thumbnail to Specor. Design data enters Specor when a designer runs the plugin — never by Specor reaching into Figma.
Prerequisites
- A Specor workspace on a plan with the Figma integration enabled.
- The Specor plugin installed in Figma.
- A Specor API key (create one in Settings → API keys). Your Figma file access is enforced by Figma itself — if you can open the file, you can sync it.
Connecting the plugin
There is no OAuth step and nothing for a workspace admin to connect. Each designer:
- Installs the Specor plugin and runs it from Figma’s Plugins menu.
- Pastes their Specor API key, the API base URL, and their workspace ID into the plugin once (stored locally in Figma), then picks a branch.
Linking a frame to a node
- In Figma, select the frame you want to link.
- In the Specor plugin, choose the Specor Feature (or other node) it implements — or search for one. The plugin links them.
Frame links are stored as part of the node’s history, not as a side note. Linking or
unlinking a frame is a versioned change: it shows up in diffs, is included in commits,
is reversed by a rollback, and travels across branches on merge — exactly like any
other edit to a node. A link made on a feature branch doesn’t appear on main until the
branch is merged.
Linking requires the Editor role. Viewers can see linked designs but not change them.
Keeping design in sync
The plugin’s Sync pushes each frame’s layer/text structure and a freshly rendered thumbnail to Specor. Because the plugin renders the image locally, Specor stores it directly — so thumbnails are stable and never expire. Design in Specor is as current as the last time a designer ran the plugin; opening the plugin again re-syncs the file.
Spec in Figma
Select a frame that’s linked, and the plugin shows that node’s Specor spec — its constraining Rules, validating Acceptance Criteria, and belonging Flows — so the source of truth is visible while you design, not one tab away. If a frame isn’t linked yet, the plugin offers a search box to find and link the right node.
Design coverage
When the workspace’s plan has Figma enabled, the Coverage agent adds a check: a Feature with no linked design frame is surfaced as an informational suggestion. This never adds noise for teams that manage design elsewhere.
Spec → design drift
For a linked Feature, Specor can compare the pushed design against the spec — flagging where the design and the spec disagree (a rule the screen doesn’t honor, a state the spec never mentions). It runs on the structure and image the plugin pushed, and is charged like other AI agent runs. If a Feature is linked but hasn’t been synced from the plugin yet, Specor asks you to sync it first rather than analyzing nothing.
Preview
On a node’s Design panel in the Specor web app, the linked frame is shown as a thumbnail by default — served from Specor, so anyone on the team can see it with no Figma login. Two extra options are available:
- Open in Figma — opens the exact frame in a new tab.
- Live preview — an opt-in embedded, interactive view. Because most Figma files are private, the embed requires the viewer to have Figma access to that file; the thumbnail remains the default so there’s never a login wall in the way.
Security
- Specor stores no Figma credentials — the plugin authenticates to Specor with your Specor API key, and Figma file access is enforced by Figma.
- The plugin only ever reads the open Figma file and pushes a structure outline and a rendered thumbnail; Specor never calls Figma’s API.
- Pushed design data is workspace-isolated like the rest of your product graph.
Permissions required
| Action | Minimum role |
|---|---|
| View a linked design / read spec in the plugin | Viewer |
| Link / unlink a frame and sync designs | Editor |