Lessons
view all ⭢
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.
lesson
Build Better Design and Change Governance With FlowsThe newline Guide to React Component Design Systems with FigmagicA 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.
lesson
Build a Continuous Design Workflow With a Design SystemThe newline Guide to React Component Design Systems with FigmagicTime to set the stage and see what we can do to be a top shop using continuous design principles and tooling.
lesson
An Intro to Continuous Design: DevOps for DesignThe newline Guide to React Component Design Systems with FigmagicLet me introduce you to my take on the concept of "continuous design."
lesson
How to Set up NPM to Publish JavaScript PackagesThe newline Guide to React Component Design Systems with FigmagicGet a spot in the world's biggest (probably!?) JavaScript community—NPM.
lesson
An Intro to Figma: Shortcuts, Frames, and ComponentsThe newline Guide to React Component Design Systems with FigmagicFigma reshaped how millions of people and companies follow the design process. Now, we're going to form our process around it.