The Figma design system and UI kit, Practical UI, offers prebuilt components, styles, and variables to help designers create websites and applications quickly. It includes customizable styles, interaction states, pixel-perfect icons, and examples of designs created with the system. The system is built with Figma's latest features and follows best practices from 2024, with a focus on intuitive and accessible design. Pricing options are available for individual and team licenses.
Design fast faster
A lean and powerful Figma design system and UI kit to help you design just about any website or application you can imagine.
Loved by designers
Figma design system components
Figma design system components
Design 10x faster with prebuilt components and styles.
Predefined styles for colours, typography, and spacing, plus hundreds of component variants.
Built with Figma's latest features and best practices from 2024.
Customise components quickly and easily with optimised auto layout, variables, properties, and variants.
Designed to be intuitive, accessible, and beautiful.
Every component was crafted with usability in mind, as well as being 100% WCAG 2.1 level AA compliant.
Figma styles
Customisable styles
Use the power of variables to quickly and easily change colour and typography styles to match your brand.
- Colour variables
- Light & dark mode
- Spacing variables
- Typography variables
- Elevation shadows
- 4px layout grids
Colour variables
A simple yet powerful colour system
A concise set of colour variables named and organised based on how they’re used. Easy to learn, but flexible enough to scale for complex design systems.
Variable modes
Light and dark mode
Predefined colour variables allow you to automatically switch between light and dark mode instantly.
elevation levels
Depth done right
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.
Component library
Intuitive components
Access a vast collection of powerful components designed based on decades of extensive research.
- Hundreds of variants
- Powerful properties
- Best practice design
- Easy to use and customise
- Interaction states for prototyping
- Auto layout enabled
Prototyping
Interaction states
To speed up prototyping, interactive elements change their appearance when they’re interacted with.
Transparent state layers
Hover and press states are indicated using a transparent overlay that sits on top of interactive elements.
This systematic approach works for all sorts of components, from buttons to dropdown menus, and it doesn’t require the addition of extra colour variations to the colour palette.
Pixel-perfect icons
Use the beautiful, neutral, and open source icon set from Feather or add your own.
- 300+ open source icons
- 2px stroke weight
- 24px x 24px grid
Examples
Made with Practical UI
You’ll be surprised at how fast and easy it is to design just about any website or application you can imagine.
Music player designed in 20 mins
Login page designed in 10 mins
Application page designed in 15 mins
Product page designed in 20 mins
Blog listing designed in 10 mins
Blog post designed in 5 mins
UI design book
Based on design guidelines from the book
Learn a logic-driven approach to design intuitive, accessible, and beautiful interfaces using quick and practical guidelines.
Loved by thousands
Book reviews
Loved by thousands
Join thousands of designers, developers, user researchers, and product managers gaining years of experience in just hours.
Pricing
Pay once, use forever.
Use the Figma design system in unlimited personal and commercial projects and get free updates for life.
30% off
Solo
Single license for 1 person
$125$87USD+ tax
- Single user license
- Figma file (book not included)
- Use in unlimited projects
- Free lifetime updates
- 2024 Figma features
Up to 60% off
Team
License for 3 or more people from
$375$238USD+ tax
- Everything in solo
- Multiple user license
- Secure payment with Lemon Squeezy
The designer
Hi, I'm Adham
I’m a product designer from sunny Sydney, Australia, specialising in UI design and design systems. For nearly 2 decades, I’ve enjoyed working on products used by millions of people around the world. Check out my portfolio.
180,000+ followers
Featured
Featured here & there
I’ve been fortunate to have my work featured in books, magazines and websites around the world.
My portfolio was mentioned in Smashing Magazine's book
I spoke at a global design event held by General Assembly
I was featured in my favourite web design magazine
Frequently asked questions
If you have any other questions or feedback, contact me and I’ll get back to you shortly.
What is a design system?
Why should I use a design system?
Does this design system also include code?
Do I need a team licence?
Do you have an affiliate program?
Do you offer refunds?
Do you offer student pricing?
Do you support purchasing power parity?
Why can't I pay?
Design faster today
A lean and powerful Figma design system and UI kit created with accessibility and usability in mind.
Copyright © 2024 Practical UI