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

•

•

•

•

A book to learn a logic-driven approach to design intuitive, accessible, and beautiful interfaces using quick and practical guidelines.

Practical UI: A book to learn a logic-driven approach to UI design | Product Hunt

This is the 3rd launch from Practical UI. View more

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.

Practical UI - Figma Design System gallery image

Payment Required

Launch tags:

Design Tools•User Experience•Design templates

Launch Team / Built With

Adham Dannaway

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

Practical UI

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

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

Practical UI

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

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

Practical UI Launches

Do you use Practical UI?

Practical UI Launches

Do you use Practical UI?

Practical UI - Figma Design System

You might also like