0
0 reviews

Design Tokens Bootcamp using Figma Variables

Ready to level up your design skills? In this hands-on bootcamp, you’ll master design tokens using Figma Variables. Over four weeks
Starts on 06 Apr 2025 4 Weeks Round 1 Cohort-based live course
Instructor
Osama Eldrieny
  • Description
  • Curriculum
  • FAQs
  • Schedule
  • Reviews

Build Scalable Design Systems with Figma and Tokens

 

🌟 This course takes you from foundational principles to advanced applications of design tokens, enabling you to build scalable and consistent design systems.

 

✨ Over four weeks, you’ll learn to create, manage, and implement design systems using Figma Variables and Style dictionary.

 

🎯 Through 8 live sessions, you’ll gain hands-on experience in:

  • 🛠️ Creating tokens

  • 🧩 Building reusable components

  • 💻 Exporting tokens to code

  • 🌘 Implementing features like dark mode and multi-brand systems.

 

 

What you will learn in the Bootcamp:

 

✅ Understand the structure and components of a design system.

 

✅ Differentiate between variables and design tokens.

 

✅ Understand the foundational concepts of design tokens and their practical use in modern design workflows.

 

✅ Create and manage design tokens for various design elements like colors, typography, spacing, and more.

 

✅ Systematically name and organize tokens at different levels (option tokens, alias tokens, and component-specific tokens).

 

✅ Use Figma Variables to implement tokens in design systems.

 

✅ Build a basic design system, and publish it as a reusable library.

 

✅ Export design tokens to JSON and convert them to CSS for implementation in development projects.

 

✅ Work with both light and dark mode tokens within a design system.

 

✅ Plan, Create, and Apply tokens to real-world projects by creating Button Component with specific tokens.

 

✅ Understand the handoff process to developers, ensuring seamless integration of design tokens in development workflows.

 

 

Who I made this course for:

 

1️⃣ Designers Seeking to Level Up, For designers ready to adopt token-driven design and enhance their design systems.

 

2️⃣ UX/UI Leads Building Scalable Systems, For UX/UI Leads building flexible, scalable design systems with a strong token strategy.

 

3️⃣ Developers Integrating Design Systems, For developers who want to integrate design tokens for consistent, scalable projects.

 

 

About me

I’m Osama Eldrieny, UX Lead at FPT Software, an Egyptian designer based in Malaysia with over 15 years of experience in the design field.

 

Specializing in design systems, UX, and design tokens, I have a proven track record of delivering impactful results across diverse industries, including:

  • Petroleum & Natural Gas
  • Banking
  • SaaS
  • Online Training
  • Sports
  • e-Commerce
  • Healthcare
  • Printing, News & Media

I’ve collaborated with clients worldwide, including:
🇲🇾 Malaysia, 🇪🇬 Egypt, 🇦🇺 Australia, 🇺🇸 USA, 🇨🇦 Canada, 🇵🇹 Portugal, 🇸🇦 KSA, 🇸🇬 Singapore, 🏴󠁧󠁢󠁥󠁮󠁧󠁿 England, 🇨🇭 Switzerland, and more.

 

 

🏆 Key Achievements

  • Built or contributed to 100+ projects, systems, and solutions that improved efficiency, enhanced user experience, and scaled operations.

 

👨‍🏫 Mentorship and Community Contribution

I’m passionate about sharing knowledge and empowering others. As an active mentor on ADPList, I have:

  • Completed 18 mentoring sessions.
  • Dedicated 615 minutes to guiding aspiring professionals in the design industry.

Additionally, I’ve:

  • Hosted 20+ online sessions.
  • Spoken at 4 public events.
  • Published 4 courses.

  • Built a community of 4,000+ YouTube subscribers and 3,000+ Telegram members.

 

 

Frame 15752

 

Frame 15752

 

Frame 15752

Introduction to Design Systems: Foundations, Tokens, and Components
Mastering Component-Specific Tokens
From Design to Development
Celebrating Success and Looking Ahead: Graduation and Beyond
Are the sessions pre-recorded?
No, all 8 sessions are live and interactive. However, they will be recorded, so you can revisit the content anytime. There are no pre-recorded videos or lessons—this is a fully live, hands-on learning experience.
I don’t know how to create a component. Can I join this bootcamp?
Absolutely! This bootcamp is designed for all skill levels. We’ll walk you through the process of creating a complex component (Button) step by step, so even if you’re new to components, you’ll learn everything you need to know.
I’m still a junior. Is this course for seniors only?
Not at all! This course is designed to take you step by step, making it perfect for juniors who want to learn design systems and design tokens from the ground up. Whether you’re just starting out or looking to deepen your knowledge, this bootcamp is for you.
Do I need to know how to code to join this bootcamp?
No coding experience is required! While we’ll cover how to export tokens to code and implement them in a project, the focus is on the design-to-development workflow. You’ll also learn how developers think and pick up some basic coding concepts along the way.
What tools will we use in this bootcamp?
We’ll primarily use Figma Variables for design and token creation, and Style Dictionary to convert tokens into code. You’ll also work with CSS for implementing tokens in a project. Don’t worry—we’ll guide you through all the tools step by step.
Will this bootcamp cover dark mode and multi-brand systems?
Yes! In Week 3, you’ll learn how to create dark mode and implement it in your project. You’ll also explore how to build a new brand and manage its tokens, giving you the skills to handle complex design system scenarios.
How much time should I dedicate to this bootcamp?
Each week includes 2 live sessions (2–2.5 hours each) and an assignment that should take 2–4 hours to complete. Plan to dedicate 5–7 hours per week to get the most out of the bootcamp.
What if I miss a live session?
No problem! All live sessions are recorded, so you can catch up at your convenience. You’ll also have access to the course materials and files to review anytime.
Will I get a certificate after completing the bootcamp?
Yes! Upon completing the bootcamp and submitting all assignments, you’ll receive a certificate of completion to showcase your new skills in design systems and token implementation.
Can I apply what I learn to my current job or projects?
Absolutely! This bootcamp is designed to give you practical, real-world skills that you can immediately apply to your work. Whether you’re building a tokenised design system from scratch or improving an existing one, the techniques you learn here will be directly applicable.
Is there any support after the bootcamp ends?
Yes! You’ll have access to the course materials, recordings, and files even after the bootcamp ends. Additionally, you’ll be invited to a community or WhatsApp group where you can ask questions, share ideas, and connect with other students.
What’s the difference between this bootcamp and the 13-week Tokens Course that Osama Eldrieny highlighted it before?
This bootcamp focuses on a single component (the button) to teach you the end-to-end process of creating and implementing design tokens, from design to code. The full 13-week course covers a complete login page with multiple components (e.g., input fields, logos, etc.) and goes into more depth. This bootcamp is a condensed, hands-on version that gives you the core skills to start building design systems.
Will we have access to project files (Figma and Code)?
Yes! You’ll have full access to all the Figma and code files we work on during the bootcamp. Additionally, you’ll receive the original files from the full 13-week course, so you can explore more examples of components like input fields, logos, and more. This will help you understand how to plan and tokenize other components.
Will this bootcamp help me understand and use the DGA Saudi Arabia official design system?
Yes! This bootcamp will teach you how the DGA Design System with variables works, how to use it effectively, and even how to improve it. You’ll gain the skills to work with and customize design systems like the DGA’s.
Does this bootcamp cover the Design Tokens Studio tool?
This bootcamp focuses on implementing design tokens using Figma Variables. However, you’ll learn how to import and export variables to Tokens Studio to maintain a single source of truth. We’ll also cover how to export tokens to code using the Tokens Studio plugin. Plus, we’ll provide Arabic resources to help you use the Tokens Studio plugin for free.

🔴 Live Session 1 - Design Tokens Bootcamp
Date: April, 05, 2025 - 7:00PM - Cairo Time Zone - 2.5h

🔴 Live Session 2 - Design System Fundamentals: Components and Tokens
Date: April, 08, 2025 - 7:00PM - Cairo Time Zone - 2.5h

🔴 Live Session 3 - Mastering Component-Specific Tokens
Date: April, 12, 2025 - 7:00PM - Cairo Time Zone - 2.5h

🔴 Live Session 4 - Review Assignment and Provide Feedback
Date: April, 15, 2025 - 7:00PM - Cairo Time Zone - 2.5h

🔴 Live Session 5 - Implementing Tokens in Code
Date: April, 19, 2025 - 7:00PM - Cairo Time Zone - 2.5h

🔴 Live Session 6 - Dark Mode, New Brands, and One Source of Truth
Date: April, 22, 2025 - 7:00PM - Cairo Time Zone - 2.5h

🔴 Live Session 7 - Assignment Review: Token Implementation and Best Practices
Date: April, 26, 2025 - 7:00PM - Cairo Time Zone - 2.5h

🔴 Live Session 8 - Graduation: Celebrating Success and Planning the Future
Date: April, 29, 2025 - 7:00PM - Cairo Time Zone - 2.5h

Design Tokens Bootcamp1
Next Cohort 06 Apr 2025
Enroll Now USD 300
Ask your company to cover the course
Handshake

Get 15% discount with better together

Enroll with your friend or work colleague and both of you will get 15% discount contact Zomra on LinkedIn

Course details
Live interactive sessions 4
Projects to apply learnings 4
Level Beginner
Course certifcate upcon compleation
Lifetime access to bootcamp materials