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
@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.
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.
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.
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.
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.
Congrats on the launch, @adhamdannaway ! Been following your work for a while. More of these please
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.
Congrats on the launch Adham! π One of the best design systems out there π―
@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, Adham! π The Practical UI design system looks incredibly well thought out and user-friendly. Excited to see how it helps streamline design processes. Great job! π
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 π¨
@semigrownkid Thanks for the support Chris π I'm currently a team of one. Just me, myself, and I π
@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 π
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.
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 π¨
Launching soon!
this is a really great resource! i just love it! congrats on the launch!
Practical UI