Skip to main content
This guide shows you how to connect a Figma design to Bilt. You will install the Bilt plugin, create a secure API key, add a Figma file, and attach selected frames in chat. After one person connects the file, other members of the Bilt project can use its frames without a Figma account.

​
Before you start

You need:
  • A Bilt account
  • A Figma account
  • Access to the Figma file you want to use
  • A Bilt project, unless you want to create a new project from the design

​
Step 1: Open the Figma setup in Bilt

If you already have a Bilt project:
  1. Open the project
  2. Open Settings
  3. Choose Figma
  4. Click Get plugin + API key
This opens the Bilt API-key settings in another tab.
The Figma tab in project settings with the Get plugin + API key button

​
Step 2: Install the Bilt Figma plugin

  1. Open the Bilt plugin in the Figma Community
  2. Click the button Figma shows to open or install the plugin
  3. Open the design file you want to use
  4. Start the Bilt plugin inside that file
The Bilt plugin in the Figma Community
The Bilt plugin page in Figma with the Run button

​
Step 3: Create a Bilt API key

The plugin uses a personal Bilt API key to identify your Bilt account. It does not receive your Figma password.
1

Create the key

In Bilt → Settings → API Keys, click Create API Key.
The API Keys settings page with the Create API Key button
2

Name the key

Enter a clear name such as Figma plugin, then click Create.
3

Copy it immediately

Click Copy. Bilt only shows the complete key once.
4

Add it to the plugin

Return to Figma and paste the key when the Bilt plugin asks for it.
The plugin asking for your Bilt API key
Treat the API key like a password. Do not put it in messages, screenshots, email, or shared documents. If it is exposed, revoke it in Settings → API Keys and create a new one.

​
Step 4: Add the Figma file to Bilt

  1. Keep the design file open in Figma
  2. Open the Bilt plugin
  3. Click Add this file to Bilt
  4. Wait for the plugin to finish
The connected plugin with the Add this file to Bilt button
The plugin sends the design information Bilt needs, including frame structure, names, text, styles, previews, and embedded images. It only reads the file when you start this action, and it does not change the Figma design.
Selecting which frames to push to Bilt
The file now appears under My files in the Bilt Figma frame picker.

​
Step 5: Connect the file to a project

​
Use the file in an existing project

  1. Open the Bilt project
  2. Click the + button beside the chat box
  3. Choose Figma frame
  4. Open My files
  5. Find the file
  6. Click Add to this project
The + menu in chat with the Figma frame option
The file picker with My files and the Add to this project button
The file now also appears under In this project.

​
Create a new project from the file

  1. Go to the Bilt dashboard
  2. Click the + button beside the prompt box
  3. Choose Figma frame
  4. Open My files
  5. Select the file and the frames you need
  6. Type what you want Bilt to build
  7. Send the message
Bilt creates the project and connects the selected file automatically.

​
Step 6: Attach frames in chat

  1. Click + beside the chat box
  2. Choose Figma frame
  3. Open a file
  4. Expand the correct Figma page
  5. Click one or more frames
  6. Click Attach frames
  7. Describe what Bilt should build or change
  8. Send the message
You can search for files and frames by name. In multi-select mode, double-clicking a frame attaches only that frame.
The frame picker with three frames selected and the Attach frames button
The chat composer with attached frame chips and a build instruction
Send it, and Bilt builds screens that match the frames:
A generated plant-detail screen matching the attached design frames
A generated stats screen with charts matching the attached design frames
Good prompts explain both the design and the expected behavior:
Attach only the frames needed for the current request. A focused selection makes it clearer which design Bilt should follow.

​
Pin frames you use often

When selecting several frames, enable Pin selected frames to project before attaching them. You can also manage pins in Settings → Figma → Pinned frames:
  1. Click + Pin frame
  2. Select the frames
  3. Click Pin to project
Pinned frames appear above the chat box for one-click attachment.

​
Refresh a file after the design changes

  1. Open the updated file in Figma
  2. Run the Bilt plugin
  3. Click Add this file to Bilt again
  4. Return to Bilt
  5. Refresh or reopen the Figma picker
  6. Attach the updated frame in your next message
You do not need another API key and you do not need to reconnect the file to each project.

​
Remove a Figma file

Open Settings → Figma.
  • Remove from this project disconnects the file from the current project and removes its pins. It stays under My files.
  • Removing it from My files removes it from your Bilt account and unlinks it from your projects. If nobody else added the same file, its stored design data is also deleted.
You can add the file again later through the plugin.

​
Troubleshooting

Make sure you copied the complete key beginning with bilt_live_. Bilt cannot show an old key again. Revoke the old key, create a new one, and paste the new value into the plugin.
Open the file in Figma and click Add this file to Bilt again. In Bilt, open the picker, switch to My files, and click refresh. Check that the plugin uses a key from the same Bilt account.
Open the file in Figma and click Add this file to Bilt again. Then refresh the picker or pin. You can still send the message, but Bilt receives less reliable design context until the file is refreshed.

​
Further reading