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.
You can do this using variables and a trick using the variant properties of a component.
You need the following:
- A variable (string or number; For me, i use number since its easier)
- A component with variants (name it 0,1,2,3…)
- First, is add the variable on the property of the instance of the component (bottom-sheet)
- 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.
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.