> ## Documentation Index
> Fetch the complete documentation index at: https://bilt.me/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Connect Figma
> Add a Figma file to Bilt and use its frames while building your app
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.
## Step 2: Install the Bilt Figma plugin
1. Open the [Bilt plugin in the Figma Community](https://www.figma.com/community/plugin/1646501627216086982)
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
## 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.
In **Bilt → Settings → API Keys**, click **Create API Key**.
Enter a clear name such as `Figma plugin`, then click **Create**.
Click **Copy**. Bilt only shows the complete key once.
Return to Figma and paste the key when the Bilt plugin asks for it.
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 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.
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 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.
Send it, and Bilt builds screens that match the frames:
Good prompts explain both the design and the expected behavior:
```text theme={null}
Use these frames for the sign-up flow. Match the spacing, colors, and typography. Make Continue open the next screen and show a clear error when a required field is empty.
```
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.
A normal `figma.com` URL is not enough. Add the file through the Bilt plugin, then attach the frame using **+ → Figma frame**.
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
* [Figma Integration feature](/docs/features/figma-integration) — What the connection provides
* [Prompting guide](/docs/guides/prompting) — How to describe the app and request changes