Dive into UI Design Systems: theory and practice
Take your design skills to the next level with expert advice and practical insights on Design Systems.
This book is for you if you want to:
1. Learn the Fundamentals
2. Discover practical tips
3. Level up your skills
Let's start with the theory
Discover 15 years of my design expertise. In this part, I share key insights into design systems that I have gained throughout my career.
220+ pages
& Figma file
Next, it's time to dive into practical skills in Figma
In this part, I share the key steps of creating a Design System in Figma with detailed tutorials.
Mastering Design Systems: From Theory to Practice
This book covers the key elements of creating a Design System, exploring topics such as Foundations, Components, Variables, and more. It provides a balanced approach, combining theoretical knowledge with practical implementation.
Foundation
At the start of the book, I cover the Foundation of a Design System, like typography, colors, icons, spacing, grids, and design principles.
✓ Colors
✓ Typography
✓ Dimensions
✓ Icons
✓ Grid
✓ Elevation
✓ Corner radius
✓ Design Tokens
Components
I explain the essential elements of Design Systems, how they function in both design and practice, and how to build them using Figma.
✓ Categories
✓ Button
✓ Text Input
✓ Checkbox
✓ Radio Button
✓ Patterns
Variables in Figma
I also go into detail about variables in Figma. They are reusable values that you can use in your design, like colors or text styles.They help keep your design consistent and make it easier to update multiple elements at once.
Using my Figma file, you'll learn everything faster
In the Figma file, I've included everything from the book, so you can explore and see in practice how Foundation, Variables, and Components work while reading.
✓ Foundation
✓ Variables
✓ Components
✓ Examples