Figmaster - Build your design system by doing exercises in Figma | Product Hunt
More details

About Figmaster

About the course

Do you or your team want to learn how to build a design system for Figma from scratch?

I receive many requests from team managers and individuals like these:

Hi Matt, are you available for any freelance work? We need help with doing a color theory audit for our Figma design system and software. There are definite problems as different designers did it, and several parts don’t work together. We are trying to find someone great with Figma, Design Systems, and Color Theory.
Hey Matt, Would you find a few hours to share your expertise in Figma with our designers? We have been using Figma in cooperation with our customers, and we have some difficult questions to answer. We also want to improve our workflow. Please let me know.

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 and auto layout.

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

In Figmaster, you will learn how to:

  1. Create and use Figma styles efficiently.
  2. Create simple and advanced components with auto layout and variants.
  3. Create and use an icon library for your system.
  4. Design simple documentation for your library.
  5. Use the components and styles to build user interfaces with the design system in Figma.
  6. Use auto layout to create advanced layouts.
  7. Use Figma plugins efficiently to speed up your workflow.
  8. Use crucial keyboard shortcuts.
  9. Work on a design system in a Team library.
  10. Think out of the box in Figma.

Table of contents

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.

Module 1. Style Guide

Available now

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.

Chapters

  1. Typography
  2. Neutral colors
  3. Primary color
  4. Functional colors
  5. Layout and spacing
  6. Shadows (Elevation)
  7. Icons
  8. Resources

Module 2. Components

Available now

In the second module, we'll use the Styles, icons, and rules from the previous module to create the components. You will learn how to properly use auto layout and variants to build pixel-perfect Figma components.

Chapters

  1. Accordion
  2. Badge
  3. Button
  4. Card
  5. Checkbox
  6. Dropdown
  7. Input
  8. Menu
  9. Modal
  10. Notification
  11. Radio Button
  12. Select
  13. Switch
  14. Table
  15. Tabs
  16. Textarea
  17. Tooltip

Module 3. Documentation

Available now

In the third module, we'll create documentation components and frames. Then, we'll document our components and styles.

Chapters

  1. Documentation components
  2. Documentation page
  3. Documenting the style guide
  4. Documenting components

Module 4. Use it

Available now

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.

Chapters

  1. Sign Up page
  2. Log In page
  3. Booking App UI
  4. Customizing your design system

Module 5. Team license bonus

Available now

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. This module will be available for people who bought the team license.

Chapters

  1. Working with design systems in a team
  2. Onboarding new designers
  3. Extra resources on design systems for teams
Ready to become the figmaster?

Start learning today

Get access to the course and learn how to build your own design system from scratch in Figma!