Design Tokens Bootcamp using Figma Variables

In this kickoff session, we’ll introduce the course and lay the groundwork for understanding design systems and their deep connection to design tokens.

You’ll get a clear view of how tokens enhance consistency, scalability, and efficiency in modern design workflows.

We’ll also explore the differences between variables and design tokens, cover essential tools, and walk through real examples using Figma Variables and the Tokens Studio Plugin.

Whether you're new to tokens or looking to sharpen your skills, this session sets the tone for everything to come.

In this session, we’ll explore how to organize and name design tokens effectively across different levels — from global to component-specific.

You’ll learn best practices for naming conventions, structuring token hierarchies, and crafting meaningful token stories.

Through guided group activities, we’ll collaboratively build a button component using thoughtful token naming and structure, then expand into a more complex example to reflect real-world scenarios.

In this session, we will design three key UI components from scratch: a Card component (with image, title, description, and button), a Typography component, and a simple Button component.

These designs will serve as the foundation for applying tokens systematically.

You’ll then learn how to plan and create Option Tokens for properties like color, spacing, and sizing—starting with a clear strategy before implementation.

After that, we’ll move into Alias Tokens, showing how to define references and create more abstract, flexible token layers.

Special focus will be placed on building structured plans for both Spacing and Sizing tokens in Option and Alias formats.

This session is hands-on and practical, helping you connect real component design with a scalable token strategy inside Figma.

In this session, we take the next big step: turning design tokens into code.

We’ll begin with a semantic token example to reinforce naming clarity and structure.

Then, we’ll introduce the project file setup, including how to properly set variable scopes in Figma to prepare for handoff.

You’ll learn how to export tokens to JSON, configure them using the Style Dictionary Configurator, and convert them into CSS (with a focus on camelCase formatting).

We’ll walk through applying these tokens to your Card Component, showing how everything links from design to code.

Finally, we’ll explore component-specific tokens, guiding you through the planning, creation, and code export process—demonstrating how token-based design scales consistently from Figma to production.

In this session, we’ll dive deep into designing a complex Button component and explore how to scale its styling with tokens. You'll first learn how to analyze the Button's structure, how the developers style the button then plan and apply a full token strategy around it.

We’ll break down how to define component-specific tokens for various button states and styles. You'll then apply those tokens directly in Figma, using both option and component-specific variables to ensure flexibility, consistency, and scalability across your design system.

By the end, you'll have a fully tokenized Button component that’s ready for seamless handoff and future theming.

In this session, we explore how to scale your design tokens across themes (Light/Dark) and languages (Arabic/English) to build versatile, token-driven components.

We'll begin by structuring the Card component tokens to support multiple themes, then walk through the process of planning, creating, and applying component-specific tokens that adapt to various design contexts.

You’ll learn how to convert tokens into code using JSON and CSS formats, explore different plugin workflows, and see how to integrate these tokens directly into your project files.

The session wraps up with a real-world example of creating Multi-Theme and Multi-Brand tokens for a component—ensuring full flexibility and consistency across your design system.

In this session, we’ll review the assignment from last week where you planned, created, and applied component-specific tokens for multiple themes and brands.

We’ll walk through your token structure, check how well the variables were organized and applied across different contexts (Light, Dark, English, Arabic), and verify the accuracy of the JSON and CSS exports.

You’ll get direct feedback on how to improve scalability, structure, and naming conventions in real-world design systems.

In this session, we’ll focus on applying Dark Mode and Arabic versions to the Card component we discussed last session.

You’ll learn how to create Dark Mode components, convert them to JSON and CSS, and apply them within your project files.

Similarly, we’ll set up the Arabic version, create the components, and export them to JSON and CSS, then apply them to your project files.

This session will also reveal the "magic" behind ensuring flexibility and adaptability for multiple modes and languages.

In this session, we explored smart strategies for managing multi-theme design tokens manually.

You learned how to think ahead when building scalable theme structures, and how to organize tokens effectively for light, dark, and other brand-specific modes.

We also shared tips and tricks for documenting your token system clearly, with a special focus on typography tokens.

Finally, we examined real-world case studies and explored additional tools that can support and enhance your token workflow.

In this session, we will dive into a Case Study focusing on advanced component creation and token structuring.

We'll start by building and analyzing complex components, showing you how to plan, create, and apply Option and Alias Tokens effectively.

You'll see how to set up a structured token system, ensuring that your tokens are flexible and scalable for future growth.

We will then guide you through the entire process of applying component-specific tokens, followed by the creation of the components themselves.

In this session, we will wrap up the design system process by converting tokens into JSON and CSS and integrating them into the project files.

We will continue working on the Case Study, applying what we’ve already built and enhancing it by creating dark mode and additional themes.

You'll gain hands-on experience in setting up and managing multiple themes and modes across your design system.

In this final session, we'll address any remaining questions from the participants, review key concepts from the course, and provide guidance on how to present and apply the skills learned.

We’ll also discuss how to showcase the final project and prepare for the next steps in your design journey.