🤝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:
Open an App and select an App Screen.
Begin the binding process.
Two primary modes of Data Binding are available:
API Binding: Choose from a dropdown menu of API collection requests to link your app's design pages and elements.
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.
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
Last updated