Code4Lib Design Tokens

This work is from the Intro to Figma - Code4Lib '22 Pre-Conference Workshop

Hosts, transforms, and publishes design tokens for Intro to Figma workshop at Code4Lib '22.

1. Hosts tokens via Figma Tokens plugin for sharing and syncing among design team
2. Transforms tokens to usable Sass variables via Github Actions using Style Dictionary
3. Publishes tokens to NPM via Github Actions using Semantic Release

What are Design Tokens?

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development. - Salesforce UX

Helpful Explainers:

• Smashing Podcast, Episode 3: What are Design Tokens? with Jina Anne
• Tokens in Design Systems by Nathan Curtis

Requirements

This package requires Dart Sass because LibSass is deprecated. If you are using the node-sass package in your project (which provides the Node.js binding to the deprecated LibSass), please replace it with the sass package:

npm uninstall node-sass && npm install sass --save-dev

Usage

Install the package:

npm install code4lib-design-tokens --save-dev

Then in your Sass, load the module (e.g., variables, typography, or helpers):

@import "~code4lib-design-tokens/scss/variables.scss";
@import "~code4lib-design-tokens/scss/helpers.scss";
@import "~code4lib-design-tokens/scss/typography.scss";

Then in your component, include the desired mixin:

.category {
  @include overline;
}

or, include the desired variable:

.category {
  margin-bottom: $component-06 + px;
}

or, include the desired SVG if using vue-svg-loader:

import SvgHatchRight from "~/node_modules/code4lib-design-tokens/assets/svgs/graphic-hatch-lines"

Updating to the latest package

Latest release is posted in this repository, but you can also check if your package is outdated:

npm outdated

If you are not running the latest release and would like to, then update the package:

npm install code4lib-design-tokens@latest

Or, you can update the version number in the package.json file and run npm install.

Files

• data/tokens.json - Syncs with Figma Tokens plugin
• data/transformed-tokens.json - Tokens transformed to be usable by Style Dictionary
• scss/* - Tokens usable by developers
• assets/* - Assets usable by developers

Best Practices

Helpful reminders to future selves:

• Use the commit message conventions that trigger semantic releases
  • feat: A new feature
  • fix: A bug fix
  • docs: Documentation only changes
  • style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
  • refactor: A code change that neither fixes a bug nor adds a feature
  • perf: A code change that improves performance
  • test: Adding missing or correcting existing tests
  • chore: Changes to the build process or auxiliary tools and libraries such as documentation generation
• Always leave a comment when creating, reviewing, and merging a pull request