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.
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!
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.
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
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.
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
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.
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.
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!
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 āāā.
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),
Iām surprised that this feature hasnāt seen the light of day until now. Itās the mobile generation and the swipe (ā ā ā ā) is a must have.
I agree. Iām trying to use a screen where you need to swipe left to go to next screen, swipe right to go to previous screen.
If I use ādragā, it only works for one direction since canāt separate for both.