\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
    Course Thumbnail of The newline Guide to React Component Design Systems with Figmagic

    The newline Guide to React Component Design Systems with Figmagic

    Module 1: Introduction

    Introduction:

    Start Here

    Lesson 1:

    An Introduction to Figma, Figmagic, and Design Systems

    Lesson 2:

    The course project

    Module 2: Preparation

    Lesson 1:

    Prerequisites

    Lesson 2:

    An Intro to Figma: Shortcuts, Frames, and Components

    Lesson 3:

    How to Set up NPM to Publish JavaScript Packages

    Lesson 4:

    Setting up GitHub

    Lesson 5:

    Setting up Cloudflare

    Lesson 6:

    Setting up Chromatic

    Module 3: Enabling 'Continuous Design'

    Lesson 1:

    An Intro to Continuous Design: DevOps for Design

    Lesson 2:

    Build a Continuous Design Workflow With a Design System

    Lesson 3:

    Build Better Design and Change Governance With Flows

    Lesson 4:

    Intro to Design Tokens: How to Communicate in Design Work

    Lesson 5:

    Why Figma? The Pros of Collaborative Design

    Lesson 6:

    An Intro to Figmagic, the Figma CLI For Token Design

    Module 4: Setting up a pipeline for design and code

    Lesson 1:

    How to Use the Figma API and Read Figma Documents

    Lesson 2:

    How to Scaffold a React Codebase With Degit

    Lesson 3:

    Build a Component Development Workflow With Storybook

    Lesson 4:

    Automatically Deploy React Code to GitHub and Cloudflare

    Lesson 5:

    How to Publish a React Component Library to NPM

    Lesson 6:

    Finishing the CI Setup

    Module 5: Getting to know Figmagic

    Lesson 1:

    How to Set up Figmagic to Interact With Figma via CLI

    Lesson 2:

    How Figma Files Are Organized in Figmagic

    Lesson 3:

    An Intro to Figmagic Command Line Configuration

    Module 6: Starting our design system

    Lesson 1:

    UX Sketching and Double Diamonds: Build Atomic Design

    Lesson 2:

    How to Create Design Tokens and Styles in Figma

    Lesson 3:

    How to Break up Designs Into Small, Atomic Components

    Module 7: Building elements and components

    Lesson 1:

    How to Build Icons in Figma and Export Them With Figmagic

    Lesson 2:

    Flat vs Nested Elements in Figma and Figmagic

    Lesson 3:

    How to Create Nested Figma Elements in Figmagic

    Lesson 4:

    How to Compose Complex Components With Figmagic

    Lesson 5:

    Finishing the Checkout Components (optional)

    Module 8: Documentation and Storybook

    Lesson 1:

    How to Author Quality Design Documentation

    Lesson 2:

    Add Storybook Descriptions For Self-Documenting Designs