The newline Guide to React Component Design Systems with Figmagic

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.

 

4.0 130 students started

Published |Updated

What You Will Learn

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

Generate React components using Figma

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

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.

Course Content

9 modules41 lessons

Introduction

2 lessons

Introduction

A "welcome" is in order, and let's also set some expectations while we are at it!

LESSON

The course project

I hope you are excited! We'll be using some very nice tools and some skeletons I've pre-provided to fast-track our way to a design system!

LESSON

Preparation

6 lessons

Prerequisites

Let's take care of the essentials first, like setting up a development environment, Git and Node.

LESSON

Figma

Figma reshaped how millions of people and companies follow the design process. Now, we're going to form our process around it.

LESSON

Setting up NPM

Get a spot in the world's biggest (probably!?) JavaScript community—NPM.

LESSON

Setting up GitHub

Get hooked up with the premier place on the planet to share, build, and discuss code—open source or otherwise.

LESSON

Setting up Cloudflare

Next stop is hosting, where we'll use Cloudflare Pages, one of the most exciting tech services around.

LESSON

Setting up Chromatic

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

LESSON

Enabling 'Continuous Design'

6 lessons

Continuous design

Let me introduce you to my take on the concept of "continuous design."

LESSON

Enabling continuous design

Time to set the stage and see what we can do to be a top shop using continuous design principles and tooling.

LESSON

Governance and change

A diagram can be the difference between an organization of "petty kings" doing their own thing and having actionable plans built on a shared identity. What we need is some kind of governance.

LESSON

Design tokens and why design systems need them?

One magic, simple concept (design token) and a one-stop shop to contain our design equal one hell of a powerhouse.

LESSON

Why Figma?

Going from static files, private work, and image-based output to a collaborative, real-time component-oriented tool changes everything about the design workflow.

LESSON

Why Figmagic and what is it?

Figmagic is the last piece in our toolchain that acts as the glue needed to super-charge your productivity.

LESSON

Setting up a pipeline for design and code

6 lessons

Getting ready to use the Figma API

It's high time to get to know the Figma API, one of the real stars of our show.

LESSON

Scaffolding the codebases

Time to get knee-deep in coding, which we will kick-start by using a bit of boilerplate that we're going to scaffold.

LESSON

Local development

It's vital we have a solid grounding for our component workflow if we are to build an entire library of them. In this lesson, we will set up a smooth, component-driven development workflow from code to Storybook.

LESSON

Building code for previews and for production

That song with the "I like to move it-move it" lyrics must have been about pushing code to production...right?

LESSON

Publishing and using our components as a consumer

While dogfooding does sound yucky, it's a word that connotes the practice of using one's own things, sometimes to build something new. That's what we will do now with the components we've built.

LESSON

Finishing the CI setup

Putting in the last fixes for our tooling means getting our Continuous Integration operational.

LESSON

Getting to know Figmagic

3 lessons

Setting up Figmagic

With all the other hard, boxy stuff behind us, the perspective now moves to the front-end components and Figma.

LESSON

Figmagic file organization

Working effectively with Figmagic means understanding how and what it actually parses from a document.

LESSON

Command line use and configuration

Getting to know the configuration options is super important if you want to make the best use of Figmagic.

LESSON

Starting our design system

3 lessons

UX sketching

Let's find our way by analyzing our UX sketches before digging into the details and building anything.

LESSON

Creating a component with tokens and styles

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

LESSON

Breaking up the design into smaller elements

Let's put the Figma-first approach to the test by taking the step to turn a design into code.

LESSON

Building elements and components

5 lessons

Graphics and icons

And now for some bells and whistles—graphics and icons!

LESSON

Generating flat React components with Figmagic "Elements"

Galloping ever onwards, we'll wave our magic wand and summon our low-complexity components.

LESSON

Generating nested elements

Now, we leave the easy flat components for the more detailed nested ones!

LESSON

Composing complex components

Code generation with Figmagic 4 will only take you so far. For our most important and complicated components, we will need to do some manual work, composing small bits into more advanced ones. Let's compose one from what we've made so far!

LESSON

Finishing the Checkout components (optional)

Extra credit time—adding the components for the checkout view.

LESSON

Documentation and Storybook

3 lessons

Authoring good documentation

Good documentation is vital and shows that you care about your design system and those who will use it. Lacking good documentation practices could spell doom for a design system.

LESSON

Storybook descriptions

The very first documentation step we will take is to describe what we have built so far.

LESSON

Structuring our Storybook better

Storybook is a brilliant tool for documentation, and we'll make good use of it in several ways.

LESSON

The design life cycle

6 lessons

Design and component life cycles

We have talked about "continuity" a lot, so it's about time we address how to deal with change in practice.

LESSON

Final preparations

Things need to be in order before we continue.

LESSON

First Chromatic run

Time to fill up our UI platform with our work to date!

LESSON

Feedback and reviews

Communicating and giving feedback on our work is the lifeblood of a design system.

LESSON

Releasing new components with GitHub Actions

Let's automate the release of new components.

LESSON

Trigger GitHub Actions build from a Figma plugin

Time to place the final cherry on the top. Cue up "I've got the power"!

LESSON

Summary and thank you

1 lesson

Summary and thank you

What a ride it's been!

LESSON

Your Instructors

Profile image for mikaelvesavuori

Mikael Vesavuori

Cloud Software Architect (and Technical Standards Lead) at Polestar

👋 Hi! I'm Mikael, and while working as a cloud architect, I can't keep myself away from the keyboard so I write a lot of open source Node code too. What I know best and love most is enabling teams through technologies like Figma, Figmagic and the serverless paradigm.

Frequently Asked Questions

Who is this course for?

This course is for everyone who ever asked themselves: 'Why does the front-end workflow suck, year after year?' In this course, I attempt to provide a holistic solution to that question, from theory and principles to tooling and actual full-scale implementation.

What is the ratio of coding vs Figma design?

During the course, you will both do a bit of design (according to directions in the course) but mostly it's about modifying pre-provided code. So, the ratio is more code than design, since Figma is just a necessary support.

What if I need help?

You can ask me questions anytime through the community Discord channel or by sending us a message.

 
OrGet this course and every newline Book and Guide with a newline Pro subscription for just $20/mo

$39

$49

newline Guide to React Component Design Systems with Figmagic

$39

$49