I want to learn Figma

Welcome! I'm so excited to help you dive into Figma, whether you're looking to build sleek mobile apps, interactive web layouts, or sophisticated prototypes.

To make sure we tailor this session perfectly to your needs and pace, I'd love to know a bit more about your background.

What is your main goal for learning Figma (e.g., designing mobile apps, websites, or creating interactive prototypes), and do you have any prior experience with design tools?

Learn howto build design systems from scratch

Building a design system from scratch is one of the most rewarding and powerful skills you can learn in Figma. It's the ultimate way to bring organization and scale to any digital product.

To make sure we set the perfect pace and don't skip over anything important, do you have any existing experience using Figma or other design tools, or are you starting completely fresh?

I have used Figma a little bit already

That's fantastic! Having a little experience under your belt means we can jump right into the good stuff without getting bogged down, while still making sure we lay down bulletproof foundations for your design system.

Before we unpack the Figma canvas and start building, I have one quick question to help me tailor our hands-on projects to your goals.

What specific components or design system elements are you most excited to build first?

I'm not sure yet, show me the basics first

Starting with the basics is the absolute best way to build a rock-solid foundation for a design system that won't break later on.

To kick off our journey, let's lay out the roadmap of how we'll master building design systems from scratch.

Your path

Design Tokens Styles and Variables

Auto Layout Foundations and Components

Component Variants Properties and Architecture

System Documentation Libraries and Handoff

The Four Key Zones of Figma

When you open any file in , your workspace is divided into four main structural areas. Think of it like a physical workshop: you have a main workbench in the middle, a toolbox at the top, a materials shelf on the left, and a customization station on the right.

A simplified layout of the Figma visual design interface showing its four core functional regions.

I've sketched out a visual layout of the interface above to help you orient yourself. At the very top, you have the Toolbar. This is your quick-access chest for basic tools, like creating frames, drawing shapes, and adding text. On the left, you'll find the Layers Panel. Think of this as your outline or ingredients list. Every single line, circle, text layer, or frame you place on your canvas gets listed here in a nested hierarchy. In the absolute center is the Canvas. This is your infinite digital workbench where you actually draw and design. On the right sits the Properties Panel. This is your contextual control dial. If you select a text layer, it shows font sizes. If you select a rectangle, it shows color and dimension settings. It adapts instantly to whatever you click.

I know figma interface, let's start building design system

I love that energy—let's skip the introductions and build! To build a bulletproof design system, we have to start with the DNA of your entire visual brand: design tokens.

What Exactly is a Design Token?

In the old days of web design, if you wanted to change a brand color, you had to manually hunt down every single CSS file, sketch file, and slide deck to update the hex code.

solve this by turning hardcoded values (like #0052FF or 16px) into named, reusable variables. Instead of remembering a hex code, you use a name like color-brand-primary or spacing-medium across your entire system. If the brand changes from blue to purple, you update that single token, and every button, icon, and link updates instantly across design and code.

Token Name	Value	What it represents
`color-brand-primary`	`#0052FF`	Our primary brand blue
`font-size-body`	`16px`	Standard text sizing
`radius-button`	`8px`	Rounded corner styling

When you structure these in Figma, you'll generally build them in layers: Global tokens (the raw values, like Blue 500), Semantic tokens (how they are used, like Button Primary Background), and Component-level tokens (specific overrides).

Before we build our color system in Figma, let's make sure this conceptual foundation is solid. Would you like to see how we map out a global token to a semantic token, or do you want to jump straight into setting up our very first Figma styles?