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

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2F096930Yav1dVwaSAEKlu%2FFull%20Screenshot%20\(2\).png?alt=media\&token=10a0f5e1-6af3-473a-86c1-dfb13ff8f238)

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

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FX92wABhYMZ5hPT5mgHqr%2FScreen%20Recording%202023-11-20%20at%2014.40.41.gif?alt=media\&token=e06bd994-0c9e-4f14-9b31-a4736b58687e)

&#x20;

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

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FzUBQpGWaVJf2B3H3Ey3S%2FFull%20Screenshot.png?alt=media\&token=3966d277-560a-484c-b89f-25c76afd1634)

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

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FRVhHdH2zpgUvSjl8f36P%2FScreenshot%202023-07-20%20at%2017.21.45.png?alt=media\&token=abaa8f94-3ed0-406e-96c3-bc5c1bcc9dbe)

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](https://docs.bravostudio.app/good-to-know/troubleshoot/errors-when-importing).
{% endhint %}

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FC0NmwM0Tsw1PnjpFXync%2FScreenshot%202023-11-20%20at%2015.06.22.png?alt=media\&token=a831de14-980c-48e4-b011-5e045f992822)

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

{% content-ref url="../../bravo-vision-previewer" %}
[bravo-vision-previewer](https://docs.bravostudio.app/get-started/bravo-vision-previewer)
{% 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="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2Fk5h6woFEcYxX53xhSp8g%2FScreenshot%202023-06-02%20at%2009.42.34.png?alt=media&#x26;token=51ef8a1f-71f2-42a7-b274-b8317d9c432b" 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="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2F9dwmGbluDkxqee80ptTy%2FScreenshot%202023-06-02%20at%2009.42.50.png?alt=media&#x26;token=a95b3a12-e047-43d4-96d1-ddee0931c829" alt="" width="375"> <figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FAdIp0wPDe0lHXtHjiHqM%2FScreenshot%202023-06-02%20at%2009.43.18.png?alt=media&#x26;token=5595a11b-dc37-43b7-825b-b02a68aa8287" 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="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FVHrkkNWs6ytCT7M8eKgu%2FScreenshot%202023-06-02%20at%2009.43.26.png?alt=media&#x26;token=4d9a059f-98e2-49f3-b461-160d273d7c0c" 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="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2Fhq2gpeHdZsz3TgOnlE44%2FScreenshot%202023-06-02%20at%2009.43.44.png?alt=media&#x26;token=643a9f53-9ca3-401c-918f-7f2c08bbab29" 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="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2Fp15QpEtnScroqesl10e2%2FScreenshot%202023-06-02%20at%2010.13.19%20(2).png?alt=media&#x26;token=973af41a-4950-47a4-8e15-c75021f98436" alt="" width="375"> <figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FEdQNhDOHHgHKKz0Hd62h%2FScreenshot%202023-06-02%20at%2009.44.29.png?alt=media&#x26;token=4570114a-a206-49ec-b29a-a78b6ed49ef5" 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](https://docs.bravostudio.app/good-to-know/troubleshoot/errors-when-importing).
{% 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="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FXEwNC95cRSU5ZjB3tvMM%2FScreenshot%202023-06-02%20at%2009.46.48.png?alt=media&#x26;token=32245a7e-3787-445e-affa-afc47b9a6541" 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="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FeWEFGx7NYpkuAUMjhtna%2FScreenshot%202023-06-02%20at%2009.47.23.png?alt=media&#x26;token=21bf0702-0ca7-4f42-8a79-eee8973acc51" alt="" width="375"><figcaption></figcaption></figure>

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

{% content-ref url="../../bravo-vision-previewer" %}
[bravo-vision-previewer](https://docs.bravostudio.app/get-started/bravo-vision-previewer)
{% endcontent-ref %}