How to Add Like or Favorite Buttons in Your Bravo Studio App

Let your users interact with your content by liking items, saving products, or building a personalized favorites list in your mobile app. With Bravo Studio, you can implement this type of interaction visually, using Figma and Bravo Tags—all without writing a single line of code.

Here’s how to add a Like/Favorite button using Bravo's stateful component setup.

🎥 Watch the video

Step 1: Design Your Like Button in Figma

Create a component with two visual states:

• A default state (like an empty heart)
• An active state (like a filled heart)

There are two ways to create this:

1. Using Figma Variants:
   
   • Create a component with two variants labeled default and active using a state property.
2. Separate Components:
   
   • Design two individual components and place them in the same group.

Want to move faster? Use one of our free Figma templates or sample apps. These include ready-made components that you can easily customize and reuse in your own project.

Step 2: Add Bravo Tags

Once you have both states designed:

1. Group the two variants inside a frame or component group.
2. Add the following Bravo Tag to the group:
3. [state-set:likebutton]  // You can name this however you like
4. Inside the group, tag each variant like this:
   [state:default][action:remote]
   [state:active][action:remote]

These tags define the toggle behavior. Bravo Studio will switch between the default and active states each time the user taps the component.

Pro Tip: The tag structure here is the same one used for things like active tab menus.

Step 3: Import and Test

1. Import your Bravorized Figma file into Bravo Studio
2. Open your app in Bravo Vision and tap the like icon

You should see the component toggle between liked and unliked visually, confirming that your setup works.

This method works perfectly for:

• Liking or favoriting products
• Saving content like blog posts or meditation tracks
• Building custom lists or user preferences

📖 Learn More

For more help and advanced options (like connecting your Like button to an actual backend or saving state via API), check out the official Bravo docs.

‍