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.

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.

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.

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.

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.

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.

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"!

What a ride it's been!