Design This ON/OFF Toggle in Figma (Easy)

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

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

  • @amandizoca
    @amandizoca Год назад +20

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

  • @SyedShariqAliHashmi
    @SyedShariqAliHashmi 10 месяцев назад +2

    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.

  • @rtubiras644
    @rtubiras644 Год назад +27

    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

  • @timothyduke
    @timothyduke Год назад +5

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

  • @asadrais007
    @asadrais007 Год назад +13

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

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

  • @Anuraktii
    @Anuraktii Год назад +205

    DEVELOPER crying in the corner 🥹

    • @shmeltstudios
      @shmeltstudios  Год назад +35

      You’ll be ok, I promise ❤️

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

      😂😂😂😂

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

      😂😂

    • @masoom_techwala
      @masoom_techwala Год назад +4

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

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

      You can try using background-image as SVG

  • @harshitaarora4874
    @harshitaarora4874 4 месяца назад +2

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

  • @agusaris5031
    @agusaris5031 Год назад +4

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

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

      haha I know that blew up really fast lol

  • @Nastejsia
    @Nastejsia Год назад +5

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

  • @Wendy-q5p
    @Wendy-q5p Год назад +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!!

  • @xseptemlee
    @xseptemlee 10 месяцев назад

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

    • @shmeltstudios
      @shmeltstudios  10 месяцев назад

      Awesome!! I hope you liked it!!

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

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

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

    Mindblowing Animation Bro

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

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

  • @sshirlyvang
    @sshirlyvang 7 месяцев назад

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

  • @jonathand317
    @jonathand317 Год назад +2

    this is beautiful

  • @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 :)

  • @suryaprakash-tr3ii
    @suryaprakash-tr3ii Год назад +1

    Amazing bro

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

    Great Chanel love all your videos 💌

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

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

  • @edwardbajomo7018
    @edwardbajomo7018 Год назад +2

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

  • @indulahemachandra6460
    @indulahemachandra6460 11 дней назад

    This is very creative 😍

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

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

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

    Your work is great

  • @abdullahbrowntech9221
    @abdullahbrowntech9221 Год назад +3

    Nice work 😍

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

    Thank you sir we want more tutorial like this

  • @nerib9057
    @nerib9057 Месяц назад

    videoyu adım adım takip ettim ve işe yaradı. gerçekten çok teşekkür ederim!

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

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

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

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

  • @wishanna
    @wishanna 4 месяца назад

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

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

    This is next level. I’ll practice this

  • @JedHurricane
    @JedHurricane Год назад +2

    Great work :)

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

    Please make more tutorials like this.

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

    Thank you very much 😊😊

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

    You are next level

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

    Good work!

  • @ТатьянаШевчук-к8л
    @ТатьянаШевчук-к8л 9 месяцев назад

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

  • @aizhanaaltynbekkyzy7699
    @aizhanaaltynbekkyzy7699 11 месяцев назад

    SMOOTH 😮‍💨🙌🔥🔥🔥

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

    Wow. Thank you.

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

    This is adorable!

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

    Love This.

  • @Hangharies
    @Hangharies 3 месяца назад

    Very helpful. Many thanks😍

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

    This is great 🤩

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

    💞Amazing 💞

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

    holy shit that looks good

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

    AMAZING

  • @JD.TheMusician
    @JD.TheMusician Год назад +1

    Brilliant

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

    nice design

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

    Thank you for the tutorial❤

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

    its amazing!!

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

    Awesome ! I hope I can do like you !

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

    I LIKE YOUR TEACHING METHOD , love from pakistan

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

    Thank You!!!

  • @domagecom
    @domagecom 11 месяцев назад

    beautiful..

  • @michelangello6268
    @michelangello6268 Год назад +4

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

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

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

  • @Nikitapandey515
    @Nikitapandey515 2 месяца назад +1

    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

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

    Thanks

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

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

  • @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 🤟🏼

  • @Kumhar3000
    @Kumhar3000 9 месяцев назад

    I try my best and finally I can do that🎉

  • @sadiaislam8668
    @sadiaislam8668 4 месяца назад

    Thank you so much.

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

  • @valuableafternoon
    @valuableafternoon 9 месяцев назад

    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?

  • @Lupinat
    @Lupinat 9 месяцев назад

    So good, SUBBED!

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

    Woww bro i like itt

  • @learningwithwarda
    @learningwithwarda 8 месяцев назад +1

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

  • @sitarai1969
    @sitarai1969 11 месяцев назад

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

  • @praiseric
    @praiseric 9 месяцев назад

    Great tutorial

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

  • @designerbhaiya220
    @designerbhaiya220 Год назад +2

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

  • @AnhTuanHuynhVan
    @AnhTuanHuynhVan 9 месяцев назад

    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

  • @Anonymous-nn5wn
    @Anonymous-nn5wn Год назад

    RIP frontend developer tou will be well remembered

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

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

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

  • @Yashwanth-hf9ys
    @Yashwanth-hf9ys Год назад +2

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

  • @Mr007Zeta
    @Mr007Zeta Год назад +3

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

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

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

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

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

  • @mrkammytv
    @mrkammytv 7 месяцев назад

    I would love to see the coding part 😆

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

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

    I can't find the moment where the object is saved as an asset so that I can use it for the start.

  • @pidigamupender7241
    @pidigamupender7241 Месяц назад

    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

  • @BazilRiaz
    @BazilRiaz 11 месяцев назад

    What did you do at 2:15

  • @ankitmazumdar7808
    @ankitmazumdar7808 6 месяцев назад +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?

  • @maadhavs5526
    @maadhavs5526 10 месяцев назад

    Can you include the colours in a screenshot using dropbox?

  • @Diablist
    @Diablist 9 месяцев назад +1

    Oh boy , the developers gonna hate me now :D

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

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

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

    Hi, i just want to say there is a problem with this. If u click on the sun/moon and then quickly hover your mouse over the sub/moon while they are in motion, it will cancel out the sliding animation.

  • @MisbahShahzadi-gk6ns
    @MisbahShahzadi-gk6ns 8 месяцев назад

    Amazing

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

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

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

    😍😍

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

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

  • @zebazohra-y1m
    @zebazohra-y1m 2 месяца назад

    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.

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

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

  • @neel.6.11
    @neel.6.11 Год назад

    hello sir i just want to know is your figma is free or Figma Professional ?? because in my figma it does not support whole features of animation... that's why i did not make this project very properly.........
    ( i hope you replay on this comment👏love from india❤)

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

    i created🤩🤩

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

    Hey can u share the color Scheme's

  • @top1107-f3j
    @top1107-f3j Год назад

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

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

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