Design This ON/OFF Toggle in Figma (Easy)

Тәжірибелік нұсқаулар және стиль

Design an Animated Sun and Moon On/Off Toggle - A Simple Tutorial for this Seamless Animation. Super easy and fun a great way for beginners in Figma to learn how to make animated components.
👇Get the Studio Pass
bit.ly/49COJNQ
👇 Try Figma for FREE
bit.ly/figfree
👇Download Figma For Pros
bit.ly/fig-pro
🚀 Subscribe for more Tutorials
bit.ly/3T22qMZ
📥 Buy Design Files & Merch
bit.ly/3WuUl6D
🌎 Find Me on Social Media
Tiktok: bit.ly/3U7TdnQ
Instagam: bit.ly/3fF9hyf
Facebook: bit.ly/3ML5axg

Пікірлер: 224

  • @Anuraktii
    @Anuraktii Жыл бұрын

    DEVELOPER crying in the corner 🥹

  • @shmeltstudios

    @shmeltstudios

    Жыл бұрын

    You’ll be ok, I promise ❤️

  • @almog8569

    @almog8569

    Жыл бұрын

    😂😂😂😂

  • @Charsipanda

    @Charsipanda

    9 ай бұрын

    😂😂

  • @mk4hard

    @mk4hard

    9 ай бұрын

    Yes it was me I'm crying In my house corner 🥲

  • @lepdien

    @lepdien

    9 ай бұрын

    You can try using background-image as SVG

  • @asadrais007
    @asadrais00711 ай бұрын

    Please make more tutorials like these, we love to watch these kind of tutorials.

  • @user-lg5hw3dn2t
    @user-lg5hw3dn2t9 ай бұрын

    One of the most helpful tutorials I've ever seen. Thank you so much!

  • @timothyduke
    @timothyduke8 ай бұрын

    The best well paced easy soothing instruction. At the end you just smiled

  • @aniketbhosale8990
    @aniketbhosale89909 ай бұрын

    @shmelt studios I have gone through several different videos for animation but yours was the best.

  • @vladislavagusar1575
    @vladislavagusar15756 ай бұрын

    Such a pleasure even just to watch this. Exited to try it 🎉 Thank you for the detailed tutorial!

  • @lokeshgosai4575
    @lokeshgosai4575 Жыл бұрын

    Your work is great

  • @rtubiras644
    @rtubiras644 Жыл бұрын

    Very well structured and easy to follow. I like how you voiced over every steps so I didnt have to go back and fort to check visually but just listening to your voice instead. Thank you so much, SUBBED!!!!!!

  • @shmeltstudios

    @shmeltstudios

    Жыл бұрын

    Thanks for the SUB!!!

  • @Maria-qw9zw

    @Maria-qw9zw

    8 ай бұрын

    @@shmeltstudioshello, I’m a new subscriber. Thank you for your videos, I love them all!!! How do you export these animations? I use Tilda

  • @literata666
    @literata6666 ай бұрын

    Hey! congratulations for the clear tutorial. I made it and it looks amazing.

  • @leminhhien___
    @leminhhien___ Жыл бұрын

    Nice!! I made it as my very first figma project. Thanks bro

  • @shmeltstudios

    @shmeltstudios

    Жыл бұрын

    That’s so cool 👍🏼 glad I could help!!

  • @BOo_Vlogs_
    @BOo_Vlogs_6 ай бұрын

    Whoa😍😮, I am exited to try it! Really thank you for the detailed tutorial.

  • @user-ct2vq7rg8h
    @user-ct2vq7rg8h5 ай бұрын

    i love your video its so esay to follow and you tell what keybind so i dont have to figure it out on my own!!

  • @gungunparakh
    @gungunparakh5 ай бұрын

    Thank you for the tutorial❤

  • @amandizoca
    @amandizoca7 ай бұрын

    Wooow... Tutorials like these that help us practice even more. Keep making tutorials like this, they're great. Thanks for the support!

  • @shmeltstudios

    @shmeltstudios

    7 ай бұрын

    More to come!

  • @tape6ixteen19
    @tape6ixteen198 ай бұрын

    Please make more tutorials like this.

  • @waruchan840
    @waruchan8408 ай бұрын

    its amazing!!

  • @MyIshiacasonbrown
    @MyIshiacasonbrown6 ай бұрын

    Thank You!!!

  • @edwardbajomo7018
    @edwardbajomo7018 Жыл бұрын

    i really thought this was gonna be easy, thanks for the tutorial though

  • @aizhanaaltynbekkyzy7699
    @aizhanaaltynbekkyzy76993 ай бұрын

    SMOOTH 😮‍💨🙌🔥🔥🔥

  • @SMMandTutorial
    @SMMandTutorial6 ай бұрын

    Wow. Thank you.

  • @boogiedesignco2217
    @boogiedesignco22179 ай бұрын

    I'm a graphıc designer who wants build up uı/ux design career. Your explanation makes it easier to understand tools thank u :)

  • @christoherright6430
    @christoherright64306 ай бұрын

    Love This.

  • @mmcreations5082
    @mmcreations50825 ай бұрын

    Thank you sir we want more tutorial like this

  • @swoltekcomputer
    @swoltekcomputer6 ай бұрын

    Awesome ! I hope I can do like you !

  • @shashiraj6226
    @shashiraj62264 ай бұрын

    Thank you very much 😊😊

  • @yusufsenyer4077
    @yusufsenyer40773 ай бұрын

    Thank you soo much

  • @user-xh4cz5zo5g
    @user-xh4cz5zo5gАй бұрын

    Thank you for your tutorial ❤ it’s amazing. I have already created this awesome button 😊

  • @JD.TheMusician
    @JD.TheMusician Жыл бұрын

    Brilliant

  • @atelics
    @atelics10 ай бұрын

    AMAZING

  • @AmaVidarshana
    @AmaVidarshana5 ай бұрын

    This is great 🤩

  • @FrPaname
    @FrPaname Жыл бұрын

    Hey, i look your videos on tiktok. You are GENIUS ! Please more content videos ! 😮

  • @domagecom
    @domagecom3 ай бұрын

    beautiful..

  • @jonathand317
    @jonathand317 Жыл бұрын

    this is beautiful

  • @shmeltstudios

    @shmeltstudios

    Жыл бұрын

    😍

  • @praiseric
    @praisericАй бұрын

    Great tutorial

  • @user-gn3lx9ie4c
    @user-gn3lx9ie4c2 ай бұрын

    I always wanted a simple yet easy tutorial for a toggle button and this definitely was it, simply followed along the tutorial and i was able to create my very own toggle button, definitely giving a follow. Keep up the good work bro.

  • @shmeltstudios

    @shmeltstudios

    Ай бұрын

    Glad it helped!

  • @almog8569
    @almog8569 Жыл бұрын

    holy shit that looks good

  • @maitreyi6180
    @maitreyi61805 ай бұрын

    💞Amazing 💞

  • @JedHurricane
    @JedHurricane Жыл бұрын

    Great work :)

  • @shmeltstudios

    @shmeltstudios

    Жыл бұрын

    Thank you! Cheers!

  • @offshare2033
    @offshare20338 ай бұрын

    Thanks

  • @Lupinat
    @LupinatАй бұрын

    So good, SUBBED!

  • @xseptemlee
    @xseptemlee2 ай бұрын

    It's so creative. I've finished this tutorial. Thank you very much!

  • @shmeltstudios

    @shmeltstudios

    2 ай бұрын

    Awesome!! I hope you liked it!!

  • @sjgee4309
    @sjgee4309 Жыл бұрын

    This is adorable!

  • @mimobenslimen7035
    @mimobenslimen7035 Жыл бұрын

    Great Chanel love all your videos 💌

  • @shmeltstudios

    @shmeltstudios

    Жыл бұрын

    thank you so much!

  • @neoalpha6775
    @neoalpha6775 Жыл бұрын

    Good work!

  • @shmeltstudios

    @shmeltstudios

    Жыл бұрын

    Thank you! Cheers!

  • @abdullahbrowntech9221
    @abdullahbrowntech9221 Жыл бұрын

    Nice work 😍

  • @shmeltstudios

    @shmeltstudios

    Жыл бұрын

    Thank you 😘

  • @waqarbaloch5
    @waqarbaloch5 Жыл бұрын

    Mindblowing Animation Bro

  • @shmeltstudios

    @shmeltstudios

    Жыл бұрын

    thank you!!

  • @KalvinPatel
    @KalvinPatel11 ай бұрын

    This is next level. I’ll practice this

  • @shmeltstudios

    @shmeltstudios

    11 ай бұрын

    🥳🥳

  • @maae912
    @maae9128 ай бұрын

    You are next level

  • @MisbahShahzadi-gk6ns
    @MisbahShahzadi-gk6ns4 күн бұрын

    Amazing

  • @Kumhargraphic3000
    @Kumhargraphic3000Ай бұрын

    I try my best and finally I can do that🎉

  • @redanac
    @redanac Жыл бұрын

    Wowowowowow i love it loveit i intend to use it in any app i code thankssssss

  • @shmeltstudios

    @shmeltstudios

    Жыл бұрын

    Sweet!!!

  • @Dania67589
    @Dania67589 Жыл бұрын

    nice design

  • @shmeltstudios

    @shmeltstudios

    Жыл бұрын

    Thank you!

  • @eduacris
    @eduacris8 ай бұрын

    obrigado, do Brasil

  • @bundarust8773
    @bundarust87735 ай бұрын

    finished the tutorial loved it. would be more helpful if the windows shortcuts were said at same time found it bit confuzing getting command and control mixed up how would i make the button change back frames as the moon is hidden in the second frame and i dont know what to select to make it change back

  • @hahaacademy
    @hahaacademy10 ай бұрын

    I LIKE YOUR TEACHING METHOD , love from pakistan

  • @AnhTuanHuynhVan
    @AnhTuanHuynhVanАй бұрын

    very appreciate it. Why is the step changing the background frame to a darker color but the sun ellipse not change along and still the same yellow color? I thought they are in the same frame

  • @vrawmusic
    @vrawmusic6 ай бұрын

    Hey! Great Tutorial man. I was making this as my first ever Project on Figma but m stuck at the very last step. Idk why my "change to" option in interactions is greyed- out. Can you pls help me out with that?

  • @taaqshop
    @taaqshop6 ай бұрын

    Beautiful tutorial ❤️ can I try this in free version of figma?

  • @nyamahdesigns9698
    @nyamahdesigns9698 Жыл бұрын

    😍😍

  • @wizwizington1758
    @wizwizington17588 ай бұрын

    i have no idea what figma is but that toggle looks awesome

  • @sitarai1969
    @sitarai19692 ай бұрын

    i really liked this video could you help me because i am not able to use the change to option in the prototype

  • @user-yi7ld4oy4s
    @user-yi7ld4oy4s10 ай бұрын

    Awesome tutorial :-) But I have problem that is third elipse doesn't work draw inside rectangle

  • @brawlstarsqueenator
    @brawlstarsqueenator Жыл бұрын

    Woww bro i like itt

  • @shmeltstudios

    @shmeltstudios

    Жыл бұрын

    Thank you 🤟🤟

  • @designerbhaiya220
    @designerbhaiya220 Жыл бұрын

    its good for exploring your creativity but not for the actual project still thanks for tuts..

  • @agusaris5031
    @agusaris5031 Жыл бұрын

    I found the designer vs developer meme template. Nice work!

  • @shmeltstudios

    @shmeltstudios

    Жыл бұрын

    haha I know that blew up really fast lol

  • @blueplaying9803
    @blueplaying980311 ай бұрын

    Hi! Thank you for this tutorial But I came across a problem, the color and animation disappear when you move the mouse away and a small part of the icon remains a gray void, the mechanism also works with a delay, is there a problem with the design or do I need to fix something in the mechanism?

  • @jaweriasultan7510
    @jaweriasultan751010 ай бұрын

    Amazing. Now can someone help on how to paste this onto a different frame and complete an interaction?

  • @Rahul_Lata_
    @Rahul_Lata_11 ай бұрын

    please share all the colour hex codes which you have used

  • @TheShortsMatrixX
    @TheShortsMatrixX11 ай бұрын

    i am subed

  • @rekhashetty1018
    @rekhashetty101810 ай бұрын

    How did you grab eclipses 1,2,3 I'm not able to do it can you suggest the key

  • @Mr007Zeta
    @Mr007Zeta Жыл бұрын

    "I wasted my nights, you turn off the lights"

  • @aodaibdarni4283
    @aodaibdarni4283 Жыл бұрын

    Amazing work! but do you resize everything ? I need the toggle much smaller that original size..

  • @diyaediin1437

    @diyaediin1437

    Жыл бұрын

    Why won't you do it the correct size from the beginning??

  • @aodaibdarni4283

    @aodaibdarni4283

    Жыл бұрын

    Cause I wanted the same shades and effects values. So I asked the creator of the video and he told me to press k on the keyboard and scale to the desired size. And i figured out in the end :)

  • @shmeltstudios

    @shmeltstudios

    Жыл бұрын

    Yep, use K on your keyboard to scale, proportionately, and while keeping all of your elements in the same position 🤟🏼

  • @mohamadmahditajkarimi8961
    @mohamadmahditajkarimi896110 ай бұрын

    i created🤩🤩

  • @alesharr
    @alesharr10 ай бұрын

    como le hago para que cambiar el tamaño del componente

  • @wardaabbas2496
    @wardaabbas249623 сағат бұрын

    I have question. After clip content My moon didn't go behind rays !! 🤔like .. Moon and Sun is on the same equal place.

  • @xo1273
    @xo12737 ай бұрын

    how do you make it the circle transparent 2:27 because mine is not

  • @hisas8271
    @hisas8271Ай бұрын

    It's my first time to use Figma, How can I adjust the Y and X value just like that? and what to click when you say option and drag?

  • @x0x0ROCKx0x0
    @x0x0ROCKx0x011 ай бұрын

    thank you for the tutorial, everything is very clear. But my ' change to' option in the animation panel is freezed and can't be used. Any idea how this can be released?

  • @shmeltstudios

    @shmeltstudios

    11 ай бұрын

    You probably have accidentally hit it already so in your prototype panel make sure you dont already have an interaction, if you do delete it by clicking on the minus button and make your new one. Hope this helps 👍🏼

  • @George_macharashvili
    @George_macharashvili3 ай бұрын

    in prototypes when im doing hovering change to isnt avaliable

  • @seemanaik8474
    @seemanaik84749 ай бұрын

    Hey can u share the color Scheme's

  • @maadhavs5526
    @maadhavs55262 ай бұрын

    Can you include the colours in a screenshot using dropbox?

  • @enriqueruiz320
    @enriqueruiz3209 ай бұрын

    😍

  • @shanzeyfayyaz8393
    @shanzeyfayyaz83939 ай бұрын

    at this time stamp like mine just won't clip like them and also when I click the sun and moon frame just like them but also my cloud front back also got selected? how to solve this one any one have any idea !

  • @Diablist
    @DiablistАй бұрын

    Oh boy , the developers gonna hate me now :D

  • @shmeltstudios

    @shmeltstudios

    Ай бұрын

    Welcome to the club 🤭

  • @Yashwanth-hf9ys
    @Yashwanth-hf9ys3 ай бұрын

    can anyone help me? I'm not getting Animation option.. and Inspect option beside prototype

  • @navayjain7
    @navayjain717 күн бұрын

    In my local variables, the whole component including (sun, sun hover, moon, moon hover) is coming. Anyone pleeeaaaaaase help🙏🙏🙏

  • @ronnieblackheart
    @ronnieblackheart9 ай бұрын

    You say it's too late to make it but is it too late to try🎶

  • @michelangello6268
    @michelangello6268 Жыл бұрын

    what is the button option on the keyboard when you say "press option and shift"?

  • @shmeltstudios

    @shmeltstudios

    Жыл бұрын

    Do you know the timestamp by chance?

  • @itzikil
    @itzikil4 ай бұрын

    how do you import this to a site with js?

  • @user-ey7ig6gi6g
    @user-ey7ig6gi6g9 ай бұрын

    i have a problem framing them,after clicking "clip content" it doesnt work.anyone has an idea how to fix that?

  • @user-yl9tl5sq4h
    @user-yl9tl5sq4h2 ай бұрын

    What did you do at 2:15

  • @swamhtetaung1212
    @swamhtetaung12126 ай бұрын

    Oh My God!!! A COMPONENT SET!!! GOD DAMN IT!!! 30 MINUTES FOR ONE MISSED SETTING!!!

  • @mr.h4138
    @mr.h4138 Жыл бұрын

    Blue colour present number please

  • @neo-plays-roblox
    @neo-plays-roblox5 ай бұрын

    when m dragging the arrows, they do not select the full frame...they are selecting each icon

  • @Anonymous-nn5wn
    @Anonymous-nn5wn6 ай бұрын

    RIP frontend developer tou will be well remembered

  • @aumpatel1860
    @aumpatel18608 ай бұрын

    plz make a windows edition i can't figure what the option and command all those mean

  • @cristinemaepacilan6726
    @cristinemaepacilan6726 Жыл бұрын

    why does it doesnt work on frame that has image?

  • @AntapSAT
    @AntapSAT2 ай бұрын

    Excuse me, how to make the animation to not interrupt itself and first let it be finished before playing another animation?

  • @sushlyfe
    @sushlyfe6 ай бұрын

    3:21

  • @070-cse-pavankumar.s.m2
    @070-cse-pavankumar.s.m25 ай бұрын

    Bro I have a problem, I completed till making connection inside the components when I open assets it showing the whole component what to do😢

Келесі