Skip to main content

Figma

Connect Figma and you can paste a link to a Figma frame into Betty's chat while you work on a Design System. Betty reads the frame's layers, text, colors, fonts, and spacing, looks at a rendered image of it, and builds a Module from that instead of from a written description.

Betty only reads Figma. She never changes your files.

If you don't see Figma under Settings, then Betty AI, then Connectors, it isn't turned on for your Organization yet. Contact us to enable it.

Before you start​

You will need:

  • an admin user in Better Email
  • a Figma account that can open the files you want Betty to read, ideally with a Full or Dev seat (see Which Figma account to use)

1. Create a personal access token in Figma​

  1. In Figma, open the account menu at the top left of the file browser and choose Settings.
  2. Open the Security tab and find Personal access tokens.
  3. Click Generate new token and give it a name, for example "Better Email Betty".
  4. Pick an expiry. When the token expires, Betty stops reading Figma until an admin pastes a new one.
  5. Under Scopes, set File content to Read-only. Leave every other scope off.
  6. Generate the token and copy it. Figma shows it only once.

Figma's own guide: Manage personal access tokens.

2. Connect Figma in Better Email​

  1. Open Settings, choose Betty AI, then Connectors.
  2. Open Figma.
  3. Paste the token into Personal access token and click Save.

The Connection card now shows the status, when the token was last updated, and who connected it. Everyone in the Organization can see this page. Only admins see the token field.

Better Email never shows the token again. To replace it, paste a new one and save. Disconnect deletes the stored token, and Betty stops reading Figma for everyone in the Organization.

Which Figma account to use​

Betty reads Figma as the person who created the token. She can open any file that person can open, and nothing else.

Figma limits how many API reads a token gets, based on the token owner's seat:

  • A Full or Dev seat allows roughly 10 to 20 reads a minute.
  • A View or Collab seat allows only a handful a month, which runs out after one or two Modules.

Reading a frame uses one request, or two when it contains images. A rendered image or an exported asset uses one more. Reading the same frame again within 10 minutes uses none.

A shared design or service account with its own Full or Dev seat works better than a personal account, because the connection keeps working when someone leaves. See Figma's API rate limits for details.

Build a Module from a Figma frame​

  1. In Figma, right-click the frame you want and choose Copy link to selection.
  2. In Better Email, open the Design System in the Design System Editor and open Betty's chat.
  3. Paste the link with a short prompt, for example: "Build a new hero Module from this frame."

Betty then:

  • reads the frame for its structure, copy, colors, fonts, and spacing
  • looks at a rendered image of the frame
  • exports logos, icons, and photos from the frame and uploads them to the Design System
  • builds the Module, takes a screenshot of it, and compares it with the Figma frame to fix what differs

Your Design System still wins. Betty uses its existing patterns, such as buttons and spacing, and maps Figma's colors and fonts to the Design System's own values.

If you change the design in Figma afterwards, tell Betty. Otherwise she may reuse what she read in the last 10 minutes.

Anyone who can work on Design Systems can paste Figma links. They don't need their own Figma account.

A link copied from the browser's address bar or the Share button usually points to the whole file. Betty needs a link to one frame or layer, which is what Copy link to selection gives you. Links to branches work too.

Keep frames to one email section or one email at a time. A very large frame takes longer to read, and Betty reads it in parts.

AI Blocks​

If your Organization uses AI Blocks in Campaigns, you can paste a Figma frame link into an AI Block's prompt too. Betty uses the frame as the design for that Campaign's Module, adapted to the Design System's colors and fonts.

Troubleshooting​

  • Betty says Figma is not connected. An admin needs to add a token under Settings, then Betty AI, then Connectors, then Figma.
  • Betty says Figma refused access. The token has expired or been revoked, or its owner can't open this file. Create a new token with File content set to Read-only, from an account that can open the file, and save it.
  • Betty says Figma is rate limiting the token. Wait a minute and try again. If it keeps happening, the token probably belongs to a View or Collab seat. Replace it with one from a Full or Dev seat.
  • Betty asks for a different link. The link points to the whole file. Copy the frame's link with Copy link to selection.