> For the complete documentation index, see [llms.txt](https://docs.bravostudio.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bravostudio.app/get-started/your-bravo-app-projects/create-a-project/creating-an-app-project-with-figma.md).

# Creating an app with Figma

There are two ways to import your Figma file to Bravo: importing it through our platform and by using our Figma Bravo Plugin.

### Creating an app with Figma from our website

Let's explain how to import the following sample design file:

{% embed url="<https://www.figma.com/community/file/1134788542858691041/tutorial-your-first-bravo-app>" %}

&#x20;1\. Go to the **Apps** page, click create a new app.

![](/files/HOwEwW4H8N2KM3lvJOCo)

&#x20;2\. In your Figma file, click <mark style="color:blue;">`Share`</mark>, then <mark style="color:blue;">`Copy link`</mark>. Make sure the permission for "Anyone with the link" is <mark style="color:blue;">`can view`</mark>.

![](/files/2xUj4PxajJiZu95ZbF5t)

&#x20;

3\. Back in Bravo Studio, paste the share link of your Figma file. Click <mark style="color:blue;">`Connect Bravorized Figma file`</mark>

![](/files/8rSKBU3I8EAlAXaVgfS5)

&#x20;4\. Wait for Bravo to do its magic. It's transforming your Figma design into native app screens.

![](/files/6g5en2eRSzF5HVFjC5gd)

5\. Once the project is successfully created from your file, you will see a preview of the app screens created from your Figma file.

{% hint style="warning" %}
Ran into an error? Check out the [troubleshooting page](/good-to-know/troubleshoot/errors-when-importing.md).
{% endhint %}

![](/files/7JEsAnuHOyFlxHjf3QSg)

&#x20;6\. Check out your app with the [Bravo Vision](/get-started/bravo-vision-previewer.md) previewer app. 🚀

{% content-ref url="/pages/-MflEqUBYacF9qHsoQL6" %}
[Bravo Vision previewer](/get-started/bravo-vision-previewer.md)
{% endcontent-ref %}

### Creating an app with Figma by using Bravo Plugin

The Figma Plugin allows you to import your current Figma design into Bravo.

#### :unlock:Sign in from the Bravo Plugin

1. Open your Bravo Plugin and select the <mark style="color:blue;">`Import`</mark> tab.
2. Click on <mark style="color:blue;">`Sign In`</mark> to connect to your Bravo Studio account.

<figure><img src="/files/55Cl9L3wzAciaU04HfHH" alt="" width="375"><figcaption></figcaption></figure>

3. Click on <mark style="color:blue;">`Open browser`</mark> and <mark style="color:blue;">`Confirm`</mark> the given code from the Figma plugin and the opened browser.

<div align="center"><img src="/files/I9KiL2GAYKQXQqiiIRK3" alt="" width="375"> <figure><img src="/files/ec3lJPzJlCjpD6ENUDN2" alt="" width="375"><figcaption></figcaption></figure></div>

&#x20;4\. Once confirmed, this confirmation message will appear. Close the window and return to the plugin.

<figure><img src="/files/1tIBUbFRgEUZu4ZBboQ9" alt="" width="375"><figcaption></figcaption></figure>

#### :new: Create your New Project

5. Click on <mark style="color:blue;">`Create New Project`</mark> to import a new Figma design to Bravo.&#x20;

{% hint style="info" %}
Make sure that your design has at least a frame or a UI element for it to be imported.
{% endhint %}

<figure><img src="/files/RzrjqLba5R3etlKt4gfw" alt="" width="375"><figcaption></figcaption></figure>

6. Wait for Bravo to do its magic. It's transforming your Figma design into native app screens.

<div><img src="/files/02Oj8b931fGEqY38Jy8O" alt="" width="375"> <figure><img src="/files/i0YbeQGzoOCKq7mOUuOZ" alt="" width="375"><figcaption></figcaption></figure></div>

7\. Once the project is successfully created from your file, in Bravo you will see a preview of the app screens created from your Figma file.

{% hint style="warning" %}
Ran into an error? Check out the [troubleshooting page](/good-to-know/troubleshoot/errors-when-importing.md).
{% endhint %}

#### :repeat: Update your  project

8\. Select <mark style="color:blue;">`Update Project`</mark> to sync your Figma file with Bravo whenever you make any modifications.

<figure><img src="/files/bspgSBt07EZYsqRz1fR1" alt="" width="375"><figcaption></figcaption></figure>

9. In addition, you have the option to create a new project using the same Figma file. Simply click on the <mark style="color:blue;">`Create another new project`</mark> link.

<figure><img src="/files/r9Uc9DskLZHqymGdlhLs" alt="" width="375"><figcaption></figcaption></figure>

&#x20;10\. Check out your app with the [Bravo Vision](/get-started/bravo-vision-previewer.md) previewer app. 🚀

{% content-ref url="/pages/-MflEqUBYacF9qHsoQL6" %}
[Bravo Vision previewer](/get-started/bravo-vision-previewer.md)
{% endcontent-ref %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.bravostudio.app/get-started/your-bravo-app-projects/create-a-project/creating-an-app-project-with-figma.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.