🤝Data binding types

Bravo excels in bridging the gap between Figma design and backend development Easily integrate real-time data through APIs, Bravo enables the development of dynamic and interactive user experiences.

Data Binding

Data Binding is where you connect the API requests with the app design, or alternatively allows direct manipulation of Figma text within Bravo using Static binding.

To initiate Data Binding:

1. Open an App and select an App Screen.

2. Begin the binding process.

Two primary modes of Data Binding are available:

1. API Binding: Choose from a dropdown menu of API collection requests to link your app's design pages and elements.

2. Static Binding: This mode offers flexibility by allowing the addition of variables sourced from the backend or other API requests.

1. API Binding

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

2. Static Binding

The main benefit of using the static sinding is that you can add variables used from the backend or other API requests. For example, to get the Resort name such as “Welcome to the ${name}”.

When using static binding, ensure that an API request is set up on the same screen.

Toggle between API binding and Static binding mode on the Data icon: When employing Static Binding, ensure an API request is configured on the corresponding screen.

• Blue: API binding.

• Grey: Static binding.

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

pageAPI binding typespageBind data to design for a list pagepageBind data to design for a detail page

Advanced

pageBind multiple API requests to one screenpageHow to connect my API to a mobile actions📄pageSend form input to a databasepageRemote actions: trigger an API request with a UI element