Introduction

Hello, Figma friend! 👋

Your license key was successfully verified and now you have access to the course! Thank you for supporting the Figmaster. I hope you will learn a lot and you'll be able to apply the acquired knowledge to your everyday work.

Make sure to read the Getting started guide you found in the zip file after the purchase. There you'll learn how to use the Figmaster plugin and the files you got. Please read EVERYTHING from top to bottom, and don't skip modules or chapters. It's crucial to finish the course without problems.

In this short introduction chapter, you'll learn what we'll cover in the course and how it's structured. I'll also share my story with the design systems and you'll learn a bit about my projects.

The program

The Figmaster is divided into modules. The individual license contains four modules:

1. Style Guide
2. Components
3. Documentation
4. Use it

The team license contains one extra module: Team license bonus.

Each module contains chapters, and you can navigate through chapters from the menu in the top-right corner of the plugin. Chapters include a short introduction, steps with instructions, keyboard shortcuts present in the chapter. Each module has a resources chapter at the end. There you'll find helpful links to learn more about the topics we've covered. Most of the articles you'll find there affected my thought process, so if you want to understand the 'why', it's a good place to explore.

In the first module - Style Guide, we'll create design tokens and convert them into Figma Styles. We'll prepare the icon library for the entire system. We'll also set up some spacing rules that we'll follow in the next modules.

In the second module - Components, we'll use the Styles, icons, and rules from the previous module to create the components.

In the third module - Documentation, we'll create documentation components and frames. Then, we'll document our components and styles. In this module, I will also briefly describe how to make our components interactive.

In the fourth module - Use it, we'll build a simple UI with our design system. I'll also show you how to customize it for your needs. That is, change the colors, typography, or component properties to match your product's requirements.

In the last module - Team license bonus, I'll show you how to work with a design system we created in a team. You'll also learn how to onboard new designers to the library. As a bonus, you'll also get access to additional resources on design systems, such as links, articles, book recommendations, etc.

About the author

Ugh, I don't like to talk about myself because I'm an introvert. 😅 I think this is the hardest part of the whole Figmaster project for me. But well, here we go.

My name is Matt Wierzbicki. I live in Białystok, Poland. I am a product designer specializing in creating comprehensive design systems for Figma.

My story with Figma started in May 2017. The funny part is that I've never used Sketch and jumped directly from Photoshop/Illustrator to Figma simply because I couldn't afford Mac.

In 2017 I've also read about atomic design by Brad Frost. I enjoyed it and started to research the topic of design systems. I discovered several design systems and started reading about them in medium articles, blogs, and books. I learned that they help to keep a product design consistent, build products faster, invest more time in other areas such as research or tests and that every design token and component has its role in the system. I felt that it's something I want to do in my design career. Creating style guides, documentation and components was exciting for me, and I could spend hundreds of hours recreating different systems from scratch.

In December 2018, I released my first big project called Product Design Kit - a free components and styles library made exclusively for Figma. It's a kick-starter pack for small projects based on the atomic design approach and modified for my needs. To learn more about the story behind it, I would recommend reading this Medium post. The article received highly positive feedback (over 4K claps), and it was a very positive surprise since it was my first article ever. Right now, I can see that PD Kit is still getting new downloads every day.

After the release of the PD Kit, I felt the need to continue growing in the area of design systems. I liked organizing components and styles, creating patterns and guidelines. I've read a few books and dozens of articles in this field. I was also exploring various systems like Carbon, Material, Polaris, etc. I've noticed that among all systems I've researched, I really liked to go back to Ant Design System to look for inspiration in components and styles organization. It was one of the largest design systems I learned about, and it had almost every component I could use. It was so handy that I've started to move its guidelines and components to Figma someday. Day after day, component after component.

After three months of working after hours, I've managed to create over 2100 components following the Ant Design library's principles. In June 2019, I released the Ant Design System for Figma. Minding all the time spent on doing this, I've decided to make it a premium resource and sell it on Gumroad. I've noticed an opportunity to help companies kick start their large projects based on React and Figma. I wrote an article about it on Medium too. Now, Ant Design System is helping thousands of individuals and companies. I am maintaining it and providing support for people who bought it. I recently updated it with Auto Layout and Variants feature.

Up until now, I've built dozens of systems, including client work and side projects. If you are wondering how I'm finding the time to do freelance work and all these projects after hours, it's simple. The products I'm doing, I create for my own workflow to help me deliver client work faster. In Figmaster, I want to show you how to use Figma to achieve the same results efficiently. I want to teach you Figma so you can use it like Chopin used to play the piano.

Before we start

Before we start, make sure to turn off all notifications and close other apps or tabs (if you are using the browser version of Figma). That way, you'll be able to focus 100% on the lesson.

Windows / MacOS keyboard shortcuts

In the Figmaster, I use Windows keyboard shortcuts. If you use macOS:

• CTRL = Command ⌘
• ALT = Option ⌥

OK! Time to begin! Good luck on your journey on becoming the Figmaster!