How to Automate Design Tokens in a Design System Using Multiple Tools

OLIVEYOUNG's D-PLOT service development team introduced design token automation to improve the efficiency of their design system while migrating to a new Next.js-based architecture.

Previously, developers had to manually modify styles whenever a design changed, and to solve the side-effect issues arising from this process, they designed an automation process. In this structure, when a design owner updates a token in Figma, the change is automatically generated as a GitHub PR that developers can easily review.

The implemented tech stack and process are as follows:

• Figma (Tokens Studio): Defining and exporting design tokens
• GitHub Actions: Automating token conversion and code reflection
• Panda CSS: Applying styles using a Zero Runtime CSS-in-JS library
• Monorepo: Maximizing reusability of design system components

Tokens are managed in layers as Primitive Tokens, which define basic values, and Semantic Tokens, which give them meaning, allowing flexible responses to design changes and improved development productivity.