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

Option 1: Bravo tags

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! 🚀

Example setups

Default + pressed: navigation button

Default + active: menu item

Option 2: Figma variants

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.

💾 Example file

Duplicate the file below to see how to set it up!

Bravo Sample: Component StatesFigma

You can also duplicate this sample app right in Bravo Studio to learn more.