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#

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#

Design tokens: 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#

Design tokens: 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#

Design tokens: Font weights

Font weights will be standard and a bold one.

Spacing#

Design tokens: 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#

Design tokens: 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#

Design tokens: 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!

Design 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.

Start a new discussion. All notification go to the author.