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).

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!

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

Last updated