Figma Tutorial : How to create animated splash screen with lazy loading effect in Figma.

Поділитися
Вставка
  • Опубліковано 19 гру 2024

КОМЕНТАРІ • 37

  • @allshadesofojaay
    @allshadesofojaay 26 днів тому

    Beautiful, can't wait to try this out!

  • @SanusiAbdulmuiz-l4r
    @SanusiAbdulmuiz-l4r 2 місяці тому

    Thanks for making this video.
    I just started my UI design training and will definitely try this out.

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

    very informative, also if someone not able to animate that ring, instead of selecting the variant select the eclipse (which can found by clicking on the right arrow with the varient) and then change the angle.

  • @ThatIkoroduTeenager
    @ThatIkoroduTeenager 2 місяці тому

    thank you so much for this tutorial.... my goal is to be as good as you and I'm taking your tutorial and implementing step by step

  • @gunikasharmaa
    @gunikasharmaa Рік тому +3

    Thank you so much for explaining it with such ease.. enjoyed learning this.

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

      You are most welcome. of cos there is even a shorter way to achieve this in two frames but have to break it down in multiple screens for easy understanding

  • @neleenapaul2686
    @neleenapaul2686 2 місяці тому

    Thank you for this tutorial. Will definitely try it and ping you

  • @iknowishare-9705
    @iknowishare-9705 Рік тому

    Amazing tutorial...

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

    Thanks a lot!! You rock, mate!

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

    Impressive. Thanks for the video

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

    supper thanks
    its soo detailed

  • @CY_Videos
    @CY_Videos 3 місяці тому +1

    The design is very creative, I don't know if I can share the link to facilitate the follow-up exercises, thank you!

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

    thank you very much for this tutorial

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

    This is so cool and amazing. Thanks for the video.💯💥💥

  • @EswariNekkanti
    @EswariNekkanti 10 місяців тому

    Inside the second circle i'm not getting to make arc as I'm not able to find that dot or small circle

  • @АлександрСосо-щ1б
    @АлександрСосо-щ1б 2 роки тому +1

    awesome!

  • @EswariNekkanti
    @EswariNekkanti 10 місяців тому

    How to make that arc???

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

    Thanks a lot!

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

    Hello! thanks for the video. Why are my animations not smooth even though I do the exact same thing? thank you

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

      Maybe it's from your prototype settings, you may have to review that.

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

    And how can I make this animation run on my app. I did it all but is still in figma. I'd like to fit it to my splash screen app

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

      Please can you rephrase your question so I can understand it better

  • @aleshinloyesanjo3630
    @aleshinloyesanjo3630 Місяць тому +1

    My own component is not loading. The eclipse is just stagnant as default. What am i doing wrong? 😭

    • @allshadesofojaay
      @allshadesofojaay 24 дні тому

      I had the same issue but figured it out when I watched the video again. He said to click on the ellipse itself when changing the angle, and not the border housing it. So when you click on any variant, open it up on your "layers" panel and click on the Ellipse inside to change the angle. That way, the animation will work. Hope it helps.

    • @allshadesofojaay
      @allshadesofojaay 24 дні тому

      I had the same issue but figured it out when I watched the video again. He said to click on the ellipse itself when changing the angle, and not the border housing it. So when you click on any variant, open it up on your "layers" panel and click on the Ellipse inside to change the angle. That way, the animation will work. Hope it helps.

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

    Hi Kingsley, thank you for the tutorial. I have an issue with my outcome design, the loading part is still and not in motion. What could be the problem? (I've done everything the same)

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

      You have to select the layer it self and not the cycle box then twist to 90 degrees, 180 degrees and -90 degrees. If you are still having issues lemme know

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

    how I can export the transition wipe as gif

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

      Download a plug-in called GIF Export. Right click and go to find more plug-in then search for the above mentioned plugin