베리어블 & 디자인 시스템

컴포넌트/스타일과 피그마 베리어블 비교

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

질문사항

컴포넌트나 스타일 가이드를 만들어서 등록하고 변경하는 방식과 피그마 변수(Variables)를 사용하는 방식은 동일한가요?

아니요, 동일하지 않습니다. 컴포넌트와 스타일은 디자인 시스템의 핵심 요소이지만, 변수(Variables)는 이들을 더욱 유연하고 강력하게 만드는 새로운 차원의 기능입니다.

스타일(Styles): 색상, 텍스트, 효과, 그리드 등 시각적인 속성 자체를 정의하고 재사용합니다. 주로 '보이는 결과'를 관리하며, 정적인 값(예: 특정 HEX 코드)을 가집니다.

변수(Variables): 숫자, 색상, 문자열, 불리언 등 추상적인 '값'을 정의하고 관리합니다. 이 값들은 스타일이나 컴포넌트의 속성에 연결될 수 있으며, 조건에 따라 동적으로 변경될 수 있습니다.

주요 차이점:

관리 대상: 스타일은 시각적 속성(예: `primary-color: #FF0000`)을 관리하고, 변수는 추상적인 값(예: `color-brand-primary: {red-500}`)을 관리합니다.

유연성: 스타일은 정적이지만, 변수는 모드(Mode)를 통해 다크 모드, 반응형 크기, 언어 등 다양한 조건에 따라 값을 동적으로 변경할 수 있습니다.

디자인 시스템 통합: 변수는 디자인 시스템을 코드처럼 다루고, 토큰 기반의 워크플로우를 구축하는 데 필수적입니다. 이를 통해 개발자와의 핸드오프를 더욱 효율적으로 만들 수 있습니다.

결론: 컴포넌트와 스타일은 디자인 시스템의 '뼈대'와 '살'이라면, 변수는 이들을 '움직이게 하는 엔진'과 같습니다. 변수를 활용하면 디자인 시스템의 확장성과 유지보수성이 크게 향상됩니다.