If there is one "golden ticket item" that we'll cover, it's how we will be using real-time token data from Figma to help us develop components, moving away from traditional notions of style guides and static token values that have heavyweight export or distribution processes.

At the end of the course, we are going to have set up a complete end-to-end solution for translating design into a well-defined published component library together with various exports, their design tokens, and all the build automation, governance, and processes needed to perform on a professional level.

Course project#

To have something practical to work on that can signify our progress, we'll create a simple app made with these React components. Take a second to check out the demo app and do also take a look at the Storybook we'll be populating.

We will output several generated components and a few larger, more intricate components composed of generated elements. The context will be a simple (fake) e-commerce web app that's going to use components, which we'll store in an npm-published component library. The components will first be designed in Figma, and then they'll either be generated into React components or manually composed of our set of design tokens and elements according to spec.

I will guide you through the products page and a few components, including the ProductCard in the image here. The checkout page and its components will be a self-guided part of this course. When you get there, you will have learned all there is to know, so you can create (or just copy!) the components from my reference design and code.