Design Systems Academy

Join us on Discord

New course

Online Design Systems
course for Figma
— including code —

Join a live-cohort learning adventure.
8 weeks, lots of Figma, code, and new friends!

See the program Enroll Now — 699€

2 cohorts coming up in fall 2025

Cohort 1 · Mon & Wed Sept 15th to Nov 5th 2025

Cohort 2 · Tue & Thu Sept 16th to Nov 6th 2025

Cohort 1 · Mon & Wed · From Sept 15th — Nov 5th 2025

Cohort 2 · Tue & Thu · From Sept 16th — Nov 6th 2025

Design
Tokens

Token
Aliasing

Typography &
Scales

Component
Anatomy

Patterns
Library

Multiple
Brands

Light &
Dark mode

For Product Designers

Learn to apply code to your designs

As a designer you will learn how to apply coded UI Kits characteristics to your Figma Library for a perfect design & code sync

For Engineers

Learn how to implement and use Figma tokens in your code

As an engineer you will learn how to use the UI Kit tokens from the Figma Library for a perfect code & design sync

8 weeks · Part-Time · Live cohort based

Learn Design Systems from Code to Figma

The course is composed of 16 live classes of 2 hours each that align perfectly with working professionals

Real Design System
case to work on

Weekly
feedback

Live in person
sessions weekly

Certificate
of completion

What you will learn

A learn-by-doing curriculum

Up to date program created by our leading teacher that ensures a practical learning methodology and content

Session 1

What Are Design Systems, Anyway?

Overview of design systems – what they are, the problems they solve, and why they’re game-changers for teams

Meet Shoelace and otheers: an introduction to web & react components and how this UI kits will guide our journey. We’ll see how a button or input is defined in code and design, illustrating the “anatomy” of components.

Hands-On —

Break down a components (e.g. a button) into pieces. We’ll analyze its anatomy in Figma, identifying the parts (icon, label, padding, etc.) and discuss how those relate to code. It’s like a fun dissection – no frogs, just UI parts!

Session 2

Design Tokens – The Building Blocks

Introduction to design tokens: the core types (color, spacing, typography, etc.) and how they function as the atoms of your design system.

We’ll cover semantic vs. functional naming (when do you call a color “Primary” vs. “Blue-500”?), and look at how to organize tokens in Figma for maintainability. Figma’s variables feature will be our best friend here, helping us store and swap values easily

Hands-On —

Roll up your sleeves in Figma – we’re setting up an empty token structure using Figma variables. You’ll create collections for colors, font sizes, spacings, etc., essentially building a blank canvas that we’ll fill in next week. Think of it as creating your own design tokens vault ready to be filled with values.

Session 3

Populating Your Design Tokens (Color, Type, Space)

Mapping a component default tokens to your Figma variables. For example, what are Shoelace’s primary and secondary colors, font sizes, spacing scales – and how can we mirror them in Figma?

We’ll discuss semantic vs. functional naming in practice: e.g., should that blue be called --color-brand-primary or just --blue-500? The goal is to balance designer-friendly names with developer-friendly structure.

Hands-On —

Fill ’er up! You’ll populate your Figma token collections with actual values – set up color styles (branding, neutrals, etc.), typography scales (font sizes, line-heights), and spacing units. By doing this, you create a single source of truth for your design decisions. It’s like mixing our paint palette before we start painting the UI.

Session 4

Advanced Token Techniques

Taking tokens to the next level. We explore linking tokens to enable scalability – for example, setting up a light and dark theme using Figma’s variable modes.

You’ll learn how to organize tokens for a multi-brand scenario (imagining you have two brands that share some tokens but differ in others). We also touch on aliasing (one token referencing another) to avoid duplication – a pro technique for theming.

Hands-On —

Time to create a theme switcher! We’ll set up light and dark mode tokens and apply them to a sample component to see the magic. You’ll practice switching your Figma file between themes, using token overrides to swap values for dark vs. light. This hands-on will also cover applying brand-specific overrides if you have multiple brands (sneak peek of Week 5). By the end, you’ll have a Figma file that can swap from “Day Mode” to “Night Mode” with a click, using the tokens you defined.

Session 5

Component Anatomy – Breaking It Down

Ever wonder what makes a component tick? We’ll deconstruct examples from a UI Kit (buttons, inputs, etc.) into reusable parts. Think in terms of atoms, molecules, organisms (thanks to Atomic Design) – e.g., a button might consist of an icon + label (atoms) inside a container (molecule) that forms a full component.

We’ll map each part to a token: padding = spacing tokens, colors = color tokens, etc. Understanding this mapping ensures our components will stay consistent and be easily updated via tokens.

Hands-On —

Translate a UI Kit component to Figma: Choose a any component (like a primary button or text input) and rebuild it in Figma. Start from scratch, using your tokens for every value (no ad-hoc colors or random sizes, only what’s in your token collections!). By doing so, you’ll see how tokens and components work together – change a token, and your component updates globally. It’s like building with legos: use the pieces (tokens) to make a cool final model (component).

Session 6

Building Your First Components – Buttons & Toggles

Time to create interactive components! We’ll design a button and a toggle (switch) in Figma using best practices: leveraging Auto Layout for intrinsic sizing and creating variants for different states (Default, Hover, Active, Disabled, etc.).

We’ll discuss how Shoelace or Mantine handle these components in code (for example, a toggle might have on/off states, a button might have size variants) and mirror that in our Figma components. This session highlights how understanding a bit of code or UI kit structure can improve your design workflow – you’ll anticipate states and variants better.

Hands-On —

Hands-on component workshop: You will build a primary button and a toggle switch in your Figma file. This includes adding variants (e.g., a toggle “On” and “Off” state, or a button with different sizes or types like Primary/Secondary). We’ll integrate tokens – for example, linking the button’s background to your primary color token, text style to your typography tokens, etc. By the end, you’ll have two fully functional Figma components that respond to changes in tokens (imagine updating the primary color token – your button color updates everywhere! ✨).

Session 7

Forms, Fields, and Selection Controls

Design and build form elements (text input fields, radio buttons, checkboxes) using your token foundation. We’ll discuss best practices for scalable form components: e.g., how to indicate focus and error states (using tokens for outline or shadow), how to create accessible touch targets, and how to organize variants (an input might have variants like “Default”, “Error”, “Disabled”).

We’ll peek at how Shoelace or Ariakit implements these – such as Ariakit’s focus on accessibility – to ensure our designs aren’t just pretty, but usable.

Hands-On —

Build form components: In Figma, you’ll create a text input field (with label and helper text), a radio button, and a checkbox set. Each will use tokens (colors for states, spacing for padding, etc.) and include necessary states (checked/unchecked, focused, error). It’s a mini workout for your component-building skills. After this, forms won’t intimidate you – you’ll have a strategy to design them systematically.

Session 8

Cards & Feedback Components

Shift into higher-level components or patterns like cards, badges, and other feedback indicators. We cover how to construct a card component that is flexible (think of a card that can hold different content, have variations like with image or without).

Also, how to design small feedback UI elements like badges, tags, or alerts using tokens (for example, success = green token, error = red token, etc., ensuring consistent meaning of colors across the system). This session emphasizes adaptability – designing components that can grow or shrink based on content while staying consistent.

Hands-On —

Design a card and a badge: Using Figma, build a card component with Auto Layout (so it can expand with content). Create variants if needed (e.g., with header image vs. no image). Also design a set of badges (like status pills for “New”, “Sale”, or user roles) using tokenized colors (perhaps your primary color for default badge, success token for “success” badge, etc.). By now, using tokens should feel natural – you’ll see how they ensure all these different components still feel like one coherent family.

Session 9

Multi-Brand Tokens

Setting up brand-specific token collections. We’ll expand our token set to accommodate two example brands (imagine Brand Alpha and Brand Beta). This means creating two versions of color palettes, maybe different typography choices, spacing scales if needed – all while keeping a consistent naming structure.

We discuss organizing these tokens using Figma variables modes or separate collections for each brand. Also, how to decide what stays constant vs. what changes per brand (perhaps layout spacing stays same, but colors and fonts change).

Hands-On —

Brand token workshop: You’ll create token sets for at least two brands in Figma. For example, Brand Alpha might use a blue primary, Brand Beta uses green as primary, each with their own neutrals and accent colors. We’ll do this by duplicating our base tokens into new collections or modes and swapping values. By the end, you can toggle between Brand themes in Figma and watch the UI recolor/refont itself automatically – super satisfying!

Session 10

Theming Components for Each Brand

Now that we have brand token sets, let’s apply them. We look at branding components: how to ensure our existing components (buttons, inputs, etc.) reflect each brand’s style without making separate components per brand.

This involves using the token infrastructure we built – e.g., our button is tied to a Primary Color token; that token simply has different values in Brand A vs Brand B. We’ll also talk about managing assets or logos if relevant, and how to maintain a library that serves multiple brands (naming conventions, documentation notes for devs to use the right theme in code, etc.).

Hands-On —

Apply brand styles: In Figma, you’ll take a set of key components (like your buttons, nav bars, or cards) and switch your variables from Brand A to Brand B. We’ll fine-tune anything that breaks (maybe Brand B’s font is larger, so some spacing needs adjustment – an opportunity to learn scaling). This exercise shows how robust your design system is. Ideally, the components work seamlessly with the new tokens. If not, we iterate and make them more flexible. At the end, you’ll effectively demo a theme switch across your whole design system, applying two distinct visual brands. Cool factor: 🔥.

Session 11

Tokens for Light & Dark

Structuring your tokens to support theme modes. Using Figma’s variable modes feature, we’ll create a Light and Dark mode set of values.

Key points include choosing appropriate colors for dark backgrounds (e.g., the concept of “On color” tokens – text on dark background might use a light color token), and ensuring sufficient color contrast for accessibility (WCAG guidelines for contrast ratios). We’ll also cover any adjustments needed beyond color: for example, elevation shadows might be tweaked in dark mode (darker shadows visible on light vs light glows on dark).

Hands-On —

Implement and test dark mode: In Figma, you’ll define dark mode colors for all your color tokens (or create a parallel collection). Once set, we’ll swap the entire Figma file to dark mode. You’ll systematically go through your components checking for issues: e.g., does the black text become white? Are borders visible? Did that brand logo disappear on dark? We’ll refine any contrast problems by adjusting token values. Consider this a comprehensive test of your design system’s flexibility – your components should work in dark mode almost automatically if tokens are set up well.

Session 12

QA Your Components in Every Mode

Quality assurance time – verifying component behavior in different modes and catching inconsistencies. We’ll share tips for testing design systems: creating sample screens or a mini style guide page in both light and dark to see everything at once.

We’ll also discuss common pitfalls (for instance, using hard-coded colors instead of tokens – this week those will show up like a sore thumb). Additionally, learn how to fix issues where a token might be missing a dark equivalent or an element isn’t swapping correctly. This session underscores the importance of testing and iteration in system building.

Hands-On —

Test & Tweak: You’ll create a sample page (or use the one from Week 8) and apply both light and dark themes to it. As a group, we’ll review and identify any oddities (maybe the shadow on a card is too strong in dark mode, or a subtle grey text becomes unreadable on dark). Then you’ll go into your Figma tokens or components to fix those – perhaps introducing a new token if needed (e.g., a separator line color for dark mode). This is the polish step to make sure our system is bulletproof. By the end, flipping that light/dark switch will feel like magic that just works.

Session 13

Documenting the Design System

Creating documentation for your system: what to include? We’ll cover documenting token usage (e.g., list out all colors and where to use each), component guidelines (how to use the button component, what not to do with it), and any brand rules or voice that transcend the designs (perhaps your design principles).

We’ll also discuss tools: Figma itself can house a style guide page, or you might use external sites or Storybook (for code) – we’ll mention how designers and developers collaborate on docs. Emphasis on keeping things updated and helpful, not just pretty.

Hands-On —

Start your documentation: Using Figma, you’ll create a few pages for documentation – one for foundations (tokens overview), one for components (with instructions, e.g., “Use Primary Button for main actions, avoid overusing the Danger style,” etc.), and one for brand/themes. Each student will draft a short guideline for at least one component and one token set. Peer review will ensure it’s clear and fun – perhaps adding a little narrative (e.g., “Our buttons love padding – give them space to breathe!”). You’ll see that writing about your design system really cements your understanding of it.

Session 14

System Consolidation & Prep for Handoff

Finalizing everything for handoff or implementation. We’ll review how to package the system for developers: exporting a token JSON (using a Figma plugin or the API) for use in code, linking to a repository or generating a style dictionary format.

We also make sure our Figma library is tidy: naming conventions consistent, components properly labeled and grouped. There’s a bit about governance here too – how to handle updates after launch, versioning your design system, and getting buy-in from your team when introducing the system. Essentially, tying loose ends and ensuring the system can live beyond the course.

Hands-On —

System audit & review: It’s like a final comb-through. You’ll go through a checklist to review your work: Are all color tokens used? Any stray styles that aren’t tokens? Components all using the latest versions? We’ll consolidate components into a Figma library (if not already) and prepare a quick handoff package – for instance, using the Figma tokens plugin to export a JSON of tokens for developers, or creating a shareable prototype that showcases the system. Finally, we’ll celebrate by sharing each person’s “Design System Figma file” with the cohort – because showing it off is part of the fun!

Session 15

Applying the System

How to apply your design system to real product layouts. We’ll discuss strategies for using existing components to create screens or pages. This might include planning a layout (e.g., a simple app screen or marketing page) and selecting the right components from your library.

This session also touches on identifying gaps – perhaps you realize a missing component when trying to build a layout, which is normal. We’ll talk about how to handle those situations (maybe quickly create a new component or adjust an existing one – an example of the iterative nature of systems).

Hands-On —

Build a Sample Page: Each student will design a small but comprehensive layout (could be a dashboard, a form page, or a landing page) using only components and styles from their design system. It’s like a final exam but fun – you’ll literally feel how much faster and more consistent it is to design with a well-made system. Afterwards, everyone can share their design. You’ll likely be amazed that despite different project ideas, all the designs feel professional and cohesive, thanks to the system. (If time permits, we might even swap design files and try to build something with a peer’s system, just for an extra challenge!)

Session 16

Showcase and Feedback

Presenting your design system. We’ll cover tips on presenting to different audiences (execs want to know business value, devs want to know how to use it, designers care about ease and creativity). But mostly, this session is about celebration and feedback – you’ve accomplished a lot!

We’ll likely do a relaxed show-and-tell where each person (or team, if group project) shows their design system highlights: the logo or name you gave it, the components, the awesome dark mode toggle, etc. Then we’ll exchange feedback and discuss next steps (everyone can share one thing they want to improve even further post-course).

Hands-On —

Design System Party 🎉: You’ll present your system to the class as if we’re your stakeholders. Show us the tokens, a few key components, maybe demonstrate switching to dark mode or between brand themes live (always a crowd-pleaser!). Afterwards, we’ll do a round of appreciative feedback – each person receives kudos and one constructive tip from peers and instructors. By the end, you should feel confident and proud, with a real design system under your belt. High fives all around!

Bonus module

Build with Figma MCP server

Coding Your Figma Designs – Figma Dev Mode & VS Code

Learn how to use Figma’s Dev Mode MCP server in combination with Visual Studio Code to generate and refine code from your designs.

Module 1

Figma Dev Mode & MCP – Intro

Understand what Figma’s Dev Mode and the MCP (Model Context Protocol) server are. (Don’t worry, we’ll keep it high-level and fun. In short, MCP is a way for AI coding tools to grab context from Figma)

Hands-On —

We’ll show how to enable the Dev Mode MCP server (it’s in open beta as of 2025) and connect it to VS Code.

Module 2

VS Code Setup

We’ll guide you to set up VS Code with GitHub Copilot (or VS Code’s Agent chat) and connect the Figma MCP server as an external tool.

Hands-On —

No heavy coding knowledge required – just basic HTML/CSS understanding is enough to follow along. You’ll essentially be giving VS Code the ability to talk to your Figma file.

Module 3

Design-to-Code in Action

See the magic happen as we select a design in Figma and use VS Code’s Copilot chat to generate code for it. For example, take a Figma frame of a button or a whole layout, then prompt Copilot to produce the corresponding HTML/CSS/React code. The MCP server feeds Figma data (component dimensions, styles, etc.) directly into the AI, resulting in more accurate UI code.

Hands-On —

We’ll do a live demo where a Figma design is transformed into a simple webpage code in minutes.

Module 4

Hands-On Exercise

You’ll get to try it yourself. We’ll provide a sample Figma file (or use your own design system file) and walk through generating code. For instance, generate a React component for the button you designed, complete with the correct colors and borders from your tokens.

Hands-On —

You’ll learn how to prompt the AI effectively (e.g., “Use my design tokens for colors and spacing”) and how to retrieve assets like images or icons via the MCP server tools. It’s part art, part science – and a lot of fun when it works!

Module 5

Review & Refinement

We’ll check the generated code together – does the button look right? Is the code clean? You’ll learn how to refine the AI output if needed. Importantly, we’ll discuss the practical uses and limitations of this approach. The goal isn’t to replace coding entirely, but to speed up the grunt work.

Hands-On —

You’ll come away understanding how designers can leverage AI to jump-start development, and how developers can get design context instantly (no more guessing padding or hex values – Figma’s MCP gives exact values).

Part-time training

A consistent plan you combine with your daily routine

Each week you'll complete 6+ hours between live sessions and take-home assignments

120 minutes live lessons Mon & Wed

120 minutes live lessons
Mondays & Wednesdays

Weekly feedback
from your teacher

Practical weekly take-home assignments

Great life-work-study
balance

The teacher

A seasoned expert with 25+ years of experience

Your teacher has been creating digital products since the beginning of the digital era

Matias Bejas

AKA Matmac

Hello! I'm Matias, a Designgineer from Argentina living in Madrid.

With 25+ years of experience in digital products, I specialise in UX/UI, Design Systems, and front-end development.

Build incredible skills