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
Hey, congratulations on your launch! one question,
How does your design system integrate with existing workflows and tools used by designers? Are there any plugins or integrations that enhance its functionality?
Congratulations on this launch!
Just checked out Practical UI 2—this looks like a fantastic tool for designers. Great Work!
This looks so amazing! Congratulations on the launch! 🎉 It's truly inspiring to see the culmination of years of dedication and expertise come to life in such a comprehensive and intuitive tool.
Great job and looking forward to using it!
Such a simple, pretty, slick, modern design system! Honestly, with this, makers who can't afford designers but don't want to sacrifice design quality, can easily create awesome looking products. Let's be honestly, it takes beauty to convert customers. It instils a level of trust.
Congrats on the launch @adhamdannaway!
Wow @adhamdannaway - this looks like a beautiful and practical guide created over many hundreds of hours! Three questions:
1. Would you say this is a companion to your book?
2. If its complementary, which it looks like it is, do you have any bundling options?
3. Is your book available on Amazon or somewhere in physical form?
Hi Adham @adhamdannaway What have you launched today, the product is very impressive, hopefully it can become a pillar or bridge that can make things easier and can be useful in the future, and congratulations on the launch 🎉🎊
Congrats on the launch, @adhamdannaway ! Been following your work for a while. More of these please
This Figma design system and UI kit is impressive, blending accessibility and usability seamlessly. The lean yet powerful approach is exactly what’s needed to streamline design processes while ensuring inclusivity. Great job on creating a tool that adds real value!
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!
This looks solid! Part of the only reason I can design apps so fast is because of design systems and I'm looking forward to adding this to my arsenal 😎
Adham's Figma design system is a standout with its thoughtful color system and innovative approach to depth in dark mode. The interactive states and focus on accessibility really enhance usability. Great work!
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.
Amazing work on the figma kit. Designing websites and apps will be much quicker now.
A friend was just asking about a comprehensive Figma a kit. This looks perfect for them. Will definitely recommend!
Hi adham @adhamdannaway Congratulations on the product launch! Hopefully this will be a successful first step and open up many new opportunities. We are confident that this product will have a positive impact and meet customer needs. Good luck for the future 👏👏
