Changing one component by interacting with another component

Hello, I am new to Figma, just a beginner in learning about the variables and the interactions. I’m designing an interactive map mobile application, in which when I click on the location tags displayed on the map it will show the respective information of that tag on another component.

As shown in the image, if I click on the ‘tag 1’ it should display its information on the bottom blue section likewise for tag 2 and tag 3.
Please if anyone can tell me the way to do this, I would greatly appreciate it.

Hi, Aryan.

You can do this using variables and a trick using the variant properties of a component.

You need the following:

  1. A variable (string or number; For me, i use number since its easier)
  2. A component with variants (name it 0,1,2,3…)

Prototype steps:

  1. First, is add the variable on the property of the instance of the component (bottom-sheet)
  2. On the button and upon click, for btn1(set the variable to 1), btn2 (set the variable 2) and so on.

Once you do that, the bottom-sheet will automatically change to the (n) variant when clicked.

1 Like

Hey Raphael! Thanks a lot for your input it was really simple to understand. I tried it and it works now, again really appreciate your help.

1 Like