Comment on page
Component states
Add states such as pressed and active to your UI elements.
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).
State | Types of element that support it | Gesture that activate it |
|---|---|---|
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)
[state:default]
[state:pressed]
[state:active]
📍 Where to add the tag: The group that contains the individual states
[state-set:INSERT-SET-NAME]
How to set it up:
- 1.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.
- 1.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!
Last modified 1mo ago