Component states
Add states such as pressed and active to your UI elements.
Last updated
Add states such as pressed and active to your UI elements.
Last updated
There are 2 ways to implement states in your design file: Figma variants or Bravo tags. For Figma, you can use both. For Adobe XD, only with tags.
There are 3 possible states that you can apply to an element. Usually only two are used for one element (i.e. default + pressed or default + active).
Default
All
None, the element that displays by default
Pressed
All, best for: buttons, navigation elements
When pressed
Active
All, best for: menu items, like button, checkboxes
When pressed
The element with the tag will display when the user interacts with the appropriate gesture.
📍 Where to add the tag: Any UI element layer (not page level or container level)
📍 Where to add the tag: The group that contains the individual states
How to set it up:
Create a version of the element for each state it will have.
2. Add the respective state tag to the layer name of each element state (if the element is made up of multiple layers, group them together add the tag to the name of the group/frame)
3. Position the element states on top of each another so that there is a smooth transition when each state appear. The layer order does not matter.
4. Group the elements together. Add the “state-set” tag to the layer name. Remember to add a set name in the tag. For example, [state-set:back-button]
5. Update your file in Bravo Studio and test it out in Bravo Vision! 🚀
Default + pressed: navigation button
Default + active: menu item
For Figma files only.
Create a version of the element for each state it will have.
2. Turn each element state into a Figma component.
3. Select all the elements, click “Combine as variants” on the right panel in Figma
4. Rename the property as state.
5. Rename the default state element as default.
6. Rename the pressed state element as pressed, or the active state element as active.
7. Create an instance from each Figma component.
8. Position the element states on top of each another so that there is a smooth transition when each state appear. The layer order does not matter.
9. Rename each instance as the state they represent. For example “default” and “pressed”.
10. Group the elements together. You can rename the group or leave as is.
11. Update your file in Bravo Studio and test it out in Bravo Vision! 🚀
If you are creating an element similar to a checkbox or “like” button, where toggling the active state should interact with the backend — check out this tutorial on how to connect the state to the backend using remote action.
Duplicate the file below to see how to set it up!
You can also duplicate this sample app right in Bravo Studio to learn more.
