> ## 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.

# Figma Integration

> Connect real Figma files and use selected frames while building your Bilt app

Bilt connects your Figma designs directly to the app building process. Add a Figma file once, choose the frames you want, describe what the app should do, and Bilt can use the design as context while it builds.

## How it works

| Stage             | What you do                                                      | What Bilt does                                                               |
| ----------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| **Connect Figma** | Run the Bilt plugin in Figma and click **Add this file to Bilt** | Copies the design information needed to understand the file                  |
| **Choose frames** | Attach one or more frames in a Bilt chat                         | Gives the agent access to the exact screens or components you want it to use |

## What the Figma connection provides

The Figma plugin sends more than a screenshot. For the file you add, Bilt can receive information such as:

* Frame and layer names
* Layout and structure
* Text content
* Styles and design tokens
* Rendered previews
* Images used inside the selected design

This helps Bilt understand how the design is put together instead of guessing from a flat image.

The plugin only sends data when you run it and choose **Add this file to Bilt**. It does not edit your Figma file or continuously read it in the background.

## My files and project files

After you add a file through the plugin, it appears under **My files** in the Figma frame picker.

* **My files** contains the Figma files you personally added through the plugin.
* **In this project** contains files that have been connected to the current Bilt project.

You can reuse a file from **My files** across multiple Bilt projects. Once it is connected to a project, any member of that Bilt project can attach its frames in chat without needing a Figma account.

## Attaching and pinning frames

Use the **+** button beside the Bilt chat box, then choose **Figma frame**. You can:

* Search for a file or frame
* Open pages inside the Figma file
* Select one or several frames
* Attach the selected frames to your message
* Pin frames you use often for one-click access in future messages

The attached frame tells Bilt exactly which part of the design your request refers to. For example:

```text theme={null}
Build the onboarding flow from these Figma frames. Keep the layout and visual style, and make the buttons move between each screen.
```

## Keeping designs up to date

Bilt stores a prepared copy of the Figma information so frames load quickly in chat. If the design changes, open the file in Figma and click **Add this file to Bilt** again.

Re-adding the file refreshes its changed frames and thumbnails. Bilt shows a warning when an attached or pinned frame is missing or out of date.

## Permissions

| Action                                             | Who can do it                                                      |
| -------------------------------------------------- | ------------------------------------------------------------------ |
| Add a Figma file through the plugin                | A person with access to the Figma file and a personal Bilt API key |
| Connect one of their Figma files to a Bilt project | The person who added that file                                     |
| Attach a connected frame in chat                   | Any member of the Bilt project                                     |

## Important limitations

* A normal Figma URL does not give Bilt access to the design. Add the file through the plugin first.
* Bilt uses a prepared copy of the design. Run **Add this file to Bilt** again after the design changes.
* Sending a frame with an out-of-date or missing copy still works, but Bilt receives less reliable design context.
* Figma integration may not appear if it is not enabled for your account yet.

## Guide

For a complete walkthrough, see [connect Figma to Bilt](/docs/guides/connect-figma).