How To Create Drag and Drop Interaction On Figma

Поділитися
Вставка
  • Опубліковано 20 лип 2021
  • In this very short tutorial, I'll be showing how to create a basic drag and drop interaction using the figma design tool.
  • Наука та технологія

КОМЕНТАРІ • 29

  • @dezine570
    @dezine570 2 роки тому +7

    Your tutorial is the only one I found that was helpful. Thank you!

  • @melodyhope1621
    @melodyhope1621 2 роки тому +6

    Great tutorial! Thank you! Wasn't expecting to be able to learn it in just 2mins!

  • @rachelboxes
    @rachelboxes 2 роки тому +2

    awesome tutorial - short and sweet. thank you!

  • @liceagadavid
    @liceagadavid 2 роки тому +1

    Exactly what I needed, thank you!

  • @asizdacoolrolla
    @asizdacoolrolla Рік тому

    Really helpful, and saved me in the nick of time. Really appreciate it !

  • @WhoTheFuckIsKrusty
    @WhoTheFuckIsKrusty Рік тому

    Thanks! Very helpful

  • @gabba64884
    @gabba64884 2 роки тому

    Wow, many thanks!

  • @sturmx96
    @sturmx96 5 місяців тому

    Thank you, that was helpful

  • @vihaan9121
    @vihaan9121 22 дні тому

    thanks man🤩

  • @pcell_
    @pcell_ 2 роки тому

    thank you!!

  • @nevioth
    @nevioth 2 роки тому +4

    Awesome! Could you share the project?

  • @bowiejackson
    @bowiejackson Рік тому

    thankyou!

  • @ainirivargas1344
    @ainirivargas1344 2 роки тому +1

    graaaaaaaciaaaaaaaaaas!!! te mereces un like. suscripción y compartir!

  • @mywayforum
    @mywayforum 2 роки тому +7

    I have actually a problem with doing the drag n drop. It works fine for the initial animation but when I'm dragging it. It just instantly switches order without the 'hovering/dragging' animation. I have everything set like you do. Smart animate where it's suppose to be. Do you have any idea what might be wrong?

    • @KingNLGames
      @KingNLGames 2 роки тому +2

      same problem here

    • @mywayforum
      @mywayforum 2 роки тому +1

      @@KingNLGames I got the answer. Since I was moving objects that looked exactly the same instead of actually changing the position of the frames themselves I was actually editing different frames so that they would look like the ones I wanted to move. So the solution is to actually move the frame you want to move on the last screen instead of creating a new frame that looks identical :) I hope this will help you ;)

    • @KingNLGames
      @KingNLGames 2 роки тому

      @@mywayforum yeah i found that out too hahaha, i hate figma for prototyping but i had to use it for school.

    • @sds_net
      @sds_net 2 роки тому +2

      My issue wasn't that my two objects were different objects or had different names - the problem was I nested the object inside a group, two different groups actually: one group in the first start frame and moved it within another group in the destination frame. This was the problem. If you want to have the drag animate, make sure the element you're using as the trigger is not nested within a group either in the start frame or the end frame.

    • @yaelch.3987
      @yaelch.3987 2 роки тому

      ,@@sds_net It's not even working for me if I had to ungroup everything :( @DeeN23

  • @oposkainaxei
    @oposkainaxei Рік тому

    What language is this?

  • @drich811
    @drich811 Рік тому +1

    Is there an English version of this video. I can’t hear and I can not understand the accent.

  • @lunaticz0r
    @lunaticz0r Рік тому +2

    how did you people understand his voice? holy heck ...

    • @manuzark
      @manuzark Рік тому

      I was thinking that I was the only one, god

  • @9271356072
    @9271356072 Рік тому

    Awesome tutorial.. make the copies sequentially, like screen1, then copy 1 to make 2nd, and copy 2nd to make 3rd. Then tweak 1st card in second screen. Then move the position of 1st card on last screen as 4th card. This way figma will remember what to animate.

  • @isabelwhite3478
    @isabelwhite3478 Рік тому

    Thx, I love it, it is short and helps me a lot for my job!

  • @robertfirebaugh2874
    @robertfirebaugh2874 2 роки тому +3

    Smart way to hack it but its not real responsive drag and drop because user can't drop it in other places. @figma please support real drag and drop

    • @dexla4400
      @dexla4400 2 роки тому +2

      It may be why Figma call this product "Prototyping" instead of a no-code builder