Skip to main content
Solved

Figma Prototype Animation-Swipeable Drawer

  • June 18, 2025
  • 1 reply
  • 66 views
kmkm988

Does anyone know how to make a swipeable drawer in Figma without overlaying the first layer?


Here’s a link to an example video:: https://www.dropbox.com/scl/fi/tmhjrom56idi5zrghmojf/Swipeable-Drawer-1.mp4?rlkey=jgizkzbb9zrgmodnxiw2szm1i&st=1r8bhrdg&dl=0

 

Best answer by driftingsteps

You can do the following:

  1. Stack your layers based on your needs. Set up the before and after states of your draggable layer.
     
  2. Select the draggable layer, go to prototype mode. Drag a noodle from it to the after state frame (the main frame, not the layers inside it). Set the trigger to "on drag", and animation to "smart animate".
     
  3. On the after state frame, select the draggable layer, draw a noodle back to the before state frame, set the trigger to "On drag" and make sure the animation is "smart animate" as well.
     
  4. Test the prototype from the before state frame, try dragging the draggable layer, and see if that's the intended result. Tweak the animation timing, curves, and layer properties like opacity, background color, etc, based on your needs.
      https://www.loom.com/share/5c081329cf544813ae373bcef587bfdc?sid=c2e91415-f120-4e04-93a7-17e7d7f0fd55

     
View original

    1 reply

    driftingsteps
    • driftingsteps
    • New Participant
    • 11 replies
    • Answer
    • June 19, 2025

    You can do the following:

    1. Stack your layers based on your needs. Set up the before and after states of your draggable layer.
       
    2. Select the draggable layer, go to prototype mode. Drag a noodle from it to the after state frame (the main frame, not the layers inside it). Set the trigger to "on drag", and animation to "smart animate".
       
    3. On the after state frame, select the draggable layer, draw a noodle back to the before state frame, set the trigger to "On drag" and make sure the animation is "smart animate" as well.
       
    4. Test the prototype from the before state frame, try dragging the draggable layer, and see if that's the intended result. Tweak the animation timing, curves, and layer properties like opacity, background color, etc, based on your needs.
        https://www.loom.com/share/5c081329cf544813ae373bcef587bfdc?sid=c2e91415-f120-4e04-93a7-17e7d7f0fd55

       

    Reply


    Terms & ConditionsCookie settingsAccessibility statement

    Cookie policy

    We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

     
    Cookie settings