Creating a component with tokens and styles
Let's move on from basics to the intermediate level and actually make some designs.
By now, you should have a good idea of how you use Figma to create objects that we can derive tokens from. We've also established that there is a built-in way in Figma to store and manage styles. These can be used for paints and colors, text, effects, and layout grids.
You will want to make use of styles as much as possible, yet keeping these true to what you are communicating through your design tokens page. That's precisely what we are going to focus on here.
Prepping for work
In this and the following module, we will be very practical and go across Figma, our component library, and the application itself. Make sure you have your codebases installed and ready to use.
For Figma, you can always refer to our reference project file.
Working for two
Effectively in this lesson, we are going to do the work of two people: the designer who designs and structures their work inside Figma, and then the tiny bit of work we'd do as developers to make code from that design.
Design phase: Tokens#
Setting up a basic assortment of tokens#
Create a new Figma file. I'll rename my page from Page 1 to Design tokens.
Some basics we need to set up are:
Colors
Font sizes
Font families
Font weights
Spacing
Radii
Shadows
Without any further ado, create seven frames with those respective names. As we go along, I'll adjust these to be neat and ordered with consistent spacing and sizing so the workspace in total doesn't look too messy.
Design tokens#
Colors#

For the colors, I'll hammer out six swatches. Let's go on shape over color for now, so let's make these swatches:
White
(make it a bit warmish)Pure white
(this is plain full white)Purple
Deep blue
Gray
Black
(not necessarily completely black)
Font sizes#

For font sizes, I'm thinking something heading-like, a "normal" size, and a small size. So three sizes. I'll call mine, respectively: Heading
, Regular
and Small
.
Also make a "button" style. Mine is called just that: Button
. This one I'll make a bold, which will likely look good on the face of a button.
For each, use a text snippet with some lorem ipsum text and set your size for each of these.
Remember that this frame only communicates the size, nothing else.
Font families#

Font family will only be a single one, but we're creating it because it's good to keep a tight (and explicit!) ship.
Font weights#

Font weights will be standard and a bold one.
Spacing#

For spacings, let's make five of various dimensions. We'll keep these divisible by the common 16-pixel grid, so the spacings will be 4 pixels (0.25 rem units), 8 pixels (0.5 rem), 16 pixels (1 rem), 24 pixels (1.5 rems), and 48 pixels (3 rems). I'll give them descriptive names as well, like Tiny and Tall.
Radii#

Radii will be used for our corners. I'll make mine 50-pixel squares. One will have no rounding—it's just a plain square—and the second will have 8 pixels of rounding. Set this in the Corner radius box in the right panel. Let's also rename the layers to Sharp and Rounded.
Shadows#

Shadows will make our things look a bit nicer. Add a rectangle to the frame. Give it an effect in the right-hand side panel, which should default to a drop shadow. Click the sun icon and adjust the Y value to 4
and the Blur value to 16
. Leave the default semi-transparent black color as is. Save it and call it something like Regular shadow.
And we are done with the tokens!

We now have a set of simple tools we can use to begin exploring our component. You might think, "but where does all my choice and creativity go if we cut it down to just this set of values!?" First and foremost, you're completely free to use anything else you want—this is just a launchpad. Second, it's not uncommon that designers use a limited palette in the very first phase just to keep the focus on shape (or functionality if you are UX-inclined). That's exactly why tools like Balsamiq and, for that matter, Figma (and more recently, Whimsical) have become so popular.
This page is a preview of The newline Guide to React Component Design Systems with Figmagic