SK Planet Syrup Streamlines UX-FE Handoff and Maximizes Development Productivity by Building a Design System

SK Planet's Syrup team built a Design System to resolve style inconsistencies and duplicate work between design and development. This goes beyond a simple visual guide, encompassing reusable components, rules, and code guides, and connects the design-development flow by integrating Figma and Storybook.

Design System Architecture and Token Usage

The Design System consists of three stages: Foundation (typography, colors, etc.), Component, and Template. In particular, Design Token is defined as a variable for UI style attributes such as color and spacing, serving as a common language between design and development. Developers convert Token data extracted from Figma in JSON format into code, allowing them to maintain consistency without code changes when styles are updated.

Figma-Storybook Based Handoff Process

The Hand-off process at the point when design ends and development begins was streamlined using Figma's Dev Mode and Storybook. Designers organize and deliver component specifications and Token information in Figma, and developers use this as the basis for developing and testing components in Storybook. Completed components are packaged as NPM libraries and deployed to the internal repository (NEXUS), allowing developers to easily pull them in and integrate them into projects.

Technical Implementation and Expected Effects

Syrup uses Figma Plugins to automatically extract design elements into JSON and SASS files, which are then converted into CSS Variables for application. Key components such as buttons are developed with TypeScript and JSX for type safety. With the adoption of this system, as of the 2024 app redesign, 67 out of 196 components (about 34%) were applied, and it is estimated to have reduced QA lead time by about 45.59%, saving an average of 6.53 days.