🎨 kg-css-variables

Automatically transform Figma design tokens into css variables and create PR for frontend usage

This repo is supposed to be used together with the Design Tokens plugin for Figma. It transforms the exported design tokens using Amazon style dictionary.

Why

To eliminate the synchronization gap between design and engineering, we adopt an automated approach to align parameters. Designers can push variable updates from Figma with a single click, and front-end developers can simply reference the converted variables.

Workflow

1. [Designer] Open figma file and export design tokens through plugin - design tokens
2. [Github Workflow] Trigger transform token actions and create PR of variables
3. [FrontEnd] Check Github Repo - kg-css-variables and maintain variables for frontend usage

Documentation

Notion - Automated Design Token Integration