api3dao / design-tokens

Automated design tokens pipeline from Figma to JS variables, ensuring design consistency and streamlined development across the organization.

Design Tokens

This repository is dedicated to managing and publishing Design Tokens extracted from Figma. It serves as a central source for design-related assets, which are then transformed into CSS variables. These variables can be utilized across various projects within our organization to ensure design consistency and streamline the development process.

Overview

Design Tokens are the visual design atoms of the product’s UI, representing colors, spacing, typography, and other design elements in a way that is platform-agnostic. Our automated process ensures that any changes in Figma are promptly reflected in the code, maintaining a single source of truth for our design standards.

Workflow

1. Figma Updates: Designers update and manage Design Tokens in Figma.
2. Figma Deployment: Designers push a commit from Figma to update this repository with the latest tokens.
3. Automated Extraction: Upon changes, a CI script automatically converts the incoming tokens into css and performs a second commit to update the converted/css/variables.css file.
4. Distribution: These CSS variables are then made available for import by other repositories within our organization.

Usage

Repositories can import the latest CSS variables to ensure UI components are styled according to the most recent design guidelines.

package.json

"dependencies": {
    ...
    "design-tokens": "git+https://github.com/api3dao/design-tokens",
    ...
}

App.tsx

import 'design-tokens/converted/js/tokens.js';

Initial Setup

• Clone repo locally
• Run npm install
• Install style-dictionary globally: npm install -g style-dictionary
• Generate the styled dictionary setup: style-dictionary init basic
• Delete converted and tokens folders
• Replace content of config.json with the one from here: https://amzn.github.io/style-dictionary/#/config (remove android part and replace scss with css)

Contributing

Changes to design tokens should be made in the Figma file. This repository is for distribution purposes only and does not accept direct modifications to the design tokens.

Developers

• Use the provided CSS variables in your projects.
• Upon updating the repository, delete node_modules and run yarn install to update to latest version.

design-tokens's Issues

Finalize repo QA compliance

As part of the TM issue https://github.com/api3dao/tasks/issues/849 for QA, some requirements need to be addressed:

Repo setup requirements as per new_repo_creation_checklist.md:

• Link the repo to some relevant page if applicable
• Add the relevant license file LICENSE.md consistent with the organisational standards or project requirements.
• Review and confirm the repository’s settings align with the organization’s compliance and security protocols. (e.g. cross check https://github.com/api3dao/design-tokens/security)
• Install Renovate in the repository, following the guidelines outlined in dependencyManagementStrategy.md.
• Create a renovate.json configuration file in the root of the repository to manage dependencies effectively, as per our dependency management strategy.
• Set up Renovate (or Dependabot or a similar tool) for automated security vulnerability scanning to detect vulnerabilities in the codebase.

Use tailwind theme generator instead of css from styled-components

Burooj:

"Hey, I was hoping to implement this in the ecosystem website, but i see many of the css variables still show the [object object].
perhaps it would be better to work with tailwind here to generate the theme dynamically from the tokens with something like:
https://github.com/nado1001/style-dictionary-tailwindcss-transformer"