3단계로 완성하는 유연한 디자인 시스템

3 단계 디자인 시스템

디자인 시스템의 유연성을 위해 3 단계로 구성한 방법을 소개합니다. 토큰을 활용하여 디자인 시스템의 장점을 최대화합니다.

• Primitive 토큰: 기본 값을 갖는 토큰으로 3 단계 구조의 첫 번째 계층입니다.
• Semantic 토큰: Primitive를 값으로 갖는 두 번째 계층으로, 모든 요소에 우선적으로 적용됩니다.
• Component-specific 토큰: Semantic 토큰에 더해진 컴포넌트 특화 값으로, 컴포넌트에 맞게 적용됩니다.

Figma에서 3 단계 토큰 구조 활용하기

Figma의 Variables 기능을 이용하여 디자인 시스템의 토큰 구조를 구현하고, 테마를 손쉽게 변경할 수 있습니다.

3 단계 토큰 구조를 활용한 효율적인 디자인 시스템 구축

프로퍼티 일치를 통해 컴포넌트에서 사용하는 토큰 수를 줄이고, 원하는 테마를 쉽게 적용할 수 있습니다.디자인 시스템을 적용한 ABC User Feedback의 프로덕트 화면을 확인해보세요.