I’ve studied hundreds of design systems over the years, even before they were called design systems. I wanted to share what I’ve learned by creating a lean and powerful Figma design system that’s intuitive, accessible, and beautiful.
I’ve been pushing pixels since 2005 and have studied hundreds of design systems over the years, even before they were called design systems. I wanted to share what I’ve learned by creating a lean and powerful Figma design system that’s intuitive, accessible, and beautiful. I also wanted to fix the issues I’ve seen with many popular design systems.
Like most design systems, I wanted to include all the basics like colour, typography, spacing variables, light and dark mode, layout grids, and a comprehensive component library.
The problem with many popular design systems is that they don’t get the basics right. This makes them difficult to understand and to build on. One of my main goals was to fix common issues to create a solid foundation to build on. I’ll touch on some of the main things I focussed on throughout this case study.
Colour systems have a tendency to be overly complex and difficult to understand. I wanted my colour system to be easy to learn, but flexible enough to scale for complex design systems. I created a concise set of variables and named them based on how colours are used. The name of each colour token consists of up to 4 words that describe how and where to use the colour on an interface.
I decided to use transparent colours, rather than solid ones, to help ensure components look consistent on different coloured backgrounds. I think we’ll start to see more design systems make use of transparency in the future.
I also made sure colour combinations were 100% WCAG 2.1 level AA compliant so that the design system creates products that are accessible to everyone.
Variable modes in Figma make it super easy to switch between light and dark mode. So, I was keen to create a dark mode version of my design system. Designing for dark mode can be tricky and many designers struggle with it.
The main issue I see is that contrast isn’t consistent across light and dark mode. This means that users will have a different experience depending on what mode they’re using. Contrast should remain consistent across light and dark mode, this ensures that visual hierarchy remains constant. I tested the contrast of colours across light and dark mode to ensure consistency.
Elevation or depth in interface design is often designed incorrectly, especially in dark mode. Shadows work well to indicate different levels of elevation in light mode, but they’re difficult to see in dark mode.
To fix this issue, I used progressively lighter background colours to help indicate elevation in dark mode. Light comes from above, so the highest
elevation level is the lightest.
One of my biggest gripes with Figma design systems is that they can be slow and fiddly to use. To help fix this, I added properties to each component so they’re quick and intuitive to customise. I also tested out my design system by creating lots of example interfaces. This helped me iron out the kinks.
There’s more than one way to design a component like a dropdown menu or even one as simple as a form input field. Over the years, I’ve designed and user tested many variations of different components and this design system is the culmination of that work. Each component has been optimised to make it user-friendly and accessible for users.
It took me a bit of extra work, but I added interaction states to help speed up prototyping. This means that interactive elements like buttons change their appearance when they’re interacted with.
I indicate hover and press states using a transparent overlay that sits on top of interactive elements. This systematic approach works for all sorts of components, from buttons to dropdown menus, and it doesn’t require the addition of extra colour variations to the colour palette.
To create the landing page I used my design system paired with design guidelines from my UI design book. It was great to test out the components and it didn’t take long to design. My focus was to highlight the main features which set this design system apart from others.
I built the landing page using a WordPress website builder called Elementor. It’s relatively quick and easy to use, has lots of templates that you can customise, and has a free version. I hooked up the checkout to Lemon Squeezy to accept payments from all over the world.
The design system is based on logic-driven design guidelines from my UI design book, which has helped thousands improve their interface design skills. Learn more about how I created the book.
I hope this provides some insight into how I created my Figma design system. Working on this project has truly been a labour of love and I’ve spent thousands of hours crafting each and every detail. If you’re interested, you can check out a preview of the design system in more detail.
