Practical UI - Figma Design System - Figma design system and UI kit

A lean and powerful Figma design system and UI kit to help you design just about any website or application you can imagine.

Add a comment

Replies

Best
Your book was killer with great actionable insights. Looking forward to diving into your design system to learn and level up my skills in this space too.
So glad to hear it. I've been studying design systems for many years, so hopefully it's helpful 🤞
Congrats on the launch! This looks like such a time saver. Lovely website as well.
Thanks 🙏 I used the design system to create the website 😁
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.
having a solid design system definitely builds strong foundations for any project. Great suggestion, I should definitely get some numbers on the landing page 💯 There are around 50 main components that have hundreds of variants.
Wow - 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?
Thanks 🙏 1. Yes, the design system demonstrates how the design guidelines in the book apply to lots of different components. It also shows the colour, typography, and spacing tokens in action. 2. I don't currently, but am looking into how I can offer that option. 3. No, it's only in digital PDF format for now, as I'm still planning on making future updates. It would be cool to have a physical copy one day 📘
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?
Thanks 🙏 There are thousands of Figma plugins you could use with this design system, but you actually don't need any at all. Here are some of my favourite Figma plugins:
Congratulations on launching your Figma design system, Adham! Your dedication and expertise really shine through. Love how you've addressed common pain points like color consistency across backgrounds and elevation in dark mode. The interaction states for prototyping are a fantastic touch. Your focus on accessibility and user-friendliness is commendable. As someone who's been in the field since 2005, your insights are incredibly valuable. Thanks for sharing your knowledge with the community. Can't wait to see how designers put this system to use!
Thanks for the support 🙏 I tried to address many of the issues I noticed with other design systems. The colour token system was the toughest challenge of all. It took me months to decide on the current colour system. Looking forward to seeing it out in the wild 🙌
One of the best resources for designers! Great work and congrats team!
Thanks for the support Chris 🙏 I'm currently a team of one. Just me, myself, and I 😅
this is a really great resource! i just love it! congrats on the launch!
thanks for the support 🙏
Wohoo, finally 🙌. Love the UI. 🫶👏👏👏
Thanks so much 😀
Adham your work is unparalleled in the UI world. You have become my go-to reference. Keep it up! 🧨
Thanks so much, that's nice to hear 🥹