Welcome to
The newline Guide to React Component Design Systems with Figmagic
Course Syllabus and Content
Introduction
2 Lessons
A "welcome" is in order, and let's also set some expectations while we are at it!
I hope you are excited! We'll be using some very nice tools and some skeletons I've pre-provided to fast-track our way to a design system!
Preparation
6 Lessons
Let's take care of the essentials first, like setting up a development environment, Git and Node.
Figma reshaped how millions of people and companies follow the design process. Now, we're going to form our process around it.
Get a spot in the world's biggest (probably!?) JavaScript community—NPM.
Get hooked up with the premier place on the planet to share, build, and discuss code—open source or otherwise.
Next stop is hosting, where we'll use Cloudflare Pages, one of the most exciting tech services around.
Last but not least, we need to get our visual inspection platform and Storybook hosting working. For this, we will turn to Chromatic.
Enabling 'Continuous Design'
6 Lessons
Let me introduce you to my take on the concept of "continuous design."
Time to set the stage and see what we can do to be a top shop using continuous design principles and tooling.
A 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.
One magic, simple concept (design token) and a one-stop shop to contain our design equal one hell of a powerhouse.
Going from static files, private work, and image-based output to a collaborative, real-time component-oriented tool changes everything about the design workflow.
Figmagic is the last piece in our toolchain that acts as the glue needed to super-charge your productivity.
Setting up a pipeline for design and code
6 Lessons
It's high time to get to know the Figma API, one of the real stars of our show.
Time to get knee-deep in coding, which we will kick-start by using a bit of boilerplate that we're going to scaffold.
It'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.
That song with the "I like to move it-move it" lyrics must have been about pushing code to production...right?
While 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.
Putting in the last fixes for our tooling means getting our Continuous Integration operational.
Getting to know Figmagic
3 Lessons
With all the other hard, boxy stuff behind us, the perspective now moves to the front-end components and Figma.
Working effectively with Figmagic means understanding how and what it actually parses from a document.
Getting to know the configuration options is super important if you want to make the best use of Figmagic.
Starting our design system
3 Lessons
Let's find our way by analyzing our UX sketches before digging into the details and building anything.
Let's move on from basics to the intermediate level and actually make some designs.
Let's put the Figma-first approach to the test by taking the step to turn a design into code.
Building elements and components
5 Lessons
And now for some bells and whistles—graphics and icons!
Galloping ever onwards, we'll wave our magic wand and summon our low-complexity components.
Now, we leave the easy flat components for the more detailed nested ones!
Code generation with Figmagic 4 will only take you so far. For our most important and complicated components, we will need to do some manual work, composing small bits into more advanced ones. Let's compose one from what we've made so far!
Extra credit time—adding the components for the checkout view.
Documentation and Storybook
3 Lessons
Good documentation is vital and shows that you care about your design system and those who will use it. Lacking good documentation practices could spell doom for a design system.
The very first documentation step we will take is to describe what we have built so far.
Storybook is a brilliant tool for documentation, and we'll make good use of it in several ways.
The design life cycle
6 Lessons
We have talked about "continuity" a lot, so it's about time we address how to deal with change in practice.
Things need to be in order before we continue.
Time to fill up our UI platform with our work to date!
Communicating and giving feedback on our work is the lifeblood of a design system.
Let's automate the release of new components.
Time to place the final cherry on the top. Cue up "I've got the power"!