🤝

Connect data to your design

Bravo excels in bridging the gap between Figma design and backend development, enabling the creation of complete mobile apps. Easily integrate real data via APIs for dynamic, interactive experiences.

Data Binding

Data Binding is where you connect the data from API requests or the request themselves to your app design or you can also overwrite the Figma text, with any content directly in Bravo with the static binding option -- connecting the backend to the frontend.
To enter Data Binding mode: open an app, click on an app screen, and you can now start binding.

API Binding

Select from the dropdown the API collection requests you want to connect your app design pages and items.

Static Binding

The main benefit of the static binding is that you could add variables used from the backend or other API requests, for example, to get the user name such as “Welcome ${name}
Toggle between API content and Static content mode on the Data icon. Blue will be when the API content is available, and grey when disabled. 💡 To remove the static content and get Figma content back just toggle to the API mode since it's the default state in Bravo Studio.
Static binding mode
Tip: You could also use the static binding for getting a response directly into a stateful components toggle with True or false states without the need to build an API request to do that.

API Data binding tutorials

Beginner

Advanced