Design Systems AcademyDesign Systems Academy

Join our Discord Community
Firma for Design Systems

Program

Figma Logo

Preparation Week

Week 0
1 hour duration

Join our first live session where will introduce ourselves to our classmates. We will also give you a cool short book to read through to get you started on Design Systems basics.

  • Introduce yourself to your classmates.
  • Learn how to use our Discord Community.
  • Brief intro to an UX Pin book to get you sarted on Design System basics.
  • Form a team with a classmate.
Figma Logo

File Structure & Tokens

Week 1
Tue & Thu
4 hours duration

In our first week we will learn how to structure our Figma files for Design Systems. We will learn a general design system structure, and we'll start learning about tokens and Figma Variables.

  • Learn how to structure your Figma files for better oraganisation.
  • Learn how to structure a Design System for better stakeholder understanding.
  • Understand what tokens are and how the are related to Figma Variables.
  • Start creating the first tokens for our Design System.
Figma Logo

Variables

Week 2
Tue & Thu
4 hours duration

In our second week we will learn about primitive tokens and how to create them at a global level using variables. We will learn the concept of alias tokens as well to give semantic meaning to our variables.

  • Become a master in variables and tokens.
  • Learn the difference between color, number and boolean variables.
  • Create our set of primitive/global variables and have them ready for the next step.
Figma Logo

Semantic Aliases

Week 3
Tue & Thu
4 hours duration

In our thrid week we will learn about semantic aliases, how to create them to start building our system tokens trough these variables. We will introduce the concept of modes to learn how to create diferent color schemes like dark or high contrast. In these lessons we will start applying our tokens to our components.

  • Learn how to use primitives and system tokens.
  • Learn how to apply auto layout and use the created tokens for spacing and other technical aspects.
  • Create our initial set of components and learn about variants.
Figma Logo

Component Variables

Week 4
Tue & Thu
4 hours duration

This week we will jump into component sets and learn about their properties and how to set them. Introduction to the responsive concept in Figma for components.

  • Learn how to set up different properties to create components variants.
  • Learn how to group components properties for better understanding.
  • Learn how to use auto layout to create responsive components.
  • Grow our components base and start learning how to document each component.
Figma Logo

Component Anatomy

Week 5
Tue & Thu
4 hours duration

Jumping into week five we will continue learning how to document our system to improve hand-off to the engineering team and also improve communication of our system to the product team and other stakeholders.

  • Learn component anatomy in detail and how to improve your mindset to create component structure.
  • Using plugins to create documentation faster and accurately.
  • Learn how to create documentation and use AI to make it even faster.
  • Continuing growing our components and learn more about documentation and delivery.
Figma Logo

Component Content

Week 6
Tue & Thu
4 hours duration

Coming to our sixth week we will create internal components that will help having great documentation. Learn to what level we need to document and docs pros and cons.

  • Learn about why we need to constrain documentation for better understanding.
  • Learn how to validate components for multiple langagues and scenarios.
  • Learn how to document components based on their structure.
  • Continuing growing our components and learn about what patterns and templates are and how to group them.
Figma Logo

Component Interaction

Week 7
Tue & Thu
4 hours duration

Week 7 is here and this is the perfect timing to learn how to add interactions to our components and how to document these interactions for better hand-off.

  • Learn about states in a real world app and how to express them in Figma.
  • Learn about types of animations. What is Lottie and how to use and communicate them.
  • Learn about types of animations like linear, ease-in, ease-out, bezier and how to document them in your Design System.
  • Yeah! You already guess it! Lets continue growing our components, patterns and templates.
Figma Logo

Governance & Scaling

Week 8
Tue & Thu
4 hours duration

Last week! Let's jump into understanding how to maintain and scale our Design System within our team, either it is a startup, an agency or a company, lets discuss about the different approaches.

  • Create components for your organisation.
  • Learn how to manage governance and accept requests for changes inside components of create new ones altogether.
  • Understand what it means to scale a Design System and how to define a strategy.
  • Let's show our work to our classmates. You are now graduated!

© Matias Bejas AKA Matmac 2024

Terms & Conditions

Hero Waves
Hero Holographic