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

[@Anuraktii]

DEVELOPER crying in the corner 🥹

[@shmeltstudios]

You’ll be ok, I promise ❤️

[@almog8569]

😂😂😂😂

[@Lesgopanda]

😂😂

[@mk4hard]

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

[@lepdien]

You can try using background-image as SVG

[@asadrais007]

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

[@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]

Thanks for the SUB!!!

[@Maria-qw9zw]

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

[@user-lg5hw3dn2t]

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

[@timothyduke]

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

[@leminhhien___]

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

[@shmeltstudios]

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

[@lokeshgosai4575]

Your work is great

[@aniketbhosale8990]

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

[@vladislavagusar1575]

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

[@amandizoca]

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

[@shmeltstudios]

More to come!

[@literata666]

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

[@tape6ixteen19]

Please make more tutorials like this.

[@BOo_Vlogs_]

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

[@jonathand317]

this is beautiful

[@shmeltstudios]

😍

[@edwardbajomo7018]

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

[@gungunparakh]

Thank you for the tutorial❤

[@waruchan840]

its amazing!!

[@waqarbaloch5]

Mindblowing Animation Bro

[@shmeltstudios]

thank you!!

[@JedHurricane]

Great work :)

[@shmeltstudios]

Thank you! Cheers!

[@boogiedesignco2217]

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

[@JD.TheMusician]

Brilliant

[@aizhanaaltynbekkyzy7699]

SMOOTH 😮‍💨🙌🔥🔥🔥

[@MyIshiacasonbrown]

Thank You!!!

[@user-ct2vq7rg8h]

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!!

[@almog8569]

holy shit that looks good

[@SMMandTutorial]

Wow. Thank you.

[@KalvinPatel]

This is next level. I’ll practice this

[@shmeltstudios]

🥳🥳

[@abdullahbrowntech9221]

Nice work 😍

[@shmeltstudios]

Thank you 😘

[@FrPaname]

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

[@atelics]

AMAZING

[@christoherright6430]

Love This.

[@neoalpha6775]

Good work!

[@shmeltstudios]

Thank you! Cheers!

[@Lupinat]

So good, SUBBED!

[@shashiraj6226]

Thank you very much 😊😊

[@sshirlyvang]

Took me long, but I was determined! So beautiful! Thank you!

[@swoltekcomputer]

Awesome ! I hope I can do like you !

[@yusufsenyer4077]

Thank you soo much

[@AmaVidarshana]

This is great 🤩

[@mmcreations5082]

Thank you sir we want more tutorial like this

[@user-gn3lx9ie4c]

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]

Glad it helped!

[@maitreyi6180]

💞Amazing 💞

[@mimobenslimen7035]

Great Chanel love all your videos 💌

[@shmeltstudios]

thank you so much!

[@praiseric]

Great tutorial

[@domagecom]

beautiful..

[@offshare2033]

Thanks

[@user-xh4cz5zo5g]

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

[@maae912]

You are next level

[@xseptemlee]

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

[@shmeltstudios]

Awesome!! I hope you liked it!!

[@redanac]

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

[@shmeltstudios]

Sweet!!!

[@MisbahShahzadi-gk6ns]

Amazing

[@Dania67589]

nice design

[@shmeltstudios]

Thank you!

[@nyamahdesigns9698]

😍😍

[@agusaris5031]

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

[@shmeltstudios]

haha I know that blew up really fast lol

[@Kumhargraphic3000]

I try my best and finally I can do that🎉

[@brawlstarsqueenator]

Woww bro i like itt

[@shmeltstudios]

Thank you 🤟🤟

[@sjgee4309]

This is adorable!

[@user-yi7ld4oy4s]

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

[@jaweriasultan7510]

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

[@Rahul_Lata_]

please share all the colour hex codes which you have used

[@wizwizington1758]

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

[@taaqshop]

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

[@hahaacademy]

I LIKE YOUR TEACHING METHOD , love from pakistan

[@eduacris]

obrigado, do Brasil

[@bundarust8773]

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

[@designerbhaiya220]

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

[@blueplaying9803]

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?

[@aodaibdarni]

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

[@diyaediin1437]

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

[@aodaibdarni]

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]

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

[@vrawmusic]

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?

[@enriqueruiz320]

😍

[@TheShortsMatrixX]

i am subed

[@sitarai1969]

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

[@x0x0ROCKx0x0]

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]

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 👍🏼

[@mohamadmahditajkarimi8961]

i created🤩🤩

[@seemanaik8474]

Hey can u share the color Scheme's

[@rekhashetty1018]

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

[@alesharr]

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

[@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

[@xo1273]

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

[@michelangello6268]

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

[@shmeltstudios]

Do you know the timestamp by chance?

[@Mr007Zeta]

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

[@user-yl9tl5sq4h]

What did you do at 2:15

[@itzikil]

how do you import this to a site with js?

[@maadhavs5526]

Can you include the colours in a screenshot using dropbox?

[@ronnieblackheart]

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

[@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?

[@lokeshgosai4575]

Can you start a beginner tutorial for beginners like me in figma

[@shmeltstudios]

I will try to post more beginner friendly content to help you learn through fun projects 🤟🏼

[@George_macharashvili]

in prototypes when im doing hovering change to isnt avaliable

[@mr.h4138]

Blue colour present number please

[@Diablist]

Oh boy , the developers gonna hate me now :D

[@shmeltstudios]

Welcome to the club 🤭

[@erfanattarzadeh4357]

Where is the file of this design?

[@aumpatel1860]

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

[@swamhtetaung1212]

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

[@dstone5550]

How much do you charge for a one-pager tech startup?

[@shmeltstudios]

There are some variables that play a factor in that, if you have project details you can email me at [e-mail]

[@Anonymous-nn5wn]

RIP frontend developer tou will be well remembered

[@cristinemaepacilan6726]

why does it doesnt work on frame that has image?

[@Yashwanth-hf9ys]

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

[@atrocitus9198]

now what is the job of a front end developer with this on/of toggle you just created ?

[@wardaabbas2496]

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

[@shanzeyfayyaz8393]

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 !

[@nathanmiroshnikov2746]

I met a problem with animation. When I pushed `clip content` it cutted parts of sun and moon shadows. Okay, it's still fine but then something happened to my animation. Son goes under the moon and then appears from under the moon. How do I fix it? Thanks for answering!

[@shmeltstudios]

Make sure your layers are in the correct order in each of your variants. Also if you have auto layout on, make sure in the advance settings your stacking order is correct.