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

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

The question should be specific, self-contained, and written in natural language.
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.