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.
Best answer by Raphael_M
Hi, Aryan.
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…)
Prototype steps:
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.
