https://github.com/api3dao/design-tokens

Automated design tokens pipeline from Figma to JS variables, ensuring design consistency and streamlined development across the organization.
https://github.com/api3dao/design-tokens

Last synced: 2 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/api3dao/design-tokens
• Owner: api3dao
• License: mit
• Created: 2023-11-27T11:54:33.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-11-08T15:55:02.000Z (7 days ago)
• Last Synced: 2024-11-08T16:44:19.084Z (7 days ago)
• Language: TypeScript
• Homepage:
• Size: 388 KB
• Stars: 3
• Watchers: 6
• Forks: 6
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        






# 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

```text

"dependencies": {

    ...

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

    ...

}

```

#### App.tsx

```text

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.