UI Design Systems Mastery by Marina Budarina
Unlock Your Design Potential and Create Stunning User Interfaces with UI Design Systems Mastery
It is perfect for:
Full-time Designers of any level (from junior to senior) - who want to improve their skills and knowledge to get a promotion or a better job
Freelancers - who want to work faster, impress their clients with a level of professionalism, and go to another level of projects
Non-designers - who want to break into UI/UX and get a good foundation
Developers - who want to know how designs and prototypes are meant to be translated into code, speed up the development process and reduce misunderstandings during the handoff.
Managers - who want to understand what a Design System is and the purposes it serves
Part 1 - Introduction
In this part, I will tell you about my design journey; share with you some very important ideas and points that helped me to land a job (and will help you)
Part 2 - Design system basics
Here I’ll tell about what a design system is, a little bit of history, Pros & Cons, what types of design systems exist, myths and misunderstandings, and when you need and don’t need it.
Part 3 - Preparation and steps overview
In this part, we will define which steps you should take before creating any design system; will cover the main process you will take when creating any part of your design system.
Part 4 - Foundations
In this part, we will talk about tokens, spacing, colors, typography, and grids. We will cover what each element does, how to create it, how to name and some best practices.
Part 5 - Components, patterns, templates.
Here we will talk about the atomic approach, what components are, what to consider before creating any component, and talk about naming, scaling, and token usage. I’ll explain where to start building a component library and show different methods of creating components in Figma. Then we cover compound components, patterns, templates, and pages, and whether you need them.
Part 6 - Documentation
Here we will cover why we need documentation, in which forms it can exist, which tools you can use, and what should be inside.
Part 7 - Implementation.
Here I’ll show you 3 ways how you can approach design systems: adopt, adapt or create, will provide you step by step guide for each of them and clarify which approach is better for you. I also will provide tips to freelance designers on how they can use design systems to their advantage.