Dark And Light Modes Using Color Variables | Figma Tutorial [CONFIG 2023]

แชร์
ฝัง
  • เผยแพร่เมื่อ 1 ก.พ. 2025

ความคิดเห็น • 31

  • @annafilou
    @annafilou 4 หลายเดือนก่อน +4

    You explained everything perfectly! It's great that you mentioned that it's not a good idea to, for example, take ALL of your whites and convert them to to black in dark mode because there are instances when you might want to have white text on both modes. You really covered everything, thank you.

    • @ProductSensei77
      @ProductSensei77  4 หลายเดือนก่อน +1

      Thank you so much for your comment. I'm glad you liked it!

  • @RemedyOnlineGh
    @RemedyOnlineGh 7 หลายเดือนก่อน +1

    I'm from Ghana and I just subscribed to your channel. I don't normally do that to new channels but your style of presenting the design process alone is crazy bro!
    Kudos👊🏻👊🏻

  • @Kickdrumsnare
    @Kickdrumsnare ปีที่แล้ว +2

    Lifesaver! Thank you 🎉

  • @maiquynh7098
    @maiquynh7098 10 หลายเดือนก่อน

    Thank you so much! This is very useful

  • @izaaclem1376
    @izaaclem1376 9 หลายเดือนก่อน +1

    Bro I have subscribed because you did something amazing. Make more of this.

  • @fendrapunu4657
    @fendrapunu4657 ปีที่แล้ว

    very useful, thank bro for your effort to make this tutorial... :)

  • @SYDESIGNING
    @SYDESIGNING ปีที่แล้ว

    you made it very easy bro, way to go :)

  • @Dawn-x4i
    @Dawn-x4i 11 หลายเดือนก่อน

    Very useful, and easy way to do. thanks bro

  • @ustymhanuliak4554
    @ustymhanuliak4554 2 หลายเดือนก่อน

    Love you man

  • @lanh-lanh
    @lanh-lanh ปีที่แล้ว +1

    it's useful for me, thanks

  • @amirreza3638
    @amirreza3638 11 หลายเดือนก่อน

    Thank You!

  • @LoA-p8z
    @LoA-p8z ปีที่แล้ว

    really really useful for me, thanks a lot

  • @iGraphical
    @iGraphical 11 หลายเดือนก่อน

    Thank you dude

  • @lucianarosa3201
    @lucianarosa3201 10 หลายเดือนก่อน

    Nice tutorial, very useful, but i missed the part when you explain how to prototype it. Do it have buttons to the modes?

  • @wollem5136
    @wollem5136 10 หลายเดือนก่อน +2

    Hi there, is it possible to add a toggle button to activate the dark-mode and to go back to light-mode?

    • @00RaiserRock
      @00RaiserRock 9 หลายเดือนก่อน +1

      Yes, but you have make it as component. E.g. Make light mode card as master component and make dark mode as a variant, then rename your dark mode card layer name to "Dark mode = True" and "Dark mode = False" for light mode card. You should see the toggle button once you use the component instance

  • @DineshKumar-gy5yh
    @DineshKumar-gy5yh หลายเดือนก่อน

    How to create that slider animation to differentiate dark and light UI. which you shown in this video thumbnail

  • @VipulPatel-y3b
    @VipulPatel-y3b ปีที่แล้ว

    Nice! Can you please add toggle switch to change dark/light mode?

  • @chiduugochukwu4201
    @chiduugochukwu4201 10 หลายเดือนก่อน

    Thank you. This was well detailed. However, I am unable to create new mode. Does that mean I have to pay to be able to use that feature?

  • @S0ulH0und
    @S0ulH0und ปีที่แล้ว

    Is it possible to link it to a button?

  • @hamzatheboi
    @hamzatheboi 4 หลายเดือนก่อน

    I've a question here. I'm beginner to figma, i just want to know that how i can link this dark and light mode to a switch that appears on some websites? Anyone?

    • @peteroguntola8760
      @peteroguntola8760 4 หลายเดือนก่อน +2

      Create two frames for the switch (one that has white background and any color of the switch, maybe green and the second grey background with white circle for switch). You’ll then animate them using prototype. Interaction would be on drag, such that when you drag it from the light frame, it switches to the dark frame and vice versa.

    • @hamzatheboi
      @hamzatheboi 4 หลายเดือนก่อน +1

      @@peteroguntola8760 Ahh Thank You soo much. I'm gonna try it.

  • @Underhills
    @Underhills ปีที่แล้ว

    This a very buggy feature. Sometime it works, sometimes it don't. The issue is almost always the transition between frames and if the frames detect what mode it's in. Very often no change is applied when moving things between mode frames. Variables have many other issues as well, it's very risky to trust this thing in a real project 😱

  • @peteroguntola8760
    @peteroguntola8760 4 หลายเดือนก่อน

    Having new mode of variable is premium unfortunately

  • @CobaltStark
    @CobaltStark 6 หลายเดือนก่อน

    Unfortunately now its a paid feature

    • @bharatht2514
      @bharatht2514 3 หลายเดือนก่อน

      yeah i just realised that after trying :(