Subscribe
Sign in
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.
82
Replies
Best
@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.
@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 ๐ค
@abinashmohanty Thanks, it took a while, but it was worth it. Really happy with how it turned out and looking forward to improving it in the future.
@bonvisions thanks ๐ You can definitely learn a lot from this Figma file. From how to create components to how to set up variables and styles. Hope you find it helpful ๐
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!
@tonyhanded well said ๐ Hopefully this will help lots of makers out there.
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.
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?
@mike_kyriacou 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 ๐
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.
@cameron_napoli 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.
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 ๐
@influence_labs thanks ๐ Design systems really are a cheat code to design fast ๐จ
Beautiful and easy to navigate!
I love that Practical UI doesn't rely heavily on "screen templates" and instead provides elements to play with.
Special shout out for Foundations. As a founder who recently learned some design, I'm grateful that it helps me understand how different elements of design work, like layering in "Elevation."
@kostyabolsh Thanks, glad to hear it. I wanted to create the most important/common components first. I'll potentially look at combining them into helpful sections and templates in the future. Would you find them helpful?
Getting the foundations right was important, as many design systems I've looked at seem to miss the mark, especially with elevation in dark mode. Creating the colour system was the hardest part and took the longest ๐จ
@ben_low So glad to hear it. I've been studying design systems for many years, so hopefully it's helpful ๐ค
Congratulations on the launch @adhamdannaway this is a good design system it will save a lot of time
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!
@ramya_pk Thanks. There are so many things including the colour system, accessibility guidelines, typography, spacing, and alignment. The list goes on. The colour system was definitely the toughest problem to solve. I looked at hundreds of design systems and spent months to get it right. Have you read the book yet?
Congrats on the launch Adham! ๐ One of the best design systems out there ๐ฏ
@ozan_oztaskiran Thanks for the support, appreciate the kind words ๐
@semigrownkid Thanks for the support Chris ๐ I'm currently a team of one. Just me, myself, and I ๐
The screen size adaptation and mobile variants drew me. Will definitely have fun using this. Congrats on the launch @adhamdannaway
Congrats on the launch, @adhamdannaway ! Been following your work for a while. More of these please
Wow, Adham! This design system sounds incredible! Love how youโve put so much thought into accessibility and usability. ๐ The color and elevation features are especially cool; theyโll definitely make a difference in user experience. Can't wait to try it out and see how it works in practice. Kudos for the student discount too! Looking forward to those details!
@blankwebdev Thanks for the positive feedback ๐ I looked at hundreds of design systems before creating this one, so hopefully it's helpful.
An impressive UI kit done by a great Designer and visionary! This is GOLD @adhamdannaway
@ramywafaa Thanks for the kind words. It took a while, but I'm really happy with how it turned out.
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!
@10xmarketer thanks ๐ My goal was to create a Figma design system that was simple yet powerful.
Simple enough to learn and use quickly. Powerful enough to create complex website applications.
Hey Adham,
Your Figma design system looks impressive and well-thought-out, especially with the focus on accessibility and usability.
How does your system handle updates and version control for ongoing design projects?
Congrats on the launch!
@kyrylosilin Thanks for the kind feedback ๐
From my end, I'll simply publish updates and email them to customers for free. I'll mark the new components.
For an ongoing project, customers will need to copy and paste new components into their existing file.
It would be handy if Figma had a neater way of handling ongoing updates. Do you know of any other design systems that have handled updates well?
Practical UI