Practical UI

Hey Hunters 👋, 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. Creating this design system has truly been a labour of love and I've spent thousands of hours crafting every detail. It's based on logic-driven design guidelines from my UI design book, Practical UI, which has helped thousands improve their interface design skills. This Figma design system has all the usual stuff including colour, typography, and spacing variables, light and dark mode, layout grids, and a comprehensive component library. Here's what sets it apart from other design systems: • A simple yet powerful colour system - a concise set of variables are cleverly named and organised based on how colours are used. Transparent colours, rather than solid colours, are used to help ensure components look consistent on different coloured backgrounds. • Depth done right - elevation or depth is often done incorrectly. Shadows work well to indicate different levels of elevation in light mode,
but they’re difficult to see in dark mode. So, progressively lighter background colours are used to help indicate elevation in dark mode. Light comes from above, so the highest
elevation level is the lightest. • Interaction states - to speed up prototyping, interactive elements change their appearance when they’re interacted with. Hover and press states are indicated using a transparent overlay that sits on top of interactive elements. • Accessible and user-friendly - components have been designed based on extensive research to be intuitive and inclusive with hundreds of variants and powerful properties. To celebrate the release, I’m offering a 30% discount for 1 week only. There's also parity pricing for supported countries as well as a student discount. I hope you find the Figma design system helpful. Keen to hear your thoughts and feedback 😃 Cheers, Adham

I am a developer and recently, I have been learning Fgima! Practical UI seems to be very useful to me! Congrats on your launch, Adham. Best luck!

Hi @adhamdannaway , I noticed your design system is based on guidelines from your book, Practical UI. How do the principles in your book translate into the Figma design system? Any particular aspect you’re most proud of? Great launch!