Skip to main content

Hi all,


I’m trying to prototype an interactive map+card list interface, where you can click on a map pin and have the corresponding card scroll to the top and visually change in some way to denote that it’s selected.


The cards in my list are all instances of the same component, and they have a “state” variant (default, selected) with a visual border change.


I’ve had no issue with creating the on-Click interaction to scroll the list to the corresponding card. What I’m stumped on is how to add the component state change to the on-Click trigger.


When I try to create a variable for the component variant, the on-Click action changes ALL instances of the component, not the specific one associated with the specific map pin.


Logically, I want it to be something like “onClick, set variable ‘state’ of target instance to ‘selected’”.

Hi @Emily_Baldi, Thanks for reaching out about this. I’m not completely sure about your variable settings, but it sounds like you applied a variable to the component and update it through interactions.


In that case it also update any other elements that are linked to that same variable, so I suspect all instances have been updated.

One suggestion I have is to try creating a separate variable for each instance, allowing them to update individually.

You can check more about here : Use variables in prototypes


I know it might not be exactly what you’re aiming for, but I came across an example called “Add an error message for empty selection states” on the Advanced Prototyping Examples page.

The design have two instances and guide you through create two variables that apply to each instance. Please take a look when you get a chance!


If the information above doesn’t quite help, feel free to explore our community on your own. You might find a design file that inspires you here: https://www.figma.com/community/


I hope this gives you a bit of assistance. Please let us know if there’s anything I’ve misunderstood. Also, if anyone from our community has further insights or tips, don’t hesitate to share!


Thanks,

Terms & ConditionsCookie settings