Lessons
view all ⭢
lesson
How to Build Icons in Figma and Export Them With FigmagicThe newline Guide to React Component Design Systems with FigmagicAnd now for some bells and whistles—graphics and icons!
lesson
How to Break up Designs Into Small, Atomic ComponentsThe newline Guide to React Component Design Systems with FigmagicLet's put the Figma-first approach to the test by taking the step to turn a design into code.
lesson
How to Create Design Tokens and Styles in FigmaThe newline Guide to React Component Design Systems with FigmagicLet's move on from basics to the intermediate level and actually make some designs.
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.