Skip to main content

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.

figma doubt


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.


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.

Reply


Terms & ConditionsCookie settings