Design all the states, not just the happy path.
When creating a design system, it's easy to focus only on the default state, but developers need much more.
In the case of checkboxes like this component, devs require unchecked, indeterminate, and checked states, as well as focus states for keyboard navigation, and disabled states that meet contrast requirements.
This isn't just extra work; it's essential for accessibility. Screen readers need accurate state communication, and keyboard users need visible focus. If you skip these steps, the devs may make incorrect assumptions, leading to inconsistencies.
Investing a little bit of extra time in designing states can save hours of back-and-forth later. Your component isn't complete until every state is thoughtfully designed!
2
58
2.2K
Experimenting with some designs in Figma today 💫
Can't wait to bring these to life in Framer! Planning some fun microinteractions for this upcoming project.
31
1.7K
Things designers get excited about: cool buttons!
Building buttons like this for project is always a highlight! Adding these small details is such a fun way to enhance the feel and interactivity of a website.
Who else loves a good button interaction? 🔘
7
10
986
Recently crafted some nice, streamlined pricing cards for a client’s design system! Excited to take on more design system work soon—it’s always fun seeing cohesive visuals come to life.
Anyone else here love working on design systems? 👀
9
19
843
Nothing beats the satisfaction of building consistent components for a design system 🎨
Been slowly building this UI kit in my spare time (what spare time? lol) with hopes to complete it in 2025.
Design systems are one of my biggest passions. There's something so satisfying about creating components that work seamlessly together and scale beautifully.
What's your favorite part about building design systems?