베리어블 & 디자인 시스템

컬러 베리어블과 스타일 차이

피그마 오픈카톡방2026. 3. 7.

질문사항

컬러 베리어블과 스타일의 차이가 무엇인가요? 디자인 시스템에서 컬러를 베리어블 또는 디자인 스타일로 관리하는 경우가 있는데, 어떤 차이가 있는지 궁금합니다.

답변

Figma에서 스타일(Styles)은 텍스트, 색상, 효과, 그리드 등 특정 시각적 속성 세트를 저장하고 재사용하는 데 사용됩니다. 예를 들어, 특정 폰트 크기, 색상, 자간을 가진 텍스트 스타일이나 특정 색상 코드를 가진 컬러 스타일을 만들 수 있습니다. 스타일은 주로 일관된 디자인을 유지하고 빠르게 변경 사항을 적용할 때 유용합니다.

변수(Variables)는 색상 코드, 숫자, 문자열, 불리언(true/false)과 같은 원시 값을 저장하는 데 사용됩니다. 변수는 특히 다크 모드, 언어 변경, 브랜드 테마 변경 등 조건에 따라 값이 동적으로 변경되어야 할 때 매우 강력합니다. 예를 들어, `primary-color`라는 변수를 정의하고, 라이트 모드에서는 파란색, 다크 모드에서는 더 어두운 파란색으로 설정할 수 있습니다. 변수는 디자인 토큰(Design Tokens)을 관리하는 데 핵심적인 역할을 합니다.

주요 차이점:

적용 대상: 스타일은 레이어의 시각적 속성(Fill, Stroke, Text 등)에 직접 적용됩니다. 변수는 레이어의 속성 값(예: Fill의 색상 코드, Auto Layout의 간격 수치)에 연결됩니다.

유연성: 스타일은 고정된 속성 세트를 재사용하는 반면, 변수는 조건에 따라 동적으로 값을 변경할 수 있어 훨씬 유연합니다.

용도: 스타일은 일관된 시각적 표현을 위해, 변수는 디자인 토큰 관리 및 동적 테마/모드 전환에 주로 사용됩니다.

더 자세한 내용은 Figma 공식 문서를 참고하세요:

[The difference between variables and styles](https://help.figma.com/hc/en-us/articles/15871097384471-The-difference-between-variables-and-styles)