New course
Live online Design Systems
from Code to Figma
course
A simple Code to Figma approach to Design Systems that designers and engineers can understand
Next cohort from March 3rd to April 28th 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
Introduction to Design Systems
Overview of design systems: What they are and why they matter.
Introduction to Shoelace web components and how they will guide the course.
Hands-On —
Analyzing web component anatomy.
Session 2
Design Tokens Overview and Setup
Core types of tokens: color, spacing, typography, etc.
Token organization strategies in Figma.
Hands-On —
Setting up an empty token structure in Figma using variables.
Session 3
Populating Base Tokens
Mapping Shoelace tokens (e.g., primary colors, font sizes) to Figma.
Semantic vs. functional naming for tokens.
Hands-On —
Populating base tokens for colors, typography, and spacing.
Session 4
Advanced Token Techniques
Linking tokens for scalability (e.g., light/dark themes).
Organizing tokens for multi-brand systems.
Hands-On —
Applying token overrides for light/dark modes.
Session 5
Component Anatomy
Breaking down Shoelace components (e.g., buttons, inputs) into reusable parts.
Mapping component anatomy to tokens.
Hands-On —
Translating Shoelace component anatomy to Figma.
Session 6
Building Buttons and Toggles
Creating simple interactive components (buttons, toggles).
Using auto layout and variants for flexibility.
Hands-On —
Building buttons and toggles with token integration.
Session 7
Input Fields and Radios
Designing form elements with tokens.
Best practices for creating scalable form components.
Hands-On —
Building text fields, radio buttons, and checkboxes.
Session 8
Cards and Feedback Components
Constructing cards and feedback components like badges.
Hands-On —
Using tokens to create adaptable cards.
Session 9
Multi-Brand Tokens
Adapting token sets for multiple brands.
Organizing brand-specific token overrides.
Hands-On —
Creating brand tokens for at least two example brands.
Session 10
Branding Components
Adjusting components to reflect brand-specific styles.
Hands-On —
Applying token overrides to existing components for each brand.
Session 11
Light/Dark Mode Tokens
Structuring tokens for light and dark modes.
Ensuring accessibility in color contrasts.
Hands-On —
Implementing light/dark tokens in Figma.
Session 12
Testing Components for Modes
Verifying component behavior in light/dark modes.
Fixing inconsistencies in tokens.
Hands-On —
Testing and refining components across modes.
Session 13
Documentation and Guidelines
Documenting token usage, component guidelines, and brand rules.
Hands-On —
Preparing system documentation in Figma.
Session 14
System Consolidation
Finalizing tokens and components for handoff.
Hands-On —
Reviewing and consolidating the design system.
Session 15
Applying the System
Using the design system in practical layouts (e.g., app or web UI).
Hands-On —
Building a sample page using the design system.
Session 16
Presenting the Design System
Presenting and reviewing the design system with peers and instructors.
Hands-On —
Final peer review and feedback session.
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
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
Learn skills that will get you hired
A practical course where you'll learn-by-doing with proven techniques to understand and build simple yet effective Design Systems that will get you hired
Tokens in code
Understand the concept of Design Tokens and how to create consistent token naming
Figma Variables
Understand the concept of Design Tokens and how to create consistent token naming
Tokens Structure & Aliasing
Understand the concept of Design Tokens and how to create consistent token naming
Component Anatomy
Understand the concept of Design Tokens and how to create consistent token naming
Multi Brand tokens
Understand the concept of Design Tokens and how to create consistent token naming
Light & Dark mode
Understand the concept of Design Tokens and how to create consistent token naming
Pricing
Transparent pricing
Plain, simple, accessible and affordable pricing
Design Systems Academy
8 week course
Learn Design System from Code to Figma
- Live in-person lessons
- Learn from an expert teacher with lots of experience
- Build everything based on a real life case
- Support & guidance during the whole course
- Certificate of completion
Have any question?
FAQs
Here are some questions answered, nevertheless we encourage you to ask questions directly in our Discord server or arrange a quick call with us anytime.
We only have 20 designers per cohort. We believe that a limited number of seats within a classroom promotes a more individualized learning experience for our students.
Before joining any of our courses we expect students to be competent in Figma. During the course you'll be building a Design System from scratch in Figma or learning how to use Figma variables which are necessary to be able to participate. Design Systems wise, there is no need to have any prior knowledge as we will be guiding you from foundations to advanced techniques.
Our courses are fully remote, you will join a private Discord Workspace in which you'll access your classroom and fellow students to begin connecting with each other. You will have access to all future, current, and graduated students if you're keen to expand your learning network.
Yes. Recordings are shared within 48 hours of each session in your classroom space.
Our courses are really personalised, this is our best feature because you get to receive all the attention from the instructor, he will explain all you need and be on top of your learning experience. Also at the same time you will meet people from all over the world, this will motivate you and will grow your network and make new friends!
In order to receive your certificate, you will need to attend 80% of live sessions, join with your camera on, and complete your Case Study. If you are unable to join class and/or have your camera on, you will need to let your teacher know in advance and commit to watching the recording in order to stay up to date for the next live session.