Integrations

Figma

Verified against Soffi ·

Status
Available
Availability
Every organization
Required role
Admin

When a design already exists, describing it to Soffi in words loses most of it. Connecting Figma lets anyone in a Workspace hand Soffi the design itself: Soffi sees the frame, reads the file's styles and components, and builds the change in your app with your own design tokens.

Connect Figma

Open Integrations in the left rail and choose Connect on the Figma card. Figma asks you to sign in and allow Soffi to read your files.

The connection belongs to the Organization and uses the Figma account that connected it. Soffi can open any file that account can open, and nothing else, so connect with an account that has access to your team's design files. Editors can see whether Figma is connected; only Admins and the Owner can connect, reconnect, or disconnect it.

Soffi asks Figma for read access only: file contents and frame images, plus the connecting account's name. It can't edit your files or leave comments in Figma.

In Soffi's message box, choose Attach Figma file and paste a link from Figma, such as https://www.figma.com/design/…. A link to a whole file works, and a link to a single frame is better: copy it from Figma with the frame selected, so Soffi works from exactly the screen you mean.

Soffi checks that it can open the file before attaching it. When it can, the design appears as a chip above the message box. Then ask for what you want, for example "build this empty state" or "match the spacing in this frame".

If Soffi can't open the file, she says so. The usual cause is that the connected Figma account doesn't have access to it; share the file with that account, or ask an Admin to reconnect Figma with one that does.

What Soffi takes from a design

For each linked design, Soffi gets an image of the frame and the file's structure: its name, its color, text, and effect styles, its components, and the design tokens extracted from it.

The image is what Soffi builds to. She matches the frame's colors, spacing, type, and layout, and reproduces them with your Project's existing tokens wherever one matches. She matches by appearance, not by name, because a Figma style called "Primary" isn't necessarily your app's primary color. When no token fits, Soffi uses the design's own value, and she tells you which tokens she chose. You can refine the result in the Style Editor or by asking for changes.

Disconnect or reconnect

Use the menu on the Figma card. Reconnect signs in to Figma again, and is how you switch to a different Figma account. Disconnect deletes the access Soffi holds, and Soffi stops reading your files. To remove the authorization on Figma's side as well, revoke Soffi from your Figma account settings.

Was this helpful?