# Creating an app with Adobe XD

The [Bravo plugin for Adobe XD](https://www.bravostudio.app/bravo-studio-plugin-for-adobexd) allows you to create and update Bravo projects from your Adobe XD file.

{% hint style="warning" %}
This is the only way to **create & update** XD projects with Bravo. You **cannot** connect with an URL or use the "Update" icon in the project page.
{% endhint %}

## 🔓 Sign in from the Bravo plugin

{% hint style="success" %}
Make sure you are logged into [Bravo Studio](https://projects.bravostudio.app/login) before starting.
{% endhint %}

 1\. Install the the [Bravo Studio plugin](https://adobe.com/go/xd_plugins_discover_plugin?pluginId=310537e8) in Adobe XD.

<div align="left"><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fdocs%2F-MfhbCHOLzKq8FtbueUH%2F-MfhbIxtU0GPw0qprZC7%2FScreenshot_2021-03-29_at_17.52.33.png?generation=1627484143962387&#x26;alt=media" alt=""></div>

2\. Open a [bravorized](https://docs.bravostudio.app/set-up-design/bravo-best-practices) XD file. Click on the plugin icon in the lower-left corner to access the Bravo Studio plugin.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fdocs%2F-MfhbCHOLzKq8FtbueUH%2F-MfhbIxvS-zDN14eYD4j%2Ftutorial2.png?generation=1627484144035680\&alt=media)

&#x20;3\. Click **Manage Bravo Project** > `Sign in`

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FYJIlj4AZEjnI3yexCHjE%2FFrame%2017.png?alt=media\&token=42e83715-0ad7-4256-97a6-8c9b0c0ee30a)

4\. Click `Open browser`

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FK559aBrMn0XJ3HiVugsw%2FFrame%2018.png?alt=media\&token=796432cc-3151-4976-be56-8187a00ff513)

5\. A browser window will open with a code, check if it's the same code that appears in the plugin > click `Confirm`

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FxdicpJUOv9tkBYRE5crb%2FFrame%2022.png?alt=media\&token=fa96cc1b-ec5d-4444-8a43-47bec4ac23a5)

6\. Once you see a success page, you can close the browser page and return to XD.

## 🆕 Create a new project

&#x20;1\. To create a new Bravo project with your XD file, click `Create`. Change the project name if you'd like.

{% hint style="info" %}
You cannot change the project name after it's created.
{% endhint %}

<div align="left"><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FgxCtJBcviFeWbOjw3ADx%2FFrame%2019.png?alt=media&#x26;token=1795c20d-4b64-49dd-9420-fcf527535a1a" alt=""></div>

2\. In Bravo Studio, you will see the newly created project as the most recent project on the **Projects** page.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fdocs%2F-MfhbCHOLzKq8FtbueUH%2F-MfhbIxq2ZEUl4ozrE31%2Fprojects.png?generation=1627484143946450\&alt=media)

3\. In the Bravo plugin, you will now see the project appear in the list of projects that you can **update**.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FsHB0v8yahNMHEftvSRuR%2FFrame%2021.png?alt=media\&token=30d0b222-2393-4b4b-b84f-8acf6c4fe7c2)

{% hint style="info" %}
You can create as many Bravo projects from the same XD file as you want. Just keep in mind that these projects are linked to the same file.
{% endhint %}

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 %}

## 🔄 Update a project

&#x20;1\. To update a Bravo project with your XD file, select the project from the list of projects that you can update.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FJMz0YwYC2rWFtmf3PoHE%2FFrame%2020.png?alt=media\&token=78e96c79-c8f3-4fc4-8388-8a70172fb307)

2\. Click `Update`

3\. You will see the changes automatically reflected in Bravo Studio and Bravo Vision.

{% hint style="warning" %}
You must update your project from XD, you cannot update from Bravo Studio.
{% endhint %}

{% hint style="info" %}
If you don't see the changes in Bravo Vision, long press (in Bravo Vision) > click `Update with Bravo`.
{% endhint %}