Hey Ammar.

Yes, there is! In prototype interactions, there is an option called “on drag”.

You should design two states for your component, one collapsed and one expanded. then set the “on drag” prototype arrow. Make sure your animation is “smart animate”. Also, make sure your hierarchy of layers and naming in both states are the same. then, you’ll get what you want.

Is it possible to do that with a 3 states components?

I have a panel with 3 possible different layout according to the panel sizes, but I’m not sure how to get a nice transition/interaction

Yes, you can. Figma will automatically pick what direction is the most logical for the state change. Let me cook an example for you tomorrow :)

Just use On Drag & Smart Animate between 2 frames or 2 variants, here’s a demo:

Just use On Drag & Smart Animate between 2 frames or 2 variants, here’s a demo:

 

Hi. Could you please share some file with this example. Thank you.

this may help:

different task but same concept

Thank you ​@iago !

Just use On Drag & Smart Animate between 2 frames or 2 variants, here’s a demo:

 

Hi. Could you please share some file with this example. Thank you.

Hi this is the file: