Learn
Learn
Learn web development from expert teachers. Build real projects, join our community, and accelerate your career
Get Started
Fullstack Rust Fullstack Node.js Fullstack D3 Fullstack React Fullstack React with TypeScript more →
The newline Guide to Building Your First GraphQL Server with Node and TypeScript
In this course, we'll show you how to create your first GraphQL server with Node.js and TypeScript
Enroll for free
Teach
Teach
Share your knowledge with others, earn money, and help people with their career
Apply Now
Apply To Teach A Course What Our Teachers Say
Amelia Wattenberger
Author of Fullstack D3
"Writing Fullstack D3 was a thoroughly enjoyable, fun process.

The writing was over before I knew it, and we've sold way more copies than I expected! Plus, the compliments from my peers have been really amazing."
Community
Community
Get help with programming projects, find collaborators, and make friends
Join Now
Join our Discord Server What Our Students Say
Tutorials

How to Create Design Tokens and Styles in Figma

Let's move on from basics to the intermediate level and actually make some designs.

This page is a preview of The newline Guide to React Component Design Systems with Figmagic

Previous Lesson:

UX Sketching and Double Diamonds: Build Atomic Design

Next Lesson:

How to Break up Designs Into Small, Atomic Components

Start a new discussion. All notification go to the author.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

The newline Guide to React Component Design Systems with Figmagic

Module 1: Introduction

Introduction:

Start Here

Lesson 1:

An Introduction to Figma, Figmagic, and Design Systems

Lesson 2:

The course project

Module 2: Preparation

Lesson 1:

Prerequisites

Lesson 2:

An Intro to Figma: Shortcuts, Frames, and Components

Lesson 3:

How to Set up NPM to Publish JavaScript Packages

Lesson 4:

Setting up GitHub

Lesson 5:

Setting up Cloudflare

Lesson 6:

Setting up Chromatic

Module 3: Enabling 'Continuous Design'

Lesson 1:

An Intro to Continuous Design: DevOps for Design

Lesson 2:

Build a Continuous Design Workflow With a Design System

Lesson 3:

Build Better Design and Change Governance With Flows

Lesson 4:

Intro to Design Tokens: How to Communicate in Design Work

Lesson 5:

Why Figma? The Pros of Collaborative Design

Lesson 6:

An Intro to Figmagic, the Figma CLI For Token Design

Module 4: Setting up a pipeline for design and code

Lesson 1:

How to Use the Figma API and Read Figma Documents

Lesson 2:

How to Scaffold a React Codebase With Degit

Lesson 3:

Build a Component Development Workflow With Storybook

Lesson 4:

Automatically Deploy React Code to GitHub and Cloudflare

Lesson 5:

How to Publish a React Component Library to NPM

Lesson 6:

Finishing the CI Setup

Module 5: Getting to know Figmagic

Lesson 1:

How to Set up Figmagic to Interact With Figma via CLI

Lesson 2:

How Figma Files Are Organized in Figmagic

Lesson 3:

An Intro to Figmagic Command Line Configuration

Module 6: Starting our design system

Lesson 1:

UX Sketching and Double Diamonds: Build Atomic Design

Lesson 2:

How to Create Design Tokens and Styles in Figma

Lesson 3:

How to Break up Designs Into Small, Atomic Components

Module 7: Building elements and components

Lesson 1:

How to Build Icons in Figma and Export Them With Figmagic

Lesson 2:

Flat vs Nested Elements in Figma and Figmagic

Lesson 3:

How to Create Nested Figma Elements in Figmagic

Lesson 4:

How to Compose Complex Components With Figmagic

Lesson 5:

Finishing the Checkout Components (optional)

Module 8: Documentation and Storybook

Lesson 1: