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.
We use 3 different kinds of cookies. You can choose which cookies you want to accept. We need basic cookies to make this site work, therefore these are the minimum you can select. Learn more about our cookies.
