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.

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.

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.