Need swipe gesture

Need swipe gesture (left and right) instead of drag on #prototyping, so i can present the exact micro interaction between each card on onboarding screen.

5 Likes

How would this be different from drag?

swipe is just like scrolling but it will trigger to move into another page in prototyping. for example, i long-swipe-left a card and it has micro transition from card into a red-line. just like delete a message on iphone. cmiiw

Or when i swipe up the page, it will has a micro transition for the big title into tiny title and has fixed position

Still, I don’t see how what you are describing is not possible to do with drag triggers. Regarding the toolbar, there already is this suggestion: "On Scroll" action for the prototype

Drag definitely gets the job done at a basic interaction level and very happy it was added. however, If the interaction was a bit more granular (eg. Drag: Left/Right/Up/Down) that would be super helpful. I’m often working on projects where I need the interaction to only trigger while dragging right but it will trigger regardless of the direction I drag which is not always ideal. I’m sure there are some future upgrades/features coming to prototyping and fingers crossed that this one is on the radar!

8 Likes

Currently, there’s only “drag” as an option… In contrast invision for example has left and right. Figma however, can add multiple actions to a single object/component.

A good example/use case would be designing a tinder/dating app where you want to swipe both left and right on the card and go back and forth, or any other use where you want to go “around” and “back and forth”

The current drag does not allow this type of setup, however you could make multiple invisible layers/drag points on top of the object and assign those left/right, but considering Figma has/allows multiple actions on an object already this would be a hack and not desirable. It would be a better practice to separate the drag/swipe function into left and right and use the current multiple action functionality.

Thank you.

3 Likes

You probably missed an update which made it possible (the same that allowed you to assign multiple triggers to one object). You can assign multiple drag triggers with multiple directions to one object. File: https://figma.fun/sN1OjW

More prototyping tips: https://figma.fun/GfJsF7

4 Likes

Wow, It does work! I got a 360/90 degree/quarter radius rotation going both directions with 4 screens…

Fantastic for something I’m making right now.

Impressive. Thank you for the heads up. I knew I could do multiple actions, but since it’s not explicit, I wouldn’t have known.

1 Like

Still, if there were choices for drag (left/right/up/down), it would make it usable in the variant components and we didn’t have to use multiple frames with the same data for a slide just like the one @Gleb made

2 Likes

What’s preventing you from using the same technique in variant components?

still, if we imitate what LinkedIn does. when I scroll up the page, the navbar and page header slide and hide. after that hide, if I scroll it up again, it still hides. but when I scroll it down, even a little, the page header and navbar will appear. is this can cover up the LinkedIn interaction?

You just described the suggestion I linked above.

1 Like

I need a drag down/up interaction for my overlay. from the default state you can do both, down shows more content, up shows less content. Will need to find a workaround.

Now there is no specific direction for dragging, if it is integrated then the mobile prototyping will be more interactive and interesting.

2 Likes

Hey @Debhyalok_Jeet1,

Thanks for the feedback! We’ll pass this along to the team for consideration. Don’t forget to also vote for your ideas, so the team can accurately gauge interest from the community! :point_up:

1 Like

Need to have swipe direction so wrong direction of swipe doesn’t trigger an outcome. This is useful for not only carousels but also to replicate back gesture of the phone. Up and Down scroll as input also important as some elements need to appear/change state as per scroll position of the page. So maybe not only directional scroll but also scroll position as input would be very useful. Currently for this behaviour to work, we need to add multiple pages with different scroll position and interact using “drag” or keyboard button like “↓”.

1 Like

i have a master component set as an overlay to a screen when i click a button on that screen and i want that overlay to expand to cover the whole screen when i drag up and back to the original size when i drag down. the master component is supposed to be scrollable so after the initial drag up to expand, another drag up should make it scroll up but here’s the case where another drag up returns it back to the original size (because we cant specify drag direction),