Figma Variables & Tokens: 디자인 시스템, 이제는 '체계적으로' 구축하세요

솔직히 말해봅시다. 디자인 시스템, 처음부터 끝까지 완벽하게 구축하는 거, 정말 쉽지 않죠. 특히 저처럼 개발자가 아닌, 디자이너 출신 PM이라면 더더욱. 6년 차 PM으로서 수많은 프로젝트를 거치면서 디자인 시스템의 필요성을 절감했지만, 번번이 '그림의 떡'처럼 느껴졌던 순간들이 있었습니다. 팀원들 간의 소통 오류, 코드와 디자인의 불일치, 끝없는 수정 요청… 이 모든 혼돈의 중심에 '일관성'의 부재가 있었고, 그 해결책으로 저는 Figma Variables와 Tokens에 주목했습니다.

이 글에서는 제가 AI 스타트업에서 겪었던 실제 경험을 바탕으로, Figma Variables와 Tokens를 활용하여 어떻게 디자인 시스템을 '체계적으로' 구축했는지, 그 실전 가이드를 여러분과 공유하고자 합니다. 개발자의 코드가 아닌, PM의 시각으로, 그리고 디자이너의 감성으로 말이죠.

왜 디자인 시스템인가? (그리고 왜 이 방법인가)

최근 저는 AI 스타트업에서 제품 관리 업무를 맡고 있습니다. 빠르게 변화하는 시장에서 민첩하게 대응하고, 사용자에게 일관되고 매력적인 경험을 제공하는 것이 무엇보다 중요하죠. 여기서 디자인 시스템은 단순한 '예쁜 UI'를 넘어, 제품 개발의 효율성을 극대화하고, 브랜드 아이덴티티를 강화하며, 궁극적으로는 팀원 모두가 같은 언어로 소통하게 만드는 핵심 인프라입니다.

하지만 기존의 방식은 종종 비효율적이었습니다. 디자이너가 수백 개의 컴포넌트와 스타일 가이드를 일일이 관리해야 했고, 개발자는 이를 다시 코드로 구현해야 했죠. 이 과정에서 발생하는 미묘한 차이들이 쌓여 결국 사용자 경험을 해치고, 수정 작업에 막대한 시간과 비용을 낭비하게 만들었습니다. 마치 설계도 없이 건물을 짓는 것과 같았죠.

Figma Variables와 Tokens는 이러한 문제에 대한 혁신적인 해결책을 제시합니다. '디자인의 핵심 속성'을 코드화하고, 이를 중앙에서 관리함으로써, 디자인과 개발 간의 간극을 획기적으로 줄일 수 있습니다.

Figma Variables & Tokens: 핵심 개념 이해하기

본격적인 구축 단계로 들어가기 전에, 몇 가지 핵심 개념을 명확히 짚고 넘어가겠습니다.

1. 디자인 토큰 (Design Tokens)

디자인 토큰은 디자인 시스템의 가장 기본적인 구성 요소입니다. 색상, 타이포그래피, 간격, 그림자 등 디자인의 '의미 있는 속성'을 추상화한 값이라고 생각하면 쉽습니다. 예를 들어, 'Primary Button Background Color'라는 토큰은 실제로는 #007AFF와 같은 색상 값을 가지게 됩니다.

• 장점: 디자인의 모든 요소를 일관된 데이터로 관리할 수 있습니다. 색상 팔레트 변경, 폰트 사이즈 조정 등 시스템 전반의 업데이트가 토큰 값 변경만으로 가능해집니다.

2. Figma Variables

Figma Variables는 이러한 디자인 토큰을 Figma 내에서 직접 정의하고 관리할 수 있게 해주는 강력한 기능입니다. 텍스트, 색상, 숫자, 불리언(Boolean) 값 등 다양한 타입의 변수를 생성하고, 이를 컴포넌트나 스타일 내에서 참조할 수 있습니다.

• 색상 변수: primary-color, secondary-color 등
• 텍스트 변수: heading-font-size, body-line-height 등
• 숫자 변수: spacing-medium, border-radius-small 등
• 불리언 변수: is-disabled, show-icon 등

Figma Variables를 사용하면, 디자인 파일 내에서 '실제 값'을 직접 수정하는 대신, '변수'를 수정하는 것만으로도 디자인 시스템 전체에 영향을 줄 수 있습니다.

PM의 시각으로 디자인 시스템 구축하기: 실전 가이드

이제 제가 AI 스타트업에서 실제로 적용했던, PM의 시각에서 디자인 시스템을 구축하는 과정을 단계별로 설명해 드리겠습니다. 디자이너와 개발자 모두가 이해하고 협업할 수 있도록, '개발자로서'가 아닌 'PM으로서'의 경험을 중심으로 풀어낼게요.

1단계: 핵심 디자인 속성 정의 및 페르소나 설정

가장 먼저 해야 할 일은 우리 제품의 핵심 디자인 속성이 무엇인지 정의하는 것입니다. 저는 이 작업을 위해 **'우리 제품의 성격은 무엇인가?'**라는 질문을 던졌습니다. 우리 제품이 추구하는 이미지는 무엇인지, 어떤 사용자에게 어필하고 싶은지 등을 명확히 해야 합니다. 예를 들어, AI 기반의 생산성 도구라면 '전문적이고, 신뢰할 수 있으며, 동시에 직관적이고 사용하기 쉬운' 이미지를 원할 것입니다.

이러한 정의를 바탕으로, 저는 다음과 같은 디자인 토큰의 기본 틀을 설정했습니다.

• Color: Primary, Secondary, Accent, Status (Success, Error, Warning), Neutral (Gray Scale)
• Typography: Heading (H1-H6), Body (Regular, Bold), Caption, Button Text
• Spacing: 4px, 8px, 16px, 24px, 32px (8의 배수 기반)
• Border Radius: Small, Medium, Large, Pill
• Shadows: Small, Medium, Large

이때, 디자이너 출신 PM으로서의 강점을 살려, 각 속성에 대한 '의미'를 부여하는 데 집중했습니다. 단순히 #007AFF가 아니라, 'Primary Action'을 위한 색상이라는 식으로 말이죠. 이는 나중에 개발자들과의 소통에서도 매우 중요한 역할을 합니다.

2단계: Figma Variables로 토큰 구현하기

이제 Figma로 넘어와서, 정의된 핵심 속성들을 Variables로 구현합니다. Figma의 'Variables' 패널을 열고, 위에서 정의한 각 카테고리별로 변수를 생성합니다.

• 색상 변수: color-primary-500, color-secondary-300 등과 같이 네이밍 규칙을 정하여 생성합니다. 제가 사용하는 AI 도구 중 하나는 이러한 네이밍 컨벤션을 제안해주기도 합니다. semantic (예: color-background-primary)과 primitive (예: color-blue-500) 토큰을 분리하여 관리하는 것이 장기적으로 유용합니다.
• 타이포그래피 변수: typography-heading-1/font-size, typography-heading-1/font-weight 와 같이 속성별로 변수를 만듭니다. 또는 typography-heading-1 이라는 이름으로 텍스트 변수를 만들고, 그 안에 font-size, font-weight, line-height 등을 그룹핑하여 관리할 수도 있습니다. 저는 후자 방식을 선호하며, 'AI 도구'의 도움을 받아 이 구조를 더욱 최적화했습니다.
• 수치 변수: spacing-8, border-radius-16 등으로 생성합니다. 이는 디자인 요소 간의 간격을 통일하고, 픽셀 단위의 불필요한 수치 입력을 줄여줍니다.

이 과정에서 Figma의 'AI' 기능을 활용하면, 반복적인 변수 생성을 자동화하고 잠재적인 오류를 줄이는 데 큰 도움을 받을 수 있습니다. 또한, Mode 기능을 활용하여 Light Mode, Dark Mode 등 다양한 테마에 대한 변수 세트를 미리 구축해두는 것이 좋습니다.

3단계: 컴포넌트에 Variables 적용하기

Variables를 정의했다면, 이제 이를 실제 컴포넌트에 적용할 차례입니다. 저는 자주 사용되는 UI 요소들 (버튼, 입력 필드, 카드 등)을 컴포넌트 라이브러리로 구축했습니다.

• 버튼 컴포넌트: 배경색은 color-primary-500, 텍스트 색상은 color-white, 폰트 스타일은 typography-button을 참조하도록 설정합니다. 버튼의 상태 (Hover, Disabled)에 따라 다른 색상 변수를 적용할 수 있도록 Mode를 활용합니다.
• 카드 컴포넌트: 배경색, 패딩, 모서리 둥글기 등은 각각 color-background-card, spacing-16, border-radius-medium 변수를 참조하도록 합니다.

이때, '개발자로서'가 아니라 'PM으로서' 저는 이 컴포넌트들이 어떤 '기능'을 수행하는지에 초점을 맞추었습니다. 각 컴포넌트의 속성들이 어떤 Use Case에서 사용될지를 명확히 정의하고, 이를 바탕으로 Variables를 적용했습니다. 예를 들어, '에러 메시지'에 사용되는 버튼은 color-error-500을, '성공 메시지'는 color-success-500을 참조하도록 말이죠.

4단계: Tokens를 위한 Export 설정 및 개발팀과의 협업

디자인 시스템 구축의 마지막 단계는, Figma에서 정의된 Variables를 개발팀이 사용할 수 있는 형태로 추출하는 것입니다. Figma의 Variables Export 기능을 활용하면 JSON, CSS 등 다양한 형식으로 토큰 값을 내보낼 수 있습니다. 저는 AI 기반의 토큰 추출 도구를 사용하여 이 과정을 자동화했습니다. 이 도구는 Figma Variables를 실시간으로 감지하여, 원하는 형식의 코드 스니펫을 생성해줍니다.

개발팀과의 긴밀한 협업은 필수입니다. 저는 개발팀과 정기적인 미팅을 가지며, 디자인 시스템의 업데이트 사항을 공유하고, 토큰 값의 의미와 사용법에 대해 명확히 설명했습니다. '개발자로서'가 아닌 '디자이너 출신 PM으로서' 저는 디자인의 의도를 개발팀이 정확히 이해할 수 있도록 돕는 역할을 했습니다. 특히, 제가 겪었던 '목 통증'과 같은 신체적 어려움 때문에 효율적인 작업 환경의 중요성을 누구보다 잘 알기에, 디자인 시스템이 개발팀의 업무 부담을 어떻게 줄여줄 수 있는지 구체적인 예시를 들어 설명했습니다.

결과: 혼돈에서 질서로

Figma Variables와 Tokens를 활용한 디자인 시스템 구축은 우리 팀의 업무 방식을 근본적으로 변화시켰습니다. 더 이상 '이 색깔이 맞나요?', '이 간격은 몇 픽셀인가요?'와 같은 질문에 시간을 낭비하지 않게 되었습니다. 디자인과 개발 간의 싱크는 훨씬 빨라졌고, 제품의 일관성은 눈에 띄게 향상되었습니다. 마치 오랫동안 엉켜 있던 실타래가 깔끔하게 풀린 듯한 느낌이었죠.

물론, 디자인 시스템 구축은 한 번에 끝나는 프로젝트가 아닙니다. 끊임없는 유지보수와 업데이트가 필요합니다. 하지만 Figma Variables와 Tokens는 이러한 과정을 훨씬 더 효율적이고 체계적으로 만들어줍니다. 마치 잘 짜인 알고리즘처럼 말이죠.

다음 단계: 당신의 디자인 시스템은 안녕하십니까?

혹시 지금, 여러분의 디자인 프로젝트도 디자인 시스템 부재로 인해 혼돈 속에 있지는 않으신가요? Figma Variables와 Tokens를 활용하여, 여러분의 디자인 시스템을 한 단계 업그레이드해볼 것을 강력히 추천합니다. PM으로서, 디자이너로서, 또는 개발자로서, 여러분은 디자인 시스템 구축에서 가장 큰 어려움을 겪었던 부분이 무엇이었나요? 여러분의 경험을 댓글로 공유해주세요.