Let's make a switch in Figma
ฝัง
- เผยแพร่เมื่อ 22 ส.ค. 2024
- 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
Use this Figma community file to follow along: bit.ly/3NQj2sf
Designers dream is a nightmare for developers.
Like architects and civil engineers
It's not really difficult to code if you have good animation skills
Designer Rock 🤟, Developer Shock 😱
Devs- This is my nightmare fuel
If you understand how it's happening then it's not a big deal
More content like this please, Figma! 👍
Two days to code a switch 😅
not only that, but a VERY edge-case switch. It's definitely doable, but not much reusable everywhere
don't worry, soon enough we will go from figma to code, no developers needed, thanks to ai
Is it really, though? This is CSS-level work with a bit of masking and creativity.
what I had in mind to say 🤧😂
@@fortytwo244fuck me, that’s already existed
The developers said either you died or I lived today
This is a great way to beginners how they can animate features in their designs
Took me time, but finally I did it! Thanks ❤
Instead on empty White circle, they should've used icon of sun and moon with rotated animation ,
I wish these shorts could be saved.
Simple, share - copy link- open google- search TH-cam video downloader - paste ❤
Hello there. This reply should serve as a reminder.
Also, you can save shorts in a playlist.
you can look at the three dots on top right corner
That’s great. Now add a third state for OS preference
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 😅
Love it! Keep it up
Cool! Very simple, very creative.
Good idea but how could someone code this ? 🤨
don't worry about that, this is just Dribbble content
@@fortytwo244 I know well the clients, if they see it, they want it 😂
many libraries, many coders who can assemble it :)
@@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😂😅
Love it!
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.
Amazing
If you start doing these, your team will never take tou seriously😂😂
I see my FE dev next to me throw his keyboard 👀
Now push it to the developer, ehehe
Now do it in CSS 😂
Programmer reaction: '_'
Kekw
아 역쉬 피그마 👍🏻👍🏻👍🏻👍🏻👍🏻
Web developer 🥲🥲
e fodazze o dev! kkkkkkkkk
Awesome
Awesome! It's a great and easy guide to create such a complex prototype.
Edit: It's called a Toggle button actually.
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.
WHY?!?!?! WHYYYYYYYYYYY!!!!!!!!
Anyone know the name of the BG music
how do i acces the screen in step 3?
Does it work in free version figma?
Amazing. But can someone guide me as how to paste this toggle onto a frame and create interaction.
Just drag one switch into your frame by holding option button. You will see a violet border (component).
But how do you add this stuff to a site or app?
Poor dev RIP
Cool
want
El que lo programa: 👉🙃
Crying in app dev
Heck yes
❤
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
I literally saw a TikTok for devs making fun of designers with this exact example a year ago
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
Sorry to say but its distracting n creating more confusion. Design should be simple.