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

An Introduction to Figma, Figmagic, and Design Systems

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!

The course project

Introduction

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

Prerequisites

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

An Intro to Figma: Shortcuts, Frames, and Components

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

How to Set up NPM to Publish JavaScript Packages

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

Setting up GitHub

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

Setting up Cloudflare

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

Setting up Chromatic

Preparation

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

An Intro to Continuous Design: DevOps for Design

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

Build a Continuous Design Workflow With a Design System

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.

Build Better Design and Change Governance With Flows

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

Intro to Design Tokens: How to Communicate in Design Work

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

Why Figma? The Pros of Collaborative Design

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

An Intro to Figmagic, the Figma CLI For Token Design

Enabling 'Continuous Design'

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

How to Use the Figma API and Read Figma Documents

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

How to Scaffold a React Codebase With Degit

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.

Build a Component Development Workflow With Storybook

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

Automatically Deploy React Code to GitHub and Cloudflare

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.

How to Publish a React Component Library to NPM

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

Finishing the CI Setup

Setting up a pipeline for design and code

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

How to Set up Figmagic to Interact With Figma via CLI

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

How Figma Files Are Organized in Figmagic

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

An Intro to Figmagic Command Line Configuration

Getting to know Figmagic

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

UX Sketching and Double Diamonds: Build Atomic Design

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

How to Create Design Tokens and Styles in Figma

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

How to Break up Designs Into Small, Atomic Components

Starting our design system

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

How to Build Icons in Figma and Export Them With Figmagic

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

Flat vs Nested Elements in Figma and Figmagic

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

How to Create Nested Figma Elements in Figmagic

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!

How to Compose Complex Components With Figmagic

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

Finishing the Checkout Components (optional)

Building elements and components

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.

How to Author Quality Design Documentation

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

Add Storybook Descriptions For Self-Documenting Designs

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

How to Structure Storybook for Documentation

Documentation and Storybook

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

How to Plan for Design and Component Life Cycles

Things need to be in order before we continue.

Export Components With GitHub Chromatic Actions

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

A Beginner's Guide to Using Chromatic With Storybook

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

Building a Feedback Loop For Your Design System

Let's automate the release of new components.

Publish New Design Components With GitHub Actions

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

How to Trigger GitHub Actions From a Figma Plugin

The design life cycle

Summary and thank you

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

We've made quite some headway this far. By now, it's fairly easy to start seeing how we can make something bigger and more involved from smaller parts. In the nomenclature of "

," what we have made so far corresponds to:

From the general outlines of the UX sketch to the high fidelity prototype, we can now see that our Product Card is using elements that we can deconstruct and make universal and then reassemble to form the Product Card. I'm seeing that we have:

First, we need to wrap up work on them so that they are correctly generated into code. After that, we can proceed to use them in a new component that we need to set up in Storybook and React (manually).

For the following part, because we are starting to populate our component library, make sure you have your component library codebase open in your editor.

Verify that your configuration can generate elements. Your 

The most important thing we do here is configure Figmagic not to automatically ("force") update all files when we get new data, so it does not overwrite changes we do to the React, Storybook, or Styled Components files.

Separate compound components from simple (generated) elements

To improve our application architecture and improve discoverability, we'll separate elements that Figmagic generates for us from the bigger "compound" components that stitch them together. Those compound components require more manual work, and as we've said previously, relate more closely to Brad Frost's atomic design convention of "molecules," while the elements can be called our "atoms."

 to pull new data with Figmagic and see what happens in Storybook!

Making sure our elements are output as the intended tags

First things first. We want to make sure all of the Product Card elements are output as the intended tags. Click the 

 component. On the right side, you should see a 

 to the documentation while you are at it. Else, they will become 

 elements, and we don't want that. That, however, is just fine for the Card, so leave that one alone for now.

Next, we are going to do some coding for our basic elements now, starting with the Image.

If we'd look at Storybook now, we would see that our Image, unfortunately, retains the sharp edges and nullifies the corner radius of the outer Card element. Therefore, we need to add those manually to the top corners of the image.

For later, we'll also be adding the possibility to set a fixed height and to force hard corners.

import radii from 'tokens/radii';

const ImageStyled = styled.img`
  ${ImageCss};
  height: ${(props) => props.height || "296px"};
  border-radius: ${radii.rounded} ${radii.rounded} 0 0;
  border-radius: ${(props) => props.hardCorners && "0"};
`;

const Image = (props) => (
  <ImageStyled src={props.url} {...props} />
);

We should add those to our Storybook file (

Let's restrict the card from being too wide. Update and add the following to 

---
title: How to Compose Complex Components With Figmagic
description: 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!
#privateVideoUrl: https://fullstack.wistia.com/media/xxxxx
isPublicLesson: false
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/mikael-vesavuori-react-component-design-systems-with-figmagic-app/-/tree/main/code/module_07/lesson_07.04/App?ref_type=heads
---

We've made quite some headway this far. By now, it's fairly easy to start seeing how we can make something bigger and more involved from smaller parts. In the nomenclature of "[atomic design](https://bradfrost.com/blog/post/atomic-web-design/)," what we have made so far corresponds to:

-   The "atoms," being the design tokens, and I'd argue, any styles in Figma; though Brad Frost, the creator of atomic design, would say this related to foundational HTML tags et al
-   The "molecules" that combine several atoms into a cohesive entity like an input element with a label
-   The "organisms" that collect several molecules into complex entities, of which there typically are quite few

From the general outlines of the UX sketch to the high fidelity prototype, we can now see that our Product Card is using elements that we can deconstruct and make universal and then reassemble to form the Product Card. I'm seeing that we have:

-   A Card (the background or layout itself)
-   A Heading
-   A Description
-   An Image

First, we need to wrap up work on them so that they are correctly generated into code. After that, we can proceed to use them in a new component that we need to set up in Storybook and React (manually).

## Verify config

:::note
For the following part, because we are starting to populate our component library, make sure you have your component library codebase open in your editor.
:::

Verify that your configuration can generate elements. Your `figmagic.json` should look like the below:

```javascript { actualFilename=./protected/1-Config.json endChar=905 endLine=32 startChar=0 startLine=1 statedFilename=./protected/1-Config.json url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-react-component-design-systems-with-figmagic/module_07/lesson_07.04/protected/1-Config.json }
{
  "syncElements": true,
  "syncGraphics": true,
  "outputGraphicElements": true,
  "outputFolderGraphics": "src/graphics",
  "outputFolderElements": "src/elements",
  "outputFolderTokens": "src/tokens",
  "outputFormatCss": "js",
  "outputFormatDescription": "md",
  "outputFormatElements": "js",
  "outputFormatGraphics": "svg",
  "outputFormatStorybook": "mdx",
  "outputFormatTokens": "js",
  "templates": {
    "templatePathGraphic": "./node_modules/figmagic/templates/graphic",
    "templatePathReact": "./node_modules/figmagic/templates/react",
    "templatePathStorybook": "./node_modules/figmagic/templates/story",
    "templatePathStyled": "./node_modules/figmagic/templates/styled"
  },
  "overwrite": {
    "css": true,
    "description": true,
    "graphic": true,
    "react": false,
    "storybook": false,
    "styled": false
  },
  "skipFileGeneration": {
    "forceUpdate": false
  }
}
```

:::caution
The most important thing we do here is configure Figmagic not to automatically ("force") update all files when we get new data, so it does not overwrite changes we do to the React, Storybook, or Styled Components files.
:::

:::tip
**Separate compound components from simple (generated) elements**

To improve our application architecture and improve discoverability, we'll separate elements that Figmagic generates for us from the bigger "compound" components that stitch them together. Those compound components require more manual work, and as we've said previously, relate more closely to Brad Frost's atomic design convention of "molecules," while the elements can be called our "atoms."

As a consequence, `src/components` is the manual bigger ones, and `src/elements` will be mostly automated ones.
:::

Having done that, run `npx figmagic` to pull new data with Figmagic and see what happens in Storybook!

## Update elements

### Making sure our elements are output as the intended tags

Start Figma and go to the **Elements** page.

First things first. We want to make sure all of the Product Card elements are output as the intended tags. Click the **Image** component. On the right side, you should see a **Documentation** box. Enter `element=img`.

Take a moment to add `element=h2` to the Heading and `element=p` to the documentation while you are at it. Else, they will become `div` elements, and we don't want that. That, however, is just fine for the Card, so leave that one alone for now.

![Adjusting element tag generation](https://d2uusema5elisf.cloudfront.net/courses/newline-guide-to-react-component-design-systems-with-figmagic/module_07/lesson_07.04/public/assets/adjusting-element-tag-generation.png)

Next, we are going to do some coding for our basic elements now, starting with the Image.

### Update the Image code

Open up `src/elements/Image/ImageStyled.js`.

If we'd look at Storybook now, we would see that our Image, unfortunately, retains the sharp edges and nullifies the corner radius of the outer Card element. Therefore, we need to add those manually to the top corners of the image.

For later, we'll also be adding the possibility to set a fixed height and to force hard corners.

```javascript { actualFilename=./protected/2-ImageStyled.js endChar=246 endLine=8 startChar=0 startLine=1 statedFilename=./protected/2-ImageStyled.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-react-component-design-systems-with-figmagic/module_07/lesson_07.04/protected/2-ImageStyled.js }
import radii from 'tokens/radii';

const ImageStyled = styled.img`
  ${ImageCss};
  height: ${(props) => props.height || "296px"};
  border-radius: ${radii.rounded} ${radii.rounded} 0 0;
  border-radius: ${(props) => props.hardCorners && "0"};
`;
```

And replace the function in `Image/Image.js` so its props can take an image:

```javascript { actualFilename=./protected/3-Image.js endChar=74 endLine=3 startChar=0 startLine=1 statedFilename=./protected/3-Image.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-react-component-design-systems-with-figmagic/module_07/lesson_07.04/protected/3-Image.js }
const Image = (props) => (
  <ImageStyled src={props.url} {...props} />
);
```

Here we are also passing in the `height` and `hardCorners` props, which we need later.

We should add those to our Storybook file (`src/elements/Image/Image.stories.mdx`) as well, replacing the `Canvas` block:

```javascript { actualFilename=./protected/4-ImageStory.js endChar=672 endLine=21 startChar=0 startLine=1 statedFilename=./protected/5-ImageStory.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-react-component-design-systems-with-figmagic/module_07/lesson_07.04/protected/4-ImageStory.js }
<Canvas>
  <Story name="Image" height="400px">
    {(args) => (
      <Image
        height="400px"
        url="https://images.unsplash.com/photo-1508013861974-9f6347163ebe?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=30"
        {...args}
      />
    )}
  </Story>
  <Story name="Image with hard corners" height="400px">
    {(args) => (
      <Image
        hardCorners
        height="400px"
        url="https://images.unsplash.com/photo-1508013861974-9f6347163ebe?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=30"
        {...args}
      />
    )}
  </Story>
</Canvas>
```

Now we're talking!

### Updating the Card code

Let's restrict the card from being too wide. Update and add the following to `elements/Card/CardStyled.js`:

```javascript { actualFilename=./protected/5-CardStyled.js endChar=223 endLine=11 startChar=0 startLine=1 statedFilename=./protected/6-CardStyled.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-react-component-design-systems-with-figmagic/module_07/lesson_07.04/protected/5-CardStyled.js }
import spacing from 'tokens/spacing';

// Extend the below as needed
const CardStyled = styled.div`
  ${CardCss};
  height: auto;
  max-width: 320px;
  min-width: 320px;
  flex: 1 0 33%;
  margin-bottom: ${spacing.tall};
`;
```

Add some bogus content to the Card in the story, or it will be flat (`elements/Card/Card.stories.mdx`):

```javascript { actualFilename=./protected/6-CardStory.js endChar=124 endLine=5 startChar=0 startLine=1 statedFilename=./protected/7-CardStory.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-react-component-design-systems-with-figmagic/module_07/lesson_07.04/protected/6-CardStory.js }
<Canvas>
  <Story name="Card" height="400px">
    {(args) => <Card {...args}>Card contents here</Card>}
  </Story>
</Canvas>
```