Component Variation Swipe Menu

Ask the community
1

I am attempting to include a swipe menu to a component variation (the top layer slides to the left to reveal 3 buttons underneath). I was hoping bake the swipe menu as a variation of a list item component, but when moving into -X axis causes issues.

Has anyone run into this problem and/or am I overcomplicating things

Thanks in advance,
Alan :slight_smile: :disguised_face:

2

As long as your variants are all equally sized it should work. My guess is that they are not equally sized, so you are seeing some odd behavior.

Any chance you can share an example file to troubleshoot?

3

So I actually figured it out… however I have new questions around the variations.

  1. If you open the swipe menu and tap the star icon, then i would like toggle the active state and switch to the appropriate variation

  2. If you tap the trashcan icon from the swipe menu (on the 3 item swipelist variation), id like to hide the list item from view. I was thinking of creating a new variable isDeleted=true, and just set everything to hidden.

Thank you for the response and I hope to hear from you again :slight_smile:

Here’s a working file:

4

Thanks for sharing! Both 1 and 2 are possible but for 2, you’ll need to make sure to wrap the rows in a vertical auto layout frame so you can see the collapse occur.

FWIW instead of using horizontal scrolling for the drag, you could also try Smart Animate and trigger it with a drag.

5

So worked on this some this afternoon, but i cant seem to get “change to” to work. Please see attached.

when setting up my interaction, when i choose change to, i see the options appear but they arent clickable so im unable to fully set the change to setting… any idea?

also one more thing… how can i close the menu if you interact with something else… i tried mouseout with a scroll to but havent had success

6

So you actually found a bug in Figma that probably should be reported. The workaround is to manually create an arrow to wire up the interaction.

Here’s a file (which you can duplicate to your drafts) that uses a few different techniques to achieve your use case. One thing that I did differently is that I set the clipping on the parent container instead of the variants themselves. This enables you to see the variants and wire them up a little more easily (which helps avoid the bug you’re running into). Hope this helps you think through your options for prototyping this.

7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.