Design This ON/OFF Toggle in Figma (Easy)

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

КОМЕНТАРІ • 245

  • @Anuraktii
    @Anuraktii Рік тому +201

    DEVELOPER crying in the corner 🥹

  • @timothyduke
    @timothyduke Рік тому +4

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

  • @amandizoca
    @amandizoca Рік тому +21

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

  • @SyedShariqAliHashmi
    @SyedShariqAliHashmi 8 місяців тому +1

    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.

  • @asadrais007
    @asadrais007 Рік тому +13

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

  • @harshitaarora4874
    @harshitaarora4874 3 місяці тому +2

    Finally made it!!!!!!
    All thanks to this tutorial!

  • @leminhhien___
    @leminhhien___ Рік тому +19

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

    • @shmeltstudios
      @shmeltstudios  Рік тому +5

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

  • @rtubiras644
    @rtubiras644 Рік тому +28

    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  Рік тому +2

      Thanks for the SUB!!!

    • @Maria-qw9zw
      @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

  • @agusaris5031
    @agusaris5031 Рік тому +4

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

  • @Wendy-q5p
    @Wendy-q5p 11 місяців тому +1

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

  • @wishanna
    @wishanna 3 місяці тому

    I just did this. It is so cooool. Thanks!!!

  • @xseptemlee
    @xseptemlee 9 місяців тому

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

  • @suryaprakash-tr3ii
    @suryaprakash-tr3ii Рік тому +1

    Amazing bro

  • @JD.TheMusician
    @JD.TheMusician Рік тому +1

    Brilliant

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

    Nice work 😍

  • @shashiraj6226
    @shashiraj6226 11 місяців тому

    Thank you very much 😊😊

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

    You are next level

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

    AMAZING

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

    Your work is great

  • @domagecom
    @domagecom 9 місяців тому

    beautiful..

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

    Wow. Thank you.

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

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

  • @sadiaislam8668
    @sadiaislam8668 3 місяці тому

    Thank you so much.

  • @valuableafternoon
    @valuableafternoon 7 місяців тому

    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?

  • @michelangello6268
    @michelangello6268 Рік тому +4

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

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

    Mindblowing Animation Bro

  • @jonathand317
    @jonathand317 Рік тому +2

    this is beautiful

  • @maitreyi6180
    @maitreyi6180 11 місяців тому

    💞Amazing 💞

  • @Nastejsia
    @Nastejsia Рік тому +5

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

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

    Thank you sir we want more tutorial like this

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

    Great Chanel love all your videos 💌

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

    Very helpful. Many thanks😍

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

    nice design

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

    holy shit that looks good

  • @sshirlyvang
    @sshirlyvang 6 місяців тому

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

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

    Love This.

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

    Thanks

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

    This is great 🤩

  • @praiseric
    @praiseric 7 місяців тому

    Great tutorial

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

    Good work!

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

    Thank You!!!

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

    SMOOTH 😮‍💨🙌🔥🔥🔥

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

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

  • @JedHurricane
    @JedHurricane Рік тому +2

    Great work :)

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

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

  • @Lupinat
    @Lupinat 7 місяців тому

    So good, SUBBED!

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

    its amazing!!

  • @edwardbajomo7018
    @edwardbajomo7018 Рік тому +2

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

  • @Nikitapandey515
    @Nikitapandey515 Місяць тому

    11:03 I am stuck on this step and can't seem to change it back to blue background. Please tell me how to do it or any alternative solution

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

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

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

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

  • @Kumhar3000
    @Kumhar3000 8 місяців тому

    I try my best and finally I can do that🎉

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

    Thank you for the tutorial❤

  • @ТатьянаШевчук-к8л
    @ТатьянаШевчук-к8л 7 місяців тому

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

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

    Awesome ! I hope I can do like you !

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

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

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

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

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

    Woww bro i like itt

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

    I LIKE YOUR TEACHING METHOD , love from pakistan

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

    Please make more tutorials like this.

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

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

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

    This is next level. I’ll practice this

  • @AnhTuanHuynhVan
    @AnhTuanHuynhVan 7 місяців тому

    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

  • @learningwithwarda
    @learningwithwarda 6 місяців тому +1

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

  • @aodaibdarni
    @aodaibdarni Рік тому +2

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

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

      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  Рік тому +2

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

  • @Yashwanth-hf9ys
    @Yashwanth-hf9ys 10 місяців тому +2

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

  • @sitarai1969
    @sitarai1969 9 місяців тому

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

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

    This is adorable!

  • @MisbahShahzadi-gk6ns
    @MisbahShahzadi-gk6ns 6 місяців тому

    Amazing

  • @ankitmazumdar7808
    @ankitmazumdar7808 4 місяці тому +1

    i designed it in figma but how do i use it in a website HTML code or what do i nee to do any help?

  • @BazilRiaz
    @BazilRiaz 9 місяців тому

    What did you do at 2:15

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

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

  • @bundarust8773
    @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

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

    obrigado, do Brasil

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

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

  • @Lifeissohard-z7c
    @Lifeissohard-z7c Рік тому

    Hello. I get stuck on the part of 8:29. You said grab your sun and moon frame. But when i'm doing that the clouds front, clouds back and rays are also been selected. I'm doing it repeatedly. I followed your instructions but I can't see showing clip content because i can't deselect the clouds and rays. Please help me.. Thanks!.. By the way, I really like your animations. It's awesome! 👍

    • @Cataaxh
      @Cataaxh Рік тому +2

      Hi! First time Figma user also, u can click anywhere on your project so you can deselect the objects, then try using CTRL and select only the objects you need. Hope it helps!!

    • @Lifeissohard-z7c
      @Lifeissohard-z7c Рік тому

      Finally, someone cares to respond 😌. Thank you.. I just tried on my other way to resolve it. I made another frame for moon and i made an individual interaction for it. But it turns into separated sun and moon animation. I still going to try yours. Again, thank you so much.

  • @designerbhaiya220
    @designerbhaiya220 Рік тому +2

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

  • @khiaralanjoni8377
    @khiaralanjoni8377 3 місяці тому

    como você colocou a elipse dentro do retângulo não consigo

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

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

  • @pidigamupender7241
    @pidigamupender7241 10 днів тому

    Stucked here here when I click on shift alt it is selecting clouds front and clouds back also here. 4 are selecting. How to specify select the sun and moon and rays please tell me,, kindly waiting for your answer

  • @maadhavs5526
    @maadhavs5526 9 місяців тому

    Can you include the colours in a screenshot using dropbox?

  • @zebazohra-y1m
    @zebazohra-y1m 24 дні тому

    After making a project like this in figma how do I upload a micro interaction video playing on loop on my behnace portfolio ? is there a way to convert this video to embed video for free.

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

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

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

    Wood amazing

  • @poorvijoshi3031
    @poorvijoshi3031 4 місяці тому +1

    The clouds ellipse are not going under frame i mean when i put the clouds inside the sun frame the whole ellipse are visible they are not underlying what to do please help🙁

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

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

  • @mrkammytv
    @mrkammytv 5 місяців тому

    I would love to see the coding part 😆

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

    😍😍

  • @RainbowRhythms-u4x
    @RainbowRhythms-u4x Рік тому

    i am subed

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

    i created🤩🤩

  • @vrawmusic
    @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?

  • @Jithmi_Al
    @Jithmi_Al Рік тому +2

    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  Рік тому

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

  • @NakazakiSB
    @NakazakiSB Місяць тому

    hello i don't know why a the end when i go to the assets i can't find only 1 to put it on a fram i always find all the one's i did any help please ?

  • @navayjain7
    @navayjain7 7 місяців тому +1

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

  • @Diablist
    @Diablist 8 місяців тому +1

    Oh boy , the developers gonna hate me now :D

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

    Hey can u share the color Scheme's

  • @blueplaying9803
    @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?

  • @dstone5550
    @dstone5550 Рік тому +2

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

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

      There are some variables that play a factor in that, if you have project details you can email me at shmeltstudios@gmail.com

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

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

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

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