Skip to content

Design tokens ‐ Setup Github workflow

Jump to bottom
Jura Khrapunov edited this page Nov 20, 2024 · 1 revision

Github workflow to convert Figma design tokens to SCSS variables

Purpose

This documentation is intended for developers and designers who work with design tokens in Figma. It describes how Github workflow works and what steps take place within the process of generating SCSS variables from Figma design tokens.

Overview

The process of automation of design tokens from Figma to Storybook allows:

  • Keep styles in Figma and Storybook consistent.

  • Ensure consistency of tokens without manual intervention.

  • Increase the efficiency and speed of the design and development workflows.

Requirements

Github workflow (Generate scss vars from Figma design tokens):

Figma Design tokens studio, configured according to this guidance, pushes changes into the branch update-figma-tokens and triggers  Generate scss vars from figma tokens workflow. It refactors incoming JSON, converts it to SCSS and creates (or updates) Pull Request to the develop branch. 

Breakdown of workflow steps:

  • Trigger: on: push

The workflow runs when changes are pushed to the update-figma-tokens branch, but only if files in the figma-tokens/input/** folder are modified.

  • Workflow steps:

1. Transform Figma tokens

What it does: Uses token-transformer command to process Figma tokens from the figma-tokens/input/tokens.json file.

Result: Generates transformed tokens in the figma-tokens/transformed-tokens/tokens-transformed.json ****file.

2. Generate SCSS from tokens

What it does:

Executes the build-tokens script (figma-tokens/build-figma-tokens.mjs) to convert the JSON tokens into an SCSS file.

build-figma-tokens.mjs:

config.json:

Result: SCSS variables are saved in the file stories/assets/scss/figma-scss/_figma-variables.scss.

3. Create or update the branch

What it does:

Configures Git to commit changes on behalf of the GitHub Actions bot.

Adds the updated _figma-variables.scss file.

Commits the changes if any.

Result: The update-figma-tokens branch is updated.

4. Push changes

What it does: Pushes changes to the update-figma-tokens branch. If no changes exist, the command does nothing.

Result: Сhanges have pushed

5. Automatic Pull Request

What it does:

Creates a Pull Request (PR) with a title, description, base branch (develop), and target branch (update-figma-tokens).

Uses the GitHub API to create the PR.

Result: Automatically creates a PR with the updated SCSS variables.

Clone this wiki locally