\newlinenewline logonewline logo
    • Learn

      Learn

      Learn web development from expert teachers. Build real projects, join our community, and accelerate your career

      Get Started
      Fullstack RustFullstack Node.jsFullstack D3Fullstack ReactFullstack React with TypeScriptmore →
      https://dzxbosgk90qga.cloudfront.net/fit-in/620x372/n/20220117210542194_21CB9CF5-AA2C-4939-BCC1-18F0377EFB90.png

      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 CourseWhat Our Teachers Say
      Amelia Wattenberger

      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 ServerWhat Our Students Say
    • Tutorials
    Go Pro
    Log In
     

    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:

    Authoring good documentation

    Lesson 2:

    Storybook descriptions

    Lesson 3:

    Structuring our Storybook better

    Module 7: The design life cycle

    Lesson 1:

    Design and component life cycles

    Lesson 2:

    Final preparations

    Lesson 3:

    First Chromatic run

    Lesson 4:

    Feedback and reviews