Diagonal Swipe/Drag Gesture - Think Fruit Ninja Game?

Hey @Patrick_33 - I want to say right off the bat that I don’t think an animation or prototype of this nature is possible natively. There’s an on-drag motion available, but it would be a single motion only, and not ‘dynamic’ in the way I think you’re looking for: https://youtu.be/6Id4INKEwb8

So if I interpreted correctly, the flow is: center item > dragged into bucket > toast/pop up message alerting the object has been added to select bucket > dismiss the alert.

Are there multiple objects stacked in the center? Just trying to feel out more of what you’re accomplishing, just in case I misunderstood.

For the buckets – do you also want the ability to have the center item be put into multiple buckets?

Hey KSN, thanks for replying. Yes the integration seems tricky.

So imagine this like a game where you have 1 marble in the center (to keep it simple):

1. put the marble in 1 bucket it and show that it is inside the bucket
2. pull the marble out of the bucket and put it back to center
3. Once you put 1 marble into a bucket a new one will appear in the center, which can be placed into any bucket of your choice

I think that should cover the general logic of the moves I want to realized down the line. I find it important to mention that the marble can be moved all ove rthe place until you release it (lift your finger).

Besides the difficulty realising this in Figma, I do understand that this is totally possible in a finished app on any modern day 10-point touchscreen phone. Would you agree ?

Your idea sounds really interesting—kind of like slicing a watermelon in Fruit Ninja but with a structured drag-and-drop system! 🍉 Since Figma’s native drag gestures are limited to horizontal and vertical movement, achieving a freeform diagonal motion for placing fruits (or objects) into buckets will require some creative solutions.

Here are a few possible approaches:

1. Smart Animate & Overlays – If you have a limited number of buckets, you can set up different frames for each possible drag direction (diagonal, curved, etc.) and use Smart Animate to simulate smooth transitions—like dragging an apple 🍏 into a basket.

2. Variables & Expressions (Beta Feature) – Figma recently introduced variables, which might allow for dynamic movement when dragging a fruit (e.g., an orange 🍊) into its corresponding bucket. By using expressions, you could define movement angles beyond just straight lines.

3. Custom Plugins & Figma API – If you need true freeform slicing gestures (like cutting a pineapple 🍍 at any angle), you might need a custom solution using Figma’s Plugin API. JavaScript & WebGL could allow you to track movement dynamically and even reverse actions, like pulling a fruit out of a bucket.

4. External Tools (Framer/ProtoPie) – If you want a fully smooth slicing and dragging effect (imagine peeling a banana 🍌 and tossing it into a blender), tools like Framer or ProtoPie allow for physics-based dragging with diagonal gestures.