Welcome to The newline Guide to React Component Design Systems with Figmagic. It's going to be my privilege to guide you through some of the most exciting ways we can work with digital product development today, using Figma and a collection of software tools around it.

My name is Mikael Vesavuori, and I've been making things on computers practically my entire life. I hacked away on my first websites when I was 11 years old, back in the halcyon days of HTML 3 and 4 when <blink> and <frameset> tags set the web on fire. Professionally I've been a web designer, a front-end lead, then some kind of full-stack wizard, and more recently, a cloud architect. My interest in the topics of this course—design systems and tooling that accelerates the daily grind—has been greatly fueled by the relative inefficiencies that have historically permeated front-end development. I've been fortunate enough to develop, lead, and contribute to how companies, both big and small, improve how they work with these things.

Despite the change of perspective and altitude (and lack of detail-orientation that comes with the territory), I think the majority of the important work happens in the day-to-day proceedings: the seemingly small things. Things like how we work, how we expect our work to be communicated, what quality expectations we work according to, and how we make something to the best of our collective abilities. When designer and developer cultures meet, good things can happen, but it's not uncommon that this also leads to certain misunderstandings and issues because we tend to value different aspects of what we do and how we do it. During this course, I'll show you what I've learned about bridging those cultures.

Stars of the show#

In this course, the star—or stars I should say—are going to be Figma and, not so incidentally, a companion CLI tool I began developing in 2018 named Figmagic.

Figma had a real breakout year in 2018 when they made their API public, meaning it became a much more valid proposition to create tooling around Figma. Certainly it was a lot easier than for many other design tools. Enabling an ecosystem has proven to be an absolute game-changer in how we can work with design and code.

Figmagic, in short, grew from those possibilities. Overall, it helps you design with a structured approach using design tokens. Compared to similar tools, Figmagic is DevOps- and CI-friendly, and all we need to use is Figmagic together with the Figma API to get live access to our current tokens. Driving React with these tokens means that you get direct sync between design and code. Another trick Figmagic does is to allow you to very easily generate React components from designs that follow a certain convention. Figmagic also allows you to save precious time exporting graphics—it can even wrap them as legitimate React components if you want to! Simply put: It's the missing piece between DevOps and design.

We'll, of course, discuss Figma and Figmagic at length and explain why they are the perfect match to reach what I (and others) call "continuous design." More on continuous design in module 2.