Lessons
Explore all newline lessons
lesson
UX Sketching and Double Diamonds: Build Atomic DesignThe newline Guide to React Component Design Systems with FigmagicLet's find our way by analyzing our UX sketches before digging into the details and building anything.
lesson
An Intro to Figmagic Command Line ConfigurationThe newline Guide to React Component Design Systems with FigmagicGetting to know the configuration options is super important if you want to make the best use of Figmagic.
lesson
How Figma Files Are Organized in FigmagicThe newline Guide to React Component Design Systems with FigmagicWorking effectively with Figmagic means understanding how and what it actually parses from a document.
lesson
How to Set up Figmagic to Interact With Figma via CLIThe newline Guide to React Component Design Systems with FigmagicWith all the other hard, boxy stuff behind us, the perspective now moves to the front-end components and Figma.
lesson
How to Publish a React Component Library to NPMThe newline Guide to React Component Design Systems with FigmagicWhile 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
Automatically Deploy React Code to GitHub and CloudflareThe newline Guide to React Component Design Systems with FigmagicThat song with the "I like to move it-move it" lyrics must have been about pushing code to production...right?
lesson
Build a Component Development Workflow With StorybookThe newline Guide to React Component Design Systems with FigmagicIt'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
How to Scaffold a React Codebase With DegitThe newline Guide to React Component Design Systems with FigmagicTime to get knee-deep in coding, which we will kick-start by using a bit of boilerplate that we're going to scaffold.
lesson
How to Use the Figma API and Read Figma DocumentsThe newline Guide to React Component Design Systems with FigmagicIt's high time to get to know the Figma API, one of the real stars of our show.
lesson
An Intro to Figmagic, the Figma CLI For Token DesignThe newline Guide to React Component Design Systems with FigmagicFigmagic is the last piece in our toolchain that acts as the glue needed to super-charge your productivity.
lesson
Why Figma? The Pros of Collaborative DesignThe newline Guide to React Component Design Systems with FigmagicGoing from static files, private work, and image-based output to a collaborative, real-time component-oriented tool changes everything about the design workflow.
lesson
Intro to Design Tokens: How to Communicate in Design WorkThe newline Guide to React Component Design Systems with FigmagicOne magic, simple concept (design token) and a one-stop shop to contain our design equal one hell of a powerhouse.