Infinite Rotation Animation with Figma interactive components

แชร์
ฝัง
  • เผยแพร่เมื่อ 6 ม.ค. 2022

ความคิดเห็น • 58

  • @UpNorthProductions
    @UpNorthProductions ปีที่แล้ว +20

    Thanks for great tutorial! I found that if you use "Linear" instead of "Ease Out", the transition is less jumpy, especially when going back to the original component.

    • @sarahigbinosa3004
      @sarahigbinosa3004 ปีที่แล้ว +3

      OMG! Thank you for this. This is why I enjoy reading the comment section for hidden gems. Using linear made it smoother.

    • @vipulsuthar3796
      @vipulsuthar3796 6 หลายเดือนก่อน +1

      Thanks a lot!!!

  • @odaicletpiccinini2934
    @odaicletpiccinini2934 3 หลายเดือนก่อน +2

    For those struggling like me, after you create your variants, do command + D then alt + drag variant into the frame where you want it displayed. Also, Felix -- THANK YOU so much for making this video! I appreciate your explanations and details a lot.

  • @BrandiHess13
    @BrandiHess13 6 หลายเดือนก่อน +1

    Thank you for this. I've been trying to figure out how to create a looping animation and this video was very easy to follow and recreate.

  • @loomonda18
    @loomonda18 11 หลายเดือนก่อน +2

    Thank you for the tutorial and thank you for clarifying you need to make sure you're clicking on the element itself, rather than the frame! So if anyone is having issues, make sure to double check that part! This even works on any element (I rotated stars)!

  • @Yuchelstheanalyst
    @Yuchelstheanalyst 11 หลายเดือนก่อน

    You are a life saver. I finally got my text to rotate.💃🏽💃🏽💃🏽

  • @boski.creations
    @boski.creations ปีที่แล้ว

    thank you sooo much!! It was a really helpful tutorial😀😀😃😃

  • @user-no7uy3tz7c
    @user-no7uy3tz7c ปีที่แล้ว

    Thanks! great tutorial

  • @kenneumann4900
    @kenneumann4900 ปีที่แล้ว

    thx exactly what i nedded

  • @the-flying-owl
    @the-flying-owl ปีที่แล้ว

    Thank you Felix.

  • @user-vt6ji3uu7k
    @user-vt6ji3uu7k 9 หลายเดือนก่อน

    Thanks for this!

  • @nathanielluckysmith4504
    @nathanielluckysmith4504 2 ปีที่แล้ว

    Thanks Alot really helpfull

  • @DDashit
    @DDashit 2 ปีที่แล้ว

    thank you!

  • @khoatran9469
    @khoatran9469 ปีที่แล้ว +1

    thank you for your video, spent 2 days to find the error why i set rotation but it's not active. i set rotation for variant, now i can solve it

  • @carolineseandersen454
    @carolineseandersen454 ปีที่แล้ว

    I'm not able to check off the "Enable interactive components." Only "Device" and "Background" are displayed in my menu. How can that be?🤔

  • @timotheegros-desormeaux2831
    @timotheegros-desormeaux2831 9 หลายเดือนก่อน

    Hello, thank you for this tutorial. It is not rotating for me. It just fades to the next position... Any ideas ?

  • @adied7725
    @adied7725 2 ปีที่แล้ว

    set up the same but timing is delayed ....it jumps? settings 1ms sec delay animation 4000

  • @peacenature827
    @peacenature827 7 หลายเดือนก่อน

    finally i got from here..thank you for helpful tutorial..

  • @nazrinnasimiart
    @nazrinnasimiart 2 ปีที่แล้ว +1

    hi, it worked out but did not rotate infiinitely.

  • @adeyeratriumph6497
    @adeyeratriumph6497 2 ปีที่แล้ว

    Wow, thanks boss 🙌

  • @oZenakos
    @oZenakos 2 ปีที่แล้ว

    cheers mate

  • @ahmeddoghri1576
    @ahmeddoghri1576 12 ชั่วโมงที่ผ่านมา

    Love the accent!

  • @nixas1819
    @nixas1819 10 หลายเดือนก่อน +1

    Ive done the exact same thing as in this tutorial but I cant get it to work. Dont know why :/

  • @StrangeCat69
    @StrangeCat69 4 หลายเดือนก่อน

    You can make an endless animation without stops just by changing the animation type from "Easy out" to "Linear"

  • @syamili5381
    @syamili5381 ปีที่แล้ว

    thank you brother

  • @adesinaoluwasanmi5793
    @adesinaoluwasanmi5793 2 ปีที่แล้ว

    great one

  • @khadijatbakare4050
    @khadijatbakare4050 2 ปีที่แล้ว

    It is very nice

  • @user-cv8fx2dh7m
    @user-cv8fx2dh7m 2 ปีที่แล้ว

    you are awesome

  • @elisabeth.isabella.h
    @elisabeth.isabella.h ปีที่แล้ว +1

    Hello! Thank you for this Video. I have a question: I have problems with the step at 00:40... creating variants. In the newest Figma-Version there don't appear more frames so it wasn't possible for me that 4 versions appear like it happens in your Video. Could you help me please?

    • @saliemantoon6213
      @saliemantoon6213 ปีที่แล้ว

      Right click on it..main component..add variant

    • @ayoolafelix
      @ayoolafelix  ปีที่แล้ว

      @@saliemantoon6213 thanks. Elisabeth, did this work?

  • @lokiakhdaybhangrapal
    @lokiakhdaybhangrapal 2 ปีที่แล้ว +3

    The text doesn't rotate in circular motion when I press play. can you help? Not sure what I am missing.

    • @ilesanmioluwaseun9112
      @ilesanmioluwaseun9112 2 ปีที่แล้ว +2

      Same here too. I have been trying for hours now and I have watched the video all over again to see if I was missing something.

    • @Nats-724
      @Nats-724 2 ปีที่แล้ว

      @@ilesanmioluwaseun9112 @Daania Rao
      May at the "Prototype" you will see the "Show prototype settings",
      when you click it, will see the checked off "Enable interactive components".
      so if you check it, should be work.
      mine was that problem.
      I don't know why figma has that function...

  • @darelnc1422
    @darelnc1422 8 หลายเดือนก่อน

    To whoever did everything and yet the animation doesn't start when pressing play. You have to press the RESTART btn at the bottom right (key R)

  • @erfin704
    @erfin704 ปีที่แล้ว

    thanks

  • @Prabh_cc
    @Prabh_cc หลายเดือนก่อน

    ya thats it.... ya thats it.... ya thats it.... ya thats it.... ya thats it.... ya thats it....
    what was that

  • @shivambankar1079
    @shivambankar1079 2 ปีที่แล้ว

    its not working , dunno why!!
    !

  • @Mister.Keating
    @Mister.Keating 2 ปีที่แล้ว +1

    This did not work, you didn’t spin it in the golden rectangle

  • @lepermessia4
    @lepermessia4 9 หลายเดือนก่อน

    thnx

  • @Minakann
    @Minakann ปีที่แล้ว

    How did you get to the animation frame?

    • @ParallaxC137
      @ParallaxC137 ปีที่แล้ว +1

      select the object, press SHIFT + A

  • @edking5125
    @edking5125 2 ปีที่แล้ว +3

    Mine doesn't seem to rotate, all the settings are the same, weird eh

    • @amithvenkataramaiah928
      @amithvenkataramaiah928 2 ปีที่แล้ว

      Messing with the Smart Animate timing worked for me

    • @ayoolafelix
      @ayoolafelix  ปีที่แล้ว

      You might be missing something, kindly check again.

  • @user-fi8tl8ym6r
    @user-fi8tl8ym6r ปีที่แล้ว

    how to export this animation into gif or svg for apply in app

    • @StrangeCat69
      @StrangeCat69 4 หลายเดือนก่อน

      Lottifiles extension

  • @nnanadavid9676
    @nnanadavid9676 ปีที่แล้ว

    Why are we creating components?

    • @ayoolafelix
      @ayoolafelix  ปีที่แล้ว

      Because it makes it easy to reuse them

  • @aPositiveDay7
    @aPositiveDay7 2 ปีที่แล้ว +3

    Mine never work... lol Why....

    • @jambonbeurre2023
      @jambonbeurre2023 2 ปีที่แล้ว

      Me too, I did everything as it shows and it doesnt animate

  • @user-ny1cs1vi9q
    @user-ny1cs1vi9q ปีที่แล้ว +1

    How did you duplicate the thing at 4:06-4:08?

    • @HA-bs2hu
      @HA-bs2hu ปีที่แล้ว +1

      same question

    • @0xsmithx0
      @0xsmithx0 ปีที่แล้ว

      shift +a

    • @annevaleriee
      @annevaleriee 8 หลายเดือนก่อน

      He created an instance, hold down the ALT key and drag the image into the frame

  • @calmingthemind599
    @calmingthemind599 ปีที่แล้ว +1

    for me it's not animated