Skip to main content
Question

Combine Local Variables and Interactions

  • May 14, 2024
  • 1 reply
  • 193 views
Jordi2

I’ve been experimenting with local variables following some online guides. I encountered an issue that I believe you might be able to help me resolve. I’m using local variables to control the visibility of elements based on the device configuration (tablet, mobile, or desktop).

When I link this variable to an inner frame, such as a hamburger icon, it displays correctly for mobile and tablet but not for desktop.

If I attempt to add interaction behavior to the component, such as changing the variant based on clicking or tapping the hamburger icon, I face a challenge. Since this layer is affected by a variable, I can’t add interaction directly within the component. I can’t create the component so generic that all instances, whether desktop, mobile, or tablet, follow the same behavior. Instead, I have to apply the interaction for each instance individually.

Is there another approach to achieve this general behavior while still using local variables to control component visibility?

Regards

This topic has been closed for replies.

J
Figmate
  • Junko3
  • Figmate
  • May 16, 2024

Hi @Jordi2, Thanks for writing in!

From what I understand, you’re looking to add interactions to a layer that already has a variable attached and you want different behaviors depending on the device?

If I’ve got that right, one approach you might consider is using conditionals. If you haven’t tried it yet, here are a few resources you can learn the details:

Also, it sounds like you might be working on a responsive design. If that’s the case, our community has a wealth of design files that might inspire you or provide practical examples. Here’s a sample search results for a responsive menu: File results for responsive menu
You can explore on your own.

Hope it helps. If I’ve misunderstood anything or if you need more specific advice from designer in our community, it might be beneficial to share a recording showcasing your design challenge.

Ideally, the entire window should be visible, with the relevant layers expanded, properties, layer panels, and associated variable and interaction settings visible.
This allows the community to better visualize and understand your situation.

Thanks again for reaching out!

Terms & ConditionsCookie settings

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