How to create Loaders and Loading Animations in Figma

Поделиться
HTML-код
  • Опубликовано: 8 янв 2025

Комментарии • 121

  • @AlissonBirck
    @AlissonBirck 2 года назад +6

    Brother, thank you so much. I've spent 1 hour trying to do this until I finally figured out what I was doing wrong. Turns out that if you spin the outside component it doesn't work, so you gotta spin the circle itself!

    • @WillBrettDesign
      @WillBrettDesign  2 года назад +1

      Glad you figured it out and the video was helpful! 🙌

    • @Alex-le8lf
      @Alex-le8lf 2 года назад +6

      Bro you just saved my mental state I hope you will get a nice house and well paid job and hot wife bless you

    • @AlissonBirck
      @AlissonBirck 2 года назад +1

      @@Alex-le8lf hell yeah! Glad I could help!!!

    • @nielsvandijk6535
      @nielsvandijk6535 2 года назад +1

      Thank you so much!! I had the same problem. You saved me hours of frustration.

    • @AlissonBirck
      @AlissonBirck 2 года назад

      @@nielsvandijk6535 fuck yes!! Glad to help!

  • @WillBrettDesign
    @WillBrettDesign  3 года назад +2

    Thanks to everyone that commented asking. Comments really help my videos reach more people.
    Here as promised is the Figma file: www.figma.com/community/file/1067400109585574609/Loader-Animations

    • @fysean
      @fysean 2 года назад

      I’m a total rube, and you skipped over the most difficult part of this process - how did you group the components into “component 1” and make variants, and then how can the component 1 in frame 2 only show one part of that component?

  • @thez00t6
    @thez00t6 2 года назад +1

    Great video mate. This video really opened my eyes

  • @leranovikova1282
    @leranovikova1282 Год назад +1

    Awesome tutorial! I wish I could see this earlier

  • @ukramedia
    @ukramedia 2 года назад +1

    Great work, Will! I wish I had your accent.

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Thanks Sergei and Vlad! Looking forward to using your AE tools in future videos 🙌

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Thanks so much for your kind comment Ukramedia! I have a favor to ask. I have been shortlisted for a design award and it's the last day of voting. I need to get as many votes as possible to win and would love it if you could help me out. creativepool.com/annual/2022/shortlist/#EmergingTalent

  • @alobataiwo4378
    @alobataiwo4378 6 месяцев назад

    Great tutorial. Thanks 👍

  • @michaelgolden4370
    @michaelgolden4370 3 года назад +1

    Thank you for sharing. Your content is great!

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Thanks so much for your kind comment. I have a favor to ask. I have been shortlisted for a design award and it's the last day of voting. I need to get as many votes as possible to win and would love it if you could help me out. creativepool.com/annual/2022/shortlist/#EmergingTalent

  • @fabbbber
    @fabbbber 3 года назад +1

    That's great, Will! Thank you for sharing :)

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Thanks so much for your kind comment. I have a favor to ask. I have been shortlisted for a design award and it's the last day of voting. I need to get as many votes as possible to win and would love it if you could help me out. creativepool.com/annual/2022/shortlist/#EmergingTalent

  • @ktjane24
    @ktjane24 2 года назад +1

    So cool!

  • @WillBrettDesign
    @WillBrettDesign  3 года назад

    Half way there. Will share the file at 10 requests in the comments 🙌

  • @alecros9816
    @alecros9816 Год назад

    I'm currently making an app for an online course and although I'm able to preview it, I'm still unsure how to add it to my loading screen frame???

  • @creadigma360
    @creadigma360 2 года назад +2

    Hi, great tutorial, thank you! I made my custom loader but now I don't know how to export it for the web, like and svg file, a gif image or something, I have no idea, never used figma before...

    • @WillBrettDesign
      @WillBrettDesign  2 года назад +1

      Hey 👋
      Checkout my new series on Motion Design as this will teach how to do exactly that 🙌

    • @WillBrettDesign
      @WillBrettDesign  2 года назад +1

      Thanks so much for your kind comment. I have a favor to ask. I have been shortlisted for a design award and it's the last day of voting. I need to get as many votes as possible to win and would love it if you could help me out. creativepool.com/annual/2022/shortlist/#EmergingTalent

  • @rishikeshjha1357
    @rishikeshjha1357 2 года назад +1

    Hi Will, thank you for the video. I enjoyed it, however in the second example, how do I fit the wave inside a circle, I tried using pen tool to delete the line crossing the boundary but it doesn't work, could you help me with that?

    • @WillBrettDesign
      @WillBrettDesign  2 года назад +1

      Hey Rishikesh, thanks for your comment.
      It’s hard to help without seeing exactly what you are doing but I think you can probably solve this by grouping the items together and then using an additional circle as a mask applied to the group.

    • @rishikeshjha1357
      @rishikeshjha1357 2 года назад

      @@WillBrettDesign Yes, I duplicated the circle and masked it. It worked. Thank you so much :)

    • @WillBrettDesign
      @WillBrettDesign  2 года назад +1

      Awesome! Glad I could help.
      Please do share my videos so I can help others too 🙏

    • @rishikeshjha1357
      @rishikeshjha1357 2 года назад

      @@WillBrettDesign Sure I will

  • @jamesyi8692
    @jamesyi8692 2 года назад +1

    HI, this is super cool. I manage to create the rotating circle animation but I cant seem to use it in a hifi prototype. What do I do after creating a loading animation?

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Hey James, are you able to invite me to your file so I can take a look?

    • @jamesyi8692
      @jamesyi8692 2 года назад +1

      @@WillBrettDesign OHH i watched your other videos and figured it out! thank you.
      ill have to watch all your videos actually, they are super helpful. Im new to UX and im working on building a portfolio.

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      @@jamesyi8692 Awesome! Glad you figured it out! Yes please do watch them, let me know what you think and also please do feel free to request videos too. Always looking for new video ideas.

  • @iamraymondyip
    @iamraymondyip 2 года назад +1

    Got the file from community, thanks! How do you resize it? Can't seem to figure out how to make it smaller. The first one with the angular gradient. Thanks!

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      The idea with the file is that it’s a learning tool. So I’d suggest looking at how the components are made and then have a go at recreating yourself at the size you want with your own styles and flourishes.

    • @iamraymondyip
      @iamraymondyip 2 года назад +1

      @@WillBrettDesign Thanks! Got it, i actually made my own afterwards and worked like a charm. Newish to Figma so getting the hang of it. Your file definitely helped in learning quickly!

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      That’s awesome! So pleased you can make these now!

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Thanks so much for your kind comment. I have a favor to ask. I have been shortlisted for a design award and it's the last day of voting. I need to get as many votes as possible to win and would love it if you could help me out. creativepool.com/annual/2022/shortlist/#EmergingTalent

  • @vasavigarg9978
    @vasavigarg9978 2 года назад

    great video really helpful
    Mini Feedback: the dramatic music in the background is a bit distraction, makes it hard to understand what you are saying

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Thanks for the feedback, will resolve for future videos

  • @maroquio
    @maroquio 2 года назад

    Could you please share your project? Mine is frozen! No animation at all! :(

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Projects available for free from the figma community

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      www.figma.com/community/file/1067400109585574609

  • @maquirlopez
    @maquirlopez Год назад +1

    Hi! I love the animation but I don't understand why I'm following all the steps correctly but when I put the animation into a frame isn't works :( If you can help me I will appreciate a lot. Greetings from Argentina!

  • @beastalete
    @beastalete 2 года назад

    Hi! Do you create loading screen for customer? Thanks

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Yes this is something I can support you with

  • @aminpak2304
    @aminpak2304 2 года назад

    Hi
    Thank you for sharing this!
    I made it like yours but in my loader the animation has interruption, it is not smooth like yours. I don't know why🤔

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Hard to know without taking a look, feel free to invite me to your file

    • @WillBrettDesign
      @WillBrettDesign  2 года назад +1

      Hey Amin, I think you just invited me to the prototype. Can you invite me to the actual figma file so I can see how you built it.
      I have a suspicion it's your layer names are different. For smart animate to work layer names need to be identical in each frame.

    • @aminpak2304
      @aminpak2304 2 года назад

      @@WillBrettDesign Thanks so much! Yes, I changed the layer names and it works. But still have a delay at the end of the animation loop.
      I changed your role to editor

  • @samduss4193
    @samduss4193 5 месяцев назад

    to send figma animation dirctly to project is that simple ?

  • @mischugo
    @mischugo 2 года назад +3

    Thanks a lot! Very interesting. But, it does not move and I have no idea why not :-(

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Thanks so much for your kind comment. I have a favor to ask. I have been shortlisted for a design award and it's the last day of voting. I need to get as many votes as possible to win and would love it if you could help me out. creativepool.com/annual/2022/shortlist/#EmergingTalent

  • @ogbuomerugged4442
    @ogbuomerugged4442 2 года назад

    Nice work, thank you! But I have small challenge I gat a video I wan to recreate but it's hard how to make a moving light change color from fort and back?

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Thanks so much for your kind comment. I have a favor to ask. I have been shortlisted for a design award and it's the last day of voting. I need to get as many votes as possible to win and would love it if you could help me out. creativepool.com/annual/2022/shortlist/#EmergingTalent

  • @velislavivanov5077
    @velislavivanov5077 2 года назад

    Hey, Will. Thanks for the tutorial! I followed it closely and even downloaded your file, but for some reason I can't make the animation smooth. It just goes step 1 > step 2 > step 3 > step 4 > step 1 >... . There is no smooth transition and animation between the steps. Smart animate just doesn't make the animation smooth. Any ideas?

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      I can’t really help without seeing what you’ve done. But often this is due to the layer names being different. Make sure they are the same so figma knows the layer is rotated rather than swapped out

    • @velislavivanov5077
      @velislavivanov5077 2 года назад

      @@WillBrettDesign Figured it out. Don't know if this is intended or not, but I recreated the 4 steps of the spinner and applied the rotation before I made them into a component set. When I try to rotate them individually after they are already in a component set it doesn't work for me. If it's intended, I am not sure why, and this makes editing more complex components a bit of a pain, if you already build them, have set interactions and then you want to change something afterwards. Let me know if you have any thoughts here.

  • @ivonaneubeck9966
    @ivonaneubeck9966 2 года назад +1

    I don't know what I did wrong :/, I followed all of the instructions and checked with the file you shared and my loader is not moving, help please!

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Hey Ivona,
      Are you able to share a link with me? I can take a look. Don’t share a link here, you can email me directly :)

    • @ivonaneubeck9966
      @ivonaneubeck9966 2 года назад

      @@WillBrettDesign Thank you for the reply! Yes! Sending email now !:)

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      @@ivonaneubeck9966 Found the issue. I've put a comment and example in the Figma file

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Thanks so much for your kind comment. I have a favor to ask. I have been shortlisted for a design award and it's the last day of voting. I need to get as many votes as possible to win and would love it if you could help me out. creativepool.com/annual/2022/shortlist/#EmergingTalent

  • @brookewebster3789
    @brookewebster3789 2 года назад +1

    Hey Will, this is so cool!! Is there a way to export as a gif or something like that? Thanks!!

    • @WillBrettDesign
      @WillBrettDesign  2 года назад +1

      Oh Brooke you just read my mind! I will be launching a whole series on exporting animations using Lottie soon! But will also show how to export as a Gif too.
      I’ve been a little quiet on RUclips recently but I have a been planning loads so make sure you have the bell enabled so you get the notifications or just check back soon

    • @brookewebster3789
      @brookewebster3789 2 года назад

      @@WillBrettDesign Oh super, I will have to look out for that! Thank you :)

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Thanks so much for your kind comment. I have a favor to ask. I have been shortlisted for a design award and it's the last day of voting. I need to get as many votes as possible to win and would love it if you could help me out. creativepool.com/annual/2022/shortlist/#EmergingTalent

  • @abdulkadirbala2339
    @abdulkadirbala2339 2 года назад

    how do you export it

  • @andrewgray1169
    @andrewgray1169 2 года назад

    Hey Will, great tutorial, however I am struggling to understand how the Component Variants work so that you can place the animated sequence into a Frame. When I try to run the Prototype I just get a message saying "A prototype with connections needs a valid top level frame as the origin" I get this message when I try run the Basis Spinner, can you help I have no idea what this means or how to resolve it?

    • @WillBrettDesign
      @WillBrettDesign  2 года назад +1

      You may need to just place your component inside a frame as you need a frame to run a prototype.
      You can do this by right clicking the component and selecting add frame.
      Let me know if this doesn’t solve your issue and perhaps we can jump into your file quickly to resolve

    • @andrewgray1169
      @andrewgray1169 2 года назад

      @@WillBrettDesignThanks for getting back to me, I have replied twice now to you with further information on this issue, however my message keeps being removed for some reason?

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Hey that’s strange. I’ve gotten this message. Not seen any others.
      Did adding a frame fix the issue?
      Essentially select your component(s) then right click and add a frame.
      The select the frame to preview the animation

    • @andrewgray1169
      @andrewgray1169 2 года назад

      @@WillBrettDesign hey Will, I think it might have been the inclusion of a link to my Figma project file that cause my messages to be be removed?
      yes, that worked great, I managed to get the smart animation running by placing it in Frames. This seems to work fine as an independent Flow, but I would like to add the animation to a presentation page, however when I do so the connections on longer work correctly and the Flow is transferred to the presentation page?

    • @WillBrettDesign
      @WillBrettDesign  2 года назад +1

      It’s a tricky one to solve without seeing it but are you saving it as a component and then adding the component to a frame or are you copying and paying the frames into another frame?
      Essentially figma uses multiple frames in a prototype for a prototype to work it has to go from one frame to another etc.
      Maybe a I’ll do a video on the basics of prototyping in figma

  • @benlow24
    @benlow24 2 года назад

    Hi there - I keep getting stuck on creating a loader. I’ve tried rotating the content in the frame layer itself like you’ve shown and rotating the entire frame itself, however when placing the variable loader component in a design, it appears that the smart animation doesn’t work. Hope you can help me out

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Hey Ben, are you able to share a public link to the figma file so I can take a look? Or privately invite me? My figma profile is @willbrettdesign

    • @benlow24
      @benlow24 2 года назад

      @@WillBrettDesign Hi Will - I ended up viewing your community file and saw my issue. When rotating each component, the whole frame rotation happened rather than just on the loader layer itself. All fixed up and working a treat! Thanks for getting back to me so quickly.

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Thanks so much for your kind comment. I have a favor to ask. I have been shortlisted for a design award and it's the last day of voting. I need to get as many votes as possible to win and would love it if you could help me out. creativepool.com/annual/2022/shortlist/#EmergingTalent

  • @madifirez94
    @madifirez94 2 года назад +2

    Hello! This is a fantastic tutorial. Therefore, I am sure it is my fault that I cannot get this to work correctly. I have tried my best to follow each step and cannot figure out what I am doing wrong. I also checked out your file in the Figma community and still cannot get it to animate. If you could help me out, that would be much appreciated!

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Hey Madeine, no worries. If you can invite me to your file I can take a look for you. You can find my email in the about me section

    • @WillBrettDesign
      @WillBrettDesign  2 года назад +1

      Thanks so much for your kind comment. I have a favor to ask. I have been shortlisted for a design award and it's the last day of voting. I need to get as many votes as possible to win and would love it if you could help me out. creativepool.com/annual/2022/shortlist/#EmergingTalent

    • @bradolcott
      @bradolcott 2 года назад

      @@WillBrettDesign I am having the same issues with getting the loading icon to animate. Could you post here what was the problem and the solution you found works for Madeleine?

  • @vinnyjamesobrien
    @vinnyjamesobrien 2 года назад +1

    One thing you dont show Will is what is in the frame. What is in the frame?

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Hey Vincent. You can take a look at how each was created here: www.figma.com/community/file/1067400109585574609/Loader-Animations hope this helps.
      Thanks

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Thanks so much for your kind comment. I have a favor to ask. I have been shortlisted for a design award and it's the last day of voting. I need to get as many votes as possible to win and would love it if you could help me out. creativepool.com/annual/2022/shortlist/#EmergingTalent

  • @jantoj9215
    @jantoj9215 2 года назад

    how to resize the spinner?

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Same way you resize any component in Figma. Just increase the scale 🙌

  • @taniavieira6
    @taniavieira6 2 года назад

    How do you export it as a working svg?

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Hey Tania, you can export an svg easily using the export tool however it won’t include any animation as that’s not how svgs work.
      However checkout my new Lottie series which shows you how to export animated SVGs which can be code free or integrated into code.

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Thanks so much for your kind comment. I have a favor to ask. I have been shortlisted for a design award and it's the last day of voting. I need to get as many votes as possible to win and would love it if you could help me out. creativepool.com/annual/2022/shortlist/#EmergingTalent

  • @mrninko
    @mrninko 3 года назад

    Hi. Could you share this file. Love to dig deeper into how it's constructed :)

    • @WillBrettDesign
      @WillBrettDesign  3 года назад

      Here you go: www.figma.com/community/file/1067400109585574609/Loader-Animations

    • @mrninko
      @mrninko 3 года назад +2

      @@WillBrettDesign thanks, but it was fun to figure it out myself :) now i can compare :) thx

    • @WillBrettDesign
      @WillBrettDesign  3 года назад

      @@mrninko Love that you just figured it out yourself! That's the whole goal of these videos. But yes feel free to compare and also share if you've found better methods.

  • @suetyilee5217
    @suetyilee5217 3 года назад

    Please share the file, love the tutorials.

    • @WillBrettDesign
      @WillBrettDesign  3 года назад

      Here you go: www.figma.com/community/file/1067400109585574609/Loader-Animations

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Thanks so much for your kind comment. I have a favor to ask. I have been shortlisted for a design award and it's the last day of voting. I need to get as many votes as possible to win and would love it if you could help me out. creativepool.com/annual/2022/shortlist/#EmergingTalent

  • @Famous_Nolly_Movies
    @Famous_Nolly_Movies 3 года назад

    Yes, please share the file.

    • @WillBrettDesign
      @WillBrettDesign  3 года назад

      Here you go: www.figma.com/community/file/1067400109585574609/Loader-Animations

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Thanks so much for your kind comment. I have a favor to ask. I have been shortlisted for a design award and it's the last day of voting. I need to get as many votes as possible to win and would love it if you could help me out. creativepool.com/annual/2022/shortlist/#EmergingTalent

  • @Spectra_X1
    @Spectra_X1 3 года назад

    Could you please share the file. Thanks

    • @WillBrettDesign
      @WillBrettDesign  3 года назад

      Here you go: www.figma.com/community/file/1067400109585574609/Loader-Animations

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Thanks so much for your kind comment. I have a favor to ask. I have been shortlisted for a design award and it's the last day of voting. I need to get as many votes as possible to win and would love it if you could help me out. creativepool.com/annual/2022/shortlist/#EmergingTalent

  • @freedmirza5086
    @freedmirza5086 2 года назад

    Hi please share😀

  • @FrenchMuffinStudios
    @FrenchMuffinStudios 3 года назад

    Share the file please.

    • @WillBrettDesign
      @WillBrettDesign  3 года назад

      Here you go: www.figma.com/community/file/1067400109585574609/Loader-Animations

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Thanks so much for your kind comment. I have a favor to ask. I have been shortlisted for a design award and it's the last day of voting. I need to get as many votes as possible to win and would love it if you could help me out. creativepool.com/annual/2022/shortlist/#EmergingTalent

  • @Phwoll
    @Phwoll 3 года назад

    File please :)

    • @WillBrettDesign
      @WillBrettDesign  3 года назад +1

      Here you go: www.figma.com/community/file/1067400109585574609/Loader-Animations

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Thanks so much for your kind comment. I have a favor to ask. I have been shortlisted for a design award and it's the last day of voting. I need to get as many votes as possible to win and would love it if you could help me out. creativepool.com/annual/2022/shortlist/#EmergingTalent

  • @StanTheManiac
    @StanTheManiac 3 года назад

    Oh please share the file 🙏

    • @WillBrettDesign
      @WillBrettDesign  3 года назад

      Here you go: www.figma.com/community/file/1067400109585574609/Loader-Animations

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Thanks so much for your kind comment. I have a favor to ask. I have been shortlisted for a design award and it's the last day of voting. I need to get as many votes as possible to win and would love it if you could help me out. creativepool.com/annual/2022/shortlist/#EmergingTalent

  • @gunnergokulraj3787
    @gunnergokulraj3787 3 года назад

    Share the file broo

    • @WillBrettDesign
      @WillBrettDesign  3 года назад

      Here you go: www.figma.com/community/file/1067400109585574609/Loader-Animations

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Thanks so much for your kind comment. I have a favor to ask. I have been shortlisted for a design award and it's the last day of voting. I need to get as many votes as possible to win and would love it if you could help me out. creativepool.com/annual/2022/shortlist/#EmergingTalent

  • @monishakatti9967
    @monishakatti9967 2 года назад

    I followed the same steps, also downloaded your file, and tried still its loading icon does not work. Can you please explain where I am going wrong?

  • @adelinska
    @adelinska 3 года назад

    Could you please share the file. Thank you.

    • @WillBrettDesign
      @WillBrettDesign  3 года назад

      Here you go: www.figma.com/community/file/1067400109585574609/Loader-Animations

    • @WillBrettDesign
      @WillBrettDesign  2 года назад

      Thanks so much for your kind comment. I have a favor to ask. I have been shortlisted for a design award and it's the last day of voting. I need to get as many votes as possible to win and would love it if you could help me out. creativepool.com/annual/2022/shortlist/#EmergingTalent