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 Listen to the Podcast What Our Students Say
Featured Podcast
A Software Engineer's Guide to Venture Capital with AngelList Engineer Sumukh Sridhara
While many engineers work at startups or are interested in starting their own company, venture capital can seem like a total mystery. In this episode, we talk about how venture capital firms function, how VCs make money - and...
Listen to the full episode
Tutorials

Welcome to

The newline Guide to React Component Design Systems with Figmagic

Example Code Download

You can download the complete example code by clicking here

Introduction

2 lessons

Introduction

LESSON

The course project

LESSON

Preparation

6 lessons

Prerequisites

LESSON

Figma

LESSON

Setting up NPM

LESSON

Setting up GitHub

LESSON

Setting up Cloudflare

LESSON

Setting up Chromatic

LESSON

Enabling 'Continuous Design'

6 lessons

Continuous design

LESSON

Enabling continuous design

LESSON

Governance and change

LESSON

Design tokens and why design systems need them?

LESSON

Why Figma?

LESSON

Why Figmagic and what is it?

LESSON

Setting up a pipeline for design and code

6 lessons

Getting ready to use the Figma API

LESSON

Scaffolding the codebases

LESSON

Local development

LESSON

Building code for previews and for production

LESSON

Publishing and using our components as a consumer

LESSON

Finishing the CI setup

LESSON

Getting to know Figmagic

3 lessons

Setting up Figmagic

LESSON

Figmagic file organization

LESSON

Command line use and configuration

LESSON

Starting our design system

3 lessons

UX sketching

LESSON

Creating a component with tokens and styles

LESSON

Breaking up the design into smaller elements

LESSON

Building elements and components

5 lessons

Graphics and icons

LESSON

Generating flat React components with Figmagic "Elements"

LESSON

Generating nested elements

LESSON

Composing complex components

LESSON

Finishing the Checkout components (optional)

LESSON

Documentation and Storybook

3 lessons

Authoring good documentation

LESSON

Storybook descriptions

LESSON

Structuring our Storybook better

LESSON

The design life cycle

6 lessons

Design and component life cycles

LESSON

Final preparations

LESSON

First Chromatic run

LESSON

Feedback and reviews

LESSON

Releasing new components with GitHub Actions

LESSON

Trigger GitHub Actions build from a Figma plugin

LESSON

Summary and thank you

1 lesson

Summary and thank you

LESSON

Latest Book

Terms of Service
Privacy
©2022 Fullstack.io, LLC