Introduction

The course project

Prerequisites

Figma

Setting up NPM

Setting up GitHub

Setting up Cloudflare

Setting up Chromatic

Preparation

Continuous design

Enabling continuous design

Governance and change

Design tokens and why design systems need them?

Why Figma?

Why Figmagic and what is it?

Enabling 'Continuous Design'

Getting ready to use the Figma API

Scaffolding the codebases

Local development

Building code for previews and for production

Publishing and using our components as a consumer

Finishing the CI setup

Setting up a pipeline for design and code

Setting up Figmagic

Figmagic file organization

Command line use and configuration

Getting to know Figmagic

UX sketching

Creating a component with tokens and styles

Breaking up the design into smaller elements

Starting our design system

Graphics and icons

Generating flat React components with Figmagic "Elements"

Generating nested elements

Composing complex components

Finishing the Checkout components (optional)

Building elements and components

Authoring good documentation

Storybook descriptions

Structuring our Storybook better

Documentation and Storybook

Design and component life cycles

Final preparations

First Chromatic run

Feedback and reviews

Releasing new components with GitHub Actions

Trigger GitHub Actions build from a Figma plugin

The design life cycle

Summary and thank you

react

node.js

storybook

Among developers and architects, "continuous integration and delivery/deployment" (CI/CD for short) has increasingly become the norm for almost two decades. And while frontend development has gone through the framework revolution, going from design to code with the speed expected of CI/CD is still a pain. But it doesn't need to be!

This 10-module course is taught by Mikael Vesavuori, an architect and developer who has helped companies like Polestar redefine their technology and design processes, tooling and ways of working.

In the course, we will create a full component-based React-driven application with Figmagic, underpinned by Storybook, good documentation, and with CI and automated testing.

We will bring the dev-designer collaboration to its current state-of-the-art with a DevOps-inspired life cycle, which could be called “continuous design” (after continuous integration/deployment or CI/CD).

While there is a pre-defined, specific toolset that we’ll use, the end goal of the course is to teach you a wider perspective of what it means to work end-to-end with design systems. Nearly all individual tools are exchangeable: we’re more interested in the capabilities enabling our desired way-of-working than the specific tools chosen to get there.

This course is a comprehensive guide to building a React component library based on a well-architectured design system. You’ll create a full component-based React-driven application with Figmagic, underpinned by Storybook, good documentation, and with CI and automated testing. Learn senior-level system architecture skills for frontend React code; skills you can apply broadly in working on any frontend application.

The newline Guide to React Component Design Systems with Figmagic

How to set up a continuous design pipeline from code to CI/CD, using some of the best services out there

What Figma, Figmagic, and design tokens are and how they enable you to be more productive

How design tokens can function as a contract between designers and developers, setting up powerful new ways of working

The history of design/code tooling and how to argue for process and tooling change

Understand the value of documentation, using Storybook and Figma to document your work

This is going to be very similar to what we have done several times now, so bear with me one last time—it'll be over in seconds!

---
title: Setting up Chromatic
description: Last but not least, we need to get our visual inspection platform and Storybook hosting working. For this, we will turn to Chromatic.
#privateVideoUrl: https://fullstack.wistia.com/media/xxxxx
isPublicLesson: false
useMdx: true
---

This is going to be very similar to what we have done several times now, so bear with me one last time—it'll be over in seconds!

## Creating a Chromatic account

Go to the [Chromatic](https://www.chromatic.com/) website.

![Chromatic](https://d2uusema5elisf.cloudfront.net/courses/newline-guide-to-react-component-design-systems-with-figmagic/module_01/lesson_01.06/public/assets/chromatic-1.png)

Last but not least, we need to get our visual inspection platform and Storybook hosting working. For this, we will turn to Chromatic.

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

Welcome: Introduction

Introduction:

Start Here

Lesson 1:

Introduction

Lesson 2:

The course project

Module 0: Preparation

Lesson 1:

Prerequisites

Lesson 2:

Figma

Lesson 3:

Setting up NPM

Lesson 4:

Setting up GitHub

Lesson 5:

Setting up Cloudflare

Lesson 6:

Setting up Chromatic

Module 1: Enabling 'Continuous Design'

Lesson 1:

Continuous design

Lesson 2:

Enabling continuous design

Lesson 3:

Governance and change

Lesson 4:

Design tokens and why design systems need them?

Lesson 5:

Why Figma?

Lesson 6:

Why Figmagic and what is it?

Module 2: Setting up a pipeline for design and code

Lesson 1:

Getting ready to use the Figma API

Lesson 2:

Scaffolding the codebases

Lesson 3:

Local development

Lesson 4:

Building code for previews and for production

Lesson 5:

Publishing and using our components as a consumer

Lesson 6:

Finishing the CI setup

Module 3: Getting to know Figmagic

Lesson 1:

Setting up Figmagic

Lesson 2:

Figmagic file organization

Lesson 3:

Command line use and configuration

Module 4: Starting our design system

Lesson 1:

UX sketching

Lesson 2:

Creating a component with tokens and styles

Lesson 3:

Breaking up the design into smaller elements

Module 5: Building elements and components

Lesson 1:

Graphics and icons

Lesson 2:

Generating flat React components with Figmagic "Elements"

Lesson 3:

Generating nested elements

Lesson 4:

Composing complex components

Lesson 5:

Finishing the Checkout components (optional)

Module 6: Documentation and Storybook

Lesson 1: