Product Hunt logo dark
  • Launches
    Coming soon
    Upcoming launches to watch
    Launch archive
    Most-loved launches by the community
    Launch Guide
    Checklists and pro tips for launching
  • Products
  • News
    Newsletter
    The best of Product Hunt, every day
    Stories
    Tech news, interviews, and tips from makers
    Changelog
    New Product Hunt features and releases
  • Forums
    Forums
    Ask questions, find support, and connect
    Streaks
    The most active community members
    Events
    Meet others online and in-person
  • Advertise
Subscribe
Sign in
Subscribe
Sign in
Practical UI

Practical UI

A book to learn a logic-driven approach to UI design

5.0•27 reviews•

1.9K followers

A book to learn a logic-driven approach to UI design

5.0•27 reviews•

1.9K followers

Visit website
Interface design tools
•
Design resources
•
Design mockups
•
UI frameworks
•
Books
A book to learn a logic-driven approach to design intuitive, accessible, and beautiful interfaces using quick and practical guidelines.
  • Overview
  • Launches3
  • Reviews27
  • Alternatives
  • Team
  • Awards
  • More
Company Info
practical-ui.com
Practical UI Info
Launched in 2023View 3 launches
Forum
p/practical-ui
Awards
Practical UI was ranked #4 of the day for March 14th, 2023
View all
  • Blog
  • •
  • Newsletter
  • •
  • Questions
  • •
  • Forums
  • •
  • Product Categories
  • •
  • Apps
  • •
  • About
  • •
  • FAQ
  • •
  • Terms
  • •
  • Privacy and Cookies
  • •
  • X.com
  • •
  • Facebook
  • •
  • Instagram
  • •
  • LinkedIn
  • •
  • YouTube
  • •
  • Advertise
© 2025 Product Hunt
SocialMediumX

Similar Products

Design+Code
We teach designers code & developers design.
Design & CreativeOnline learning
Befront
Befront
Learn UX/UI design skills in practice with bite-sized tasks
4.9(8 reviews)
Interface design toolsFigma Plugins
Uxcel
The easiest way to learn UX/UI design
5.0(19 reviews)
Interface design toolsOnline learning
Mezcal UI
Mezcal UI
Magically crafted components for your Web projects.
5.0(2 reviews)
Data visualization toolsLanding page builders
Jackie Brown Works
Jackie Brown Works
Subscription-based design: unlimited design for a flat fee
Interface design toolsDesign resources
This is the 3rd launch from Practical UI. View more
Practical UI - Figma Design System

Practical UI - Figma Design System

Figma design system and UI kit
Practical UI - Figma Design System was ranked #4 of the day for July 30th, 2024
A lean and powerful Figma design system and UI kit to help you design just about any website or application you can imagine.
Practical UI - Figma Design System gallery image
Practical UI - Figma Design System gallery image
Practical UI - Figma Design System gallery image
Practical UI - Figma Design System gallery image
Practical UI - Figma Design System gallery image
Practical UI - Figma Design System gallery image
Practical UI - Figma Design System gallery image
Practical UI - Figma Design System gallery image
Practical UI - Figma Design System gallery image
Practical UI - Figma Design System gallery image
Payment Required
Launch tags:
Design Tools•User Experience•Design templates
Launch Team / Built With
Adham Dannaway
Figma
Elementor
Lemon Squeezy

What do you think? …

Adham Dannaway
Adham Dannaway
Practical UI

Practical UI

Maker
📌
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
Report
1yr ago
Adham Dannaway
Adham Dannaway
Practical UI

Practical UI

Maker
@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.
Report
1yr ago
Adham Dannaway
Adham Dannaway
Practical UI

Practical UI

Maker
@subham_sahu1 Thanks, glad you liked the 16 tips article. Seems to be helping lots of people which is great.
Report
1yr ago
Yura Turivny
Yura Turivny
@adhamdannaway Adham, your dedication truly shines through in this Figma design system! The focus on accessibility and usability is commendable. The transparent color approach and depth solutions are genius. Excited to see the impact! 🚀
Report
1yr ago
Adham Dannaway
Adham Dannaway
Practical UI

Practical UI

Maker
@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.
Report
1yr ago
Abinash Mohanty
Abinash Mohanty
@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 🤌
Report
1yr ago
Bon
Bon
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!
Report
1yr ago
Adham Dannaway
Adham Dannaway
Practical UI

Practical UI

Maker
@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 👍
Report
1yr ago
Ramya PK
Ramya PK
Swatle

Swatle

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!
Report
1yr ago
Adham Dannaway
Adham Dannaway
Practical UI

Practical UI

Maker
@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?
Report
1yr ago
Ramya PK
Ramya PK
Swatle

Swatle

@adhamdannaway Not yet, but i'll add it to my list Good luck with the launch!
Report
1yr ago
Adham Dannaway
Adham Dannaway
Practical UI

Practical UI

Maker
@ramya_pk thanks 🙏 Hope you find the book helpful too.
Report
1yr ago
Appwrite
Appwrite — The open-source Vercel alternative
The open-source Vercel alternative
Promoted

Practical UI Launches

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

Launched on July 30th, 2024

Practical UI - Figma Design System was ranked #4 of the day for July 30th, 2024
Practical UI - Figma Design System was ranked #4 of the day for July 30th, 2024
Practical UI - 2nd Edition
Practical UI - 2nd Edition UI design book and bonus Figma design system starter kit

Launched on March 26th, 2024

Do you use Practical UI?

5.0
Based on 27 reviews
Review Practical UI?

Practical UI is highly praised for its practical, approachable guidance on UI design. Users appreciate its clear, concise advice, making it a valuable resource for both beginners and experienced designers. The book is noted for its emphasis on accessibility and usability, with readers finding it an essential tool for creating user-friendly interfaces. Adham's expertise is evident, with many reviewers highlighting the book's ability to articulate design decisions effectively. Overall, Practical UI is recommended for anyone looking to enhance their design skills with actionable insights.

Md Kamrul IslamShane KavanaghStephen Deutsch
+24
Summarized with AI
Pros
Cons
Reviews
Helpful

You might also like

Design+Code
We teach designers code & developers design.
Befront
Befront
Learn UX/UI design skills in practice with bite-sized tasks
Uxcel
The easiest way to learn UX/UI design
Mezcal UI
Mezcal UI
Magically crafted components for your Web projects.
Jackie Brown Works
Jackie Brown Works
Subscription-based design: unlimited design for a flat fee
View more
Pros
practical guidelines (12)
design principles (4)
suitable for beginners and experienced designers (4)
comprehensive resource (2)
easy to understand language (2)
visual examples (2)
Cons
price not adjusted for all markets (2)
Jake Hawkes
Jake Hawkes
•4 reviews
Adham offers an invaluable resource for maintaining a better understanding of best practices when you have not been in the trenches of A/B testing. I use this as a baseline for most of my work.
Report
1yr ago
Adham Dannaway
Adham Dannaway
Practical UI

Practical UI

Thanks for the recommendation Jake. Conventional guidelines are a great baseline for any website/app. Best of all, they're quick, easy, and free 👍
Report
1yr ago
Bryan Kearney
Bryan Kearney
•9 reviews
One of the best primers on WHY one design is better than another. Any professional will see and understand all the important considerations that Designers make when crafting a high performing Design.
Report
2yr ago
Adham Dannaway
Adham Dannaway
Practical UI

Practical UI

Thanks Bryan, I was keen to highlight the "why" behind the UI, to demonstrate that UI design is much more than making an interface look pretty.
Report
2yr ago
Blake Arnsdorff
Blake Arnsdorff
•1 review
This book has been an epic teaching tool both for UX mentees to help them see applied examples of UI design principles in action, as well as foundational tool for teams I've worked with when collaborating on design systems.
Report
2yr ago