질문사항
피그마에서 스타일(Styles)과 변수(Variables)의 정확한 차이는 무엇이며, 개발자와의 효율적인 협업을 위해 디자인 토큰화 시 어떤 것을 활용하는 것이 좋을까요? (특히 타이포그래피의 폰트, 행간, 굵기 등)
답변
개발자분들이 디자인 토큰화를 제안하신 것은 매우 좋은 방향입니다. 피그마의 스타일과 변수는 모두 디자인 시스템을 구축하는 데 사용되지만, 역할과 활용 방식에 차이가 있습니다.
1. 스타일 (Styles):
정의: 특정 속성(색상, 텍스트, 효과, 그리드)의 조합을 저장하고 재사용할 수 있게 합니다. 특징: 시각적 속성 그룹화: 예를 들어, 텍스트 스타일은 폰트, 크기, 굵기, 행간, 자간, 색상 등 여러 텍스트 속성을 한 번에 묶어서 관리합니다. 직접 적용: 디자인 요소에 직접 적용하여 일관된 시각적 표현을 만듭니다. 제한적 유연성: 스타일 내의 개별 속성(예: 폰트 굵기만)을 다른 스타일과 연결하거나 조건부로 변경하기는 어렵습니다. 예시: `H1/Bold/Black`, `Body/Regular/Gray`와 같은 텍스트 스타일, `Primary/Blue`, `Secondary/Red`와 같은 컬러 스타일.2. 변수 (Variables):
정의: 숫자, 문자열, 불리언, 컬러 등 단일 값을 저장하고 참조할 수 있게 합니다. 디자인 토큰의 개념과 가장 가깝습니다. 특징: 단일 값 관리: `spacing-md: 16px`, `color-primary: #007AFF`, `font-weight-bold: 700` 등 개별적인 값을 정의합니다. 모드(Modes) 지원: 다크 모드, 라이트 모드, 데스크톱/모바일 반응형 등 여러 모드에 따라 변수 값을 다르게 설정할 수 있습니다. 참조 및 계산: 다른 변수를 참조하거나 계산에 활용할 수 있어 유연성이 매우 높습니다. 개발자 친화적: 개발자가 코드에서 사용하는 디자인 토큰(CSS 변수 등)과 1:1 매칭하기 용이합니다. 예시: 컬러: `color.brand.primary: #007AFF` 간격: `spacing.md: 16px` 폰트 굵기: `font.weight.bold: 700` 폰트 크기: `font.size.h1: 48px`디자인 토큰화 및 개발자 협업:
개발자분들이 제안하신 대로 `Token Studio` 플러그인과 `Variables`를 활용하는 것이 현대적인 디자인 시스템 구축 및 개발자 협업에 훨씬 유리합니다.
워크플로우:기본 토큰 정의 (Variables): `color.primary`, `spacing.md`, `font.weight.bold`, `font.size.h1`, `line.height.body` 등 가장 기본적인 디자인 토큰들을 피그마 `Variables`로 정의합니다.시맨틱 토큰 정의 (Variables): `button.primary.background`, `text.heading.color` 등 UI 요소에 적용될 시맨틱한 토큰들을 기본 토큰을 참조하여 정의합니다. (예: `button.primary.background` = `color.brand.primary`)스타일 적용 (선택적): `Variables`를 사용하여 정의된 토큰들을 바탕으로 `Text Styles`나 `Color Styles`를 생성할 수 있습니다. (예: `H1` 텍스트 스타일은 `font.size.h1`, `font.weight.bold`, `line.height.h1` 변수를 참조하도록 설정)Token Studio 활용: `Token Studio`는 피그마의 `Variables` 기능을 보완하고 확장하여, 디자인 토큰을 더욱 체계적으로 관리하고 JSON 등으로 내보내 개발팀에 전달하는 데 매우 강력한 도구입니다.결론:
`Variables`는 디자인 시스템의 '원자'와 같은 역할을 하며, `Styles`는 이 원자들을 조합하여 '분자'를 만드는 것과 유사합니다. 개발자 협업을 위해서는 `Variables`를 통해 디자인 토큰을 명확하게 정의하고, 이를 `Token Studio`와 같은 도구로 관리하여 개발팀에 전달하는 것이 가장 효율적입니다. 이를 통해 디자인과 개발 간의 싱크를 맞추고, 변경 사항을 체계적으로 관리할 수 있습니다.
참고로 공유해주신 피그마피디아 링크는 스타일과 변수의 차이를 이해하는 데 좋은 자료입니다.