Skip to main content
Question

Send details from a variant instance's properties to a variable when opening overlay


I know, very specific title but, here’s what I want to achieve and don’t want to use excessive screens for my prototype:
I have a list of cards. Each card is a variant with some properties of the same instance, say “title” and “description” to it.

I want click each of these instance to open an overlay that also changes depending on what i clicked.
in simple words, i want the popup to restate parts of the thing i clicked on.

However, all these clickable instances are the Hover state of their element. I could manually make them each change some variable if they were on my canvas as that hover state, but they’re not, they’re default states, and only have that interaction of click to open overlay when they’re hovered.

This means I can’t even manually make each instance in my demo change variables to what it is before showing the overlay, as they’re not editable for me.

I looked around for other ways to get this effect with Component Properties but I can’t make those go into the variable!
Am I missing something? I feel like this is a common desired effect so I hope there’s some sensible way to do this.
Thanks!

This topic has been closed for comments

  • June 17, 2024

Gif of my basic idea, because I sure love to mince words


  • Figmate
  • June 19, 2024

Hi @Keren5, Thank you for reaching out and sharing screenshots of your prototype.

I noticed the “Card” component set in your screenshot, which includes two variants. I’m assuming the lower variant in the set is intended for the hover state since it seems to have a hotspot for an overlay interaction.

I’m not entirely sure what your goal is, but are you looking to apply a string variable when the overlay is opened, with the variable reflecting the text property contents of each instance in its default state?

If that’s the case, you can set a variable when the overlay opens by adding a Set variable action as part of multiple actions.
However, unfortunately, at the moment there isn’t a native method to automatically generate a variable from the contents of an instance property or to assign a string variable directly to a text property of an instance.

Currently, string variables can be apply variant properties in instances to switch between different variants within a component set. You can check more about here:
Modes for variables - String and number variables

As a side note, I stumbled upon a similar feature request made by another community member that might interest you: Allow assigning String variables to Text props in component instances
Additionally, one of our community members suggested using Apply string variable to prop plugin as a potential workaround in that post.
Feel free to explore this option at your convenience!

I hope this clarifies things a bit. If I’ve misunderstood anything, please let us know. Also, if anyone from our community has additional workarounds or suggestions, feel free to share them here.

Thanks again for reaching out.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings