Figmaster

About this plugin

The world's first design systems workbook for Figma

Learn how to build your design system from scratch by doing exercises in Figma

Visit the official website to learn more

What is Figmaster?

In short, the Figmaster plugin is a workbook for Figma that contains a large set of exercises on how to build your modern design system from scratch.

How does it work?

By doing exercises in Figma, you learn and create your guide style and component library simultaneously. It is a format that will help you get the most out of each lesson. By learning - you create, and by the way, you get to know keyboard shortcuts, plugins, and techniques of working in Figma that will speed up your workflow. Everything happens in Figma - no distractions.

Course description

Design Systems are becoming so popular because they make products more consistent, accessible, improve their usability, and reduce design decision-making.

Nowadays, companies and individuals need to learn how to design advanced components, style guides, and documentation in Figma. Improving the workflow and onboarding the new designers to the team is also a challenge.

In Figmaster, you will learn how to create a design system from scratch in Figma. The Figmaster is purely and simply about practice, so you can start using acquired knowledge right away.

In this course, you will learn how to set up all the needed design tokens, such as defining proper grids, layouts, spacing, managing icons, choosing and creating color and typographic scales. You will also learn how to make the components like buttons, inputs, modals, text areas, checkboxes, notifications, radio buttons… You will learn how to name components correctly using naming conventions and translate your components into variants. You will also learn how to improve your workflow by using handy keyboard shortcuts, plugins, and tricks. At the end of this course, you will create your own complete Design System and apply it anywhere with confidence.

In the team version, you will learn how to work on a design system in a team and how to onboard new designers with the Figmaster. I will also share resources so you can learn more about design systems theory and get inspiration from the existing systems.

We will use the full potential of Figma, making our Design System with variants, auto layout, and the latest Figma feature: interactive components. 🎉

So if you want to learn how to create a Design System from scratch in Figma, this is for you.

Module 1. Style Guide

In the first module, 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.

Module 2. Components

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

Module 3. Documentation

In the third module, we'll create documentation components and frames. Then, we'll document our components and styles. In this module, you'll also learn how to make your components interactive.

Module 4. Use it

In the fourth module, 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 or brand requirements.

Module 5. Team license bonus

In the last module, 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.