Practical UI

A lean and powerful Figma design system and UI kit created with accessibility and usability in mind.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@subham_sahu1 Thanks 🙏 I've used auto layout to create all components to ensure that they're responsive.

For some components, I've created mobile variants if needed.

Luckily, I've found that many components work across desktop and mobile already.@adhamdannaway Great to know that it handles multiple devices and screen size. I recently read your medium article 16 little UI design rules. And I saw you guys here in Product Hunt. Great to see you guys here. Congrats and All the best@subham_sahu1 Thanks, glad you liked the 16 tips article. Seems to be helping lots of people which is great.@yura_turivny Thanks, that's great to hear. I combined the best parts of hundreds of designs systems to create this one and also tried to fix the pain points I noticed too.@adhamdannaway Thanks for putting so much effort into building this logic-driven design system. I can't wait any longer to try it. Great stuff, 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!Purchased. Unlike some other Figma component libraries this looks... Practical (descriptive branding :D), yet extensive.

Good luck with the launch Adham!@martinmaricak Thanks, hope you find it helpful. I studied hundreds of design systems over the years. My goal was to create something simple yet powerful, as design systems tend to be overly complex which makes them harder and slower to use.I've always believed that Figma empowers everyone to be a designer, but well, everyone doesn't have an eye for design. I totally think starting with a design system or brand system is the way to go.

One suggestion for the landing page, maybe mention how many components are included. I couldn't find that anywhere on the page, and it's something I was curious about.