Let's make a switch in Figma

Figma is free to use. Sign up here: bit.ly/3msp0OV
____________________________________________________
Find us on ⬇️
Twitter: / figma
Instagram: / figma
LinkedIn: / figma
Figma forum: forum.figma.com/
____________________________________________________
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems #shorts

[@Figma]

Use this Figma community file to follow along: bit.ly/3NQj2sf

[@grenishrai611]

Designers dream is a nightmare for developers.

[@haf.40]

Like architects and civil engineers

[@HappyLightning-ku7nh]

It's not really difficult to code if you have good animation skills

[@fineartstudio7146]

Designer Rock 🤟, Developer Shock 😱

[@marufhassan634]

Devs- This is my nightmare fuel

[@ankushbhagatofficial]

If you understand how it's happening then it's not a big deal

[@dizzyrocket2000]

More content like this please, Figma! 👍

[@WebsiteTutor]

Two days to code a switch 😅

[@k-yo]

not only that, but a VERY edge-case switch. It's definitely doable, but not much reusable everywhere

[@fortytwo244]

don't worry, soon enough we will go from figma to code, no developers needed, thanks to ai

[@platinumdynamite]

Is it really, though? This is CSS-level work with a bit of masking and creativity.

[@ebubesunday4880]

what I had in mind to say 🤧😂

[@Rhidayah]

@@fortytwo244fuck me, that’s already existed

[@chenglongsong-oj7zi]

The developers said either you died or I lived today

[@JacquelineCorbett]

This is a great way to beginners how they can animate features in their designs

[@jaijethwa4243]

Took me time, but finally I did it! Thanks ❤

[@bob_kazamakis]

That’s great. Now add a third state for OS preference

[@Technoph1le]

Love it! Keep it up

[@mykolagolovko6473]

Cool! Very simple, very creative.

[@letzsnuggzz]

I wish these shorts could be saved.

[@user-rt5fm2jt2x]

Simple, share - copy link- open google- search UA-cam video downloader - paste ❤

[@-Cocell]

Hello there. This reply should serve as a reminder.
Also, you can save shorts in a playlist.

[@abdu_10]

you can look at the three dots on top right corner

[@CG_Spykid]

Love it!

[@rilwanj]

On my tool I use node states to accomplish this, it’s like css classes that can be applied but states can manipulate the node’s children states too.

[@rayforever]

Instead on empty White circle, they should've used icon of sun and moon with rotated animation ,

[@KADALIHARICHARAN]

I didn't understood how to add an instance in to a frame and test it in presentation view any one explain in detail please 😅

[@natemaher1389]

Now do it in CSS 😂

[@KellerG68]

Good idea but how could someone code this ? 🤨

[@fortytwo244]

don't worry about that, this is just Dribbble content

[@KellerG68]

@@fortytwo244 I know well the clients, if they see it, they want it 😂

[@GregNOrekhov]

many libraries, many coders who can assemble it :)

[@pain3937]

@@KellerG68 Then you design it for them... We are just the UI Designers, not the devs lol. The devs are going to cry though poor fellas😂😅

[@SMMandTutorial]

Amazing

[@anuragbose4283]

If you start doing these, your team will never take tou seriously😂😂

[@irhmkrm]

I see my FE dev next to me throw his keyboard 👀

[@mhdpro]

Web developer 🥲🥲

[@killertiger5499]

how do i acces the screen in step 3?

[@MrQuackersHD]

But how do you add this stuff to a site or app?

[@Shutila_]

Does it work in free version figma?

[@adevikthur]

Awesome

[@afiabatool450]

Awesome! It's a great and easy guide to create such a complex prototype.
Edit: It's called a Toggle button actually.

[@amir_hjr]

Programmer reaction: '_'

[@rafi481]

Kekw

[@soft2]

Shouldn't the sun and moon go in opposite directions really? So when you switch to night, the sun goes down rather than up. And then you switch to day, the sun comes up rather than goes down.

[@shakhboz_usmonov]

Cool

[@ejy184]

아 역쉬 피그마 👍🏻👍🏻👍🏻👍🏻👍🏻

[@alias_tetrial]

Now push it to the developer, ehehe

[@uriafassina]

e fodazze o dev! kkkkkkkkk

[@michaeloj126]

Anyone know the name of the BG music

[@jaweriasultan7510]

Amazing. But can someone guide me as how to paste this toggle onto a frame and create interaction.

[@sc2419]

Just drag one switch into your frame by holding option button. You will see a violet border (component).

[@megaroeny]

Heck yes

[@caio0gobbo]

Poor dev RIP

[@laguirre94]

❤

[@eviqueen0515]

El que lo programa: 👉🙃

[@CaptainLenK]

I'm a Designer and I think that the aesthetic parts of the switch itself are entirely unnecessary to build.
It is sad that an application that lives from User Experience Design fosters aesthetics rather than usability.
The only interesting aspect here is the person who thought about the vertical format and used Figma in a vertical way so users (other designers) can see the entire Figma app most of the time while he's designing

[@jericotaladtad8061]

want

[@TiffanyNg100]

Crying in app dev

[@AlexMercadoGo]

I literally saw a TikTok for devs making fun of designers with this exact example a year ago

[@jamesstables6636]

cool but then you can’t change anything in your prototype based on the switch status. so you have a file full of animation without reaction. zzzzzz

[@Kickinoffthenoobs]

Sorry to say but its distracting n creating more confusion. Design should be simple.