New Project Setup

New Project Set Up

Overview

This page describes the process of adding color, typography, and spacing tokens from a project Figma design to the theme. This process will yield a theme with a majority of base blocks configured and leave minimal further configuration for project specific blocks. As well, this will provide utility classes for various design elements for use in the project.

TL;DR

Setup steps are below.

The Figma File

The Figma file has been set up to use variables and components in a way to make transposing them to the theme easy.

Requirement: You will need access to the Local Variables Table in the file, if you don’t see the option in Design Mode in the Design tab of Figma speak to the designer on the project.

Color Tokens

On the Colors page of the Design System section in the project Figma File you’ll find a layout of the color values used in the project. The naming on this page corresponds to token values in the color tokens json file (tokens/src/color.tokens.json) and is standardized around the following terms:

Primary
Secondary

To access the complete list of color values and mappings to the standardized terms open the Local Variables Table in Figma:

Color tokens are separated into atomic values and contextual assignments (light background, dark backgrounds, etc.) of those values. The contextual assignments are mapped in the colors.css file in the theme (assets/css/common/colors.css) while the atomic values are assigned in the tokens JSON (tokens/src/color.tokens.json).

Spacer Tokens

Similar to colors Spacer values for the project are available in the Local Variables table under the Spacing section:

These values map to token names defined in the spacer tokens json file (tokens/src/spacer.tokens.json).

Breakpoints

These values are universal and shouldn’t change project to project, their values are available in the Local Variables table under the Breakpoint option. The tokens have been set up in the theme as part of the base.

Setup Steps

Initial Setup

These steps are optional and are condensed repetition of the standard theme setup process.

Run nvm use
Run npm i in the theme folder

Colors

Open the Figma File
Navigate to any page in the file and open the Local Variables table
Switch the table to the Colors view
On the left hand side of the Local Variables table window select the first atomic/base level color (items under the 🎨 emoji) in the table, skipping over Primary & Secondary sections for now. e.g. Neutral or Blue
In the Theme open the tokens directory to the colors JSON file: tokens/src/color.tokens.json

For each of the color and their variants in the Local Variables table create or modify an existing token value. e.g. the Neutral section could become the following entry in color.tokens.json:

    "neutral": {
      "50": { "value": "THE_VALUE_FROM_FIGMA" },
      "100": { "value": "THE_VALUE_FROM_FIGMA" },
      "200": { "value": "THE_VALUE_FROM_FIGMA" },
      "300": { "value": "THE_VALUE_FROM_FIGMA" },
      "400": { "value": "THE_VALUE_FROM_FIGMA" },
      "500": { "value": "THE_VALUE_FROM_FIGMA" },
      "600": { "value": "THE_VALUE_FROM_FIGMA" },
      "700": { "value": "THE_VALUE_FROM_FIGMA" },
      "800": { "value": "THE_VALUE_FROM_FIGMA" },
      "900": { "value": "THE_VALUE_FROM_FIGMA" }
    },

With all of the base atomic colors in place scroll up to the Primary and Secondary associations in the Local Variables table in Figma.

For each of the associations in the Primary and Secondary sections of the Local Variables table create an entry in the color tokens file that references an existing color token added with the atomic values. e.g. the Primary section could become the following entry in color.tokens.json:

    "primary": {
      "100": { "value": "{color.red.100.value}" },
      "300": { "value": "{color.COLOR_NAME.VARIANT.value}" },
      "500": { "value": "{color.COLOR_NAME.VARIANT.value}" },
      "700": { "value": "{color.COLOR_NAME.VARIANT.value}" },
      "900": { "value": "{color.COLOR_NAME.VARIANT.value}" }
    },

Ensure the black and white token values exist:

"black": { "value": "#000000" },
"white": { "value": "#FFFFFF" },

Open the Text section of the Local Variables table in Figma and transpose the low, medium (md), high, and action values to the color tokens file. e.g. the values could become the following in color.tokens.json:

"low-contrast": { "value": "{color.neutral.500.value}" },
"md-contrast": {"value": "{color.COLOR_NAME.VARIANT.value}"},
"high-contrast": {"value": "{color.COLOR_NAME.VARIANT.value}"},
"action": {"value": "{color.COLOR_NAME.VARIANT.value}"},

The next steps assign the colorway variations in the colors css file, to begin open that file (assets/css/common/colors.css).
Each of the columns in the Local Variables table corresponds to a colorway variation. Each should exist in the color style sheet but new ones can be added or subtracted as needed.
For each of the colorway classes update the background color, text, and button variation CSS variables with variable assignments of the token values from the Local Variables table.
That’s it. You’ve imported the color palette for your project.

Spacers

Open the Figma File
Navigate to any page in the file and open the Local Variables table
Switch the table to the Spacers view
Transpose the pixel values from the table and their labels to the spacer.tokens.json file (tokens/src/spacer.tokens.json) converting them to REM values in the JSON file. e.g. a 2xs spacer token with the value of 4px in the table would be the following entry in the tokens file:
```
"2xs": { "value": "0.25rem" },
```
That’s it. You’ve imported the spacers for your project.

Typography

Open the Figma File
Navigate to the Typography page of the file in the Design System section.
Using the the middle portion of the update the type face tokens in the typography src file (tokens/src/typography.tokens.json).
Using the right portion of the page (the Type Scale table) transpose the desktop and mobile values to the tailwind-typography.json file (tokens/tailwind-typography.json) using CSS variables where possible from the assets/css/base/_generated-variables.css file. Note: you will essentially be writing a CSS rule using JSON format with values from the table. e.g. An h1 table entry with the following values would result in the following JSON in the file.

```json
    ".h1": {
      "font-family": "var(--font-family-sans);",
      "font-size": "2rem /* 32px */;",
      "font-weight": "var(--font-weight-bold);",
      "line-height": "var(--lh-12);",
      "@media ( min-width: 769px )": {
        "font-size": "3rem /* 48px */;"
      }
    },
```

That’s it. You’ve imported typography values for your project.

Buttons

Button styles are largely variable based and defined by the work already done to import colors and typography. However, the various button sizes and tweaks to border-radii etc. will need to be accounted for.

Open the Figma file.
Navigate to the Buttons, Inputs, and Tabs page of the Design System section.

For each of the button sizes transpose the correct padding pixel values and font sizes to the tailwind-btns JSON file (tokens/tailwind-btns.json). Note, there are existing sm, md, and lg button classes available and modifications can be made there:

    ".btn--sm": {
      "padding": ".62rem .88rem .56rem;",
      "font-size": ".8125rem;",
      ".btn-svg svg": {
        "width": "var(--spacer-sm);"
      }
    },
    ".btn--md": {
      "padding": ".81rem var(--spacer-base) var(--spacer-sm);",
      "font-size": ".9375rem;",
      ".btn-svg svg": {
        "width": "var(--spacer-base);"
      }
    },
    ".btn--lg": {
      "padding": "var(--spacer-base) 1.25rem;",
      "font-size": "1.125rem;",
      ".btn-svg svg": {
        "width": "var(--spacer-md);"
      }
    },

For each button style that is not already represented in the tailwind-btns JSON add a new entry with style rules for. Use existing CSS variables where possible in new entries (see other entries in the file for examples).
That’s it. You’ve imported button styles for your project.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly