베리어블 & 디자인 시스템

기존 컴포넌트 활용 색상 변경

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

질문사항

기존 UI 디자인에서 색상만 다르게 새로운 디자인을 만들어야 할 때, 컴포넌트를 새로 만들어야 하나요, 아니면 기존 컴포넌트를 활용하여 색상만 변경할 수 있나요?

답변

기존 컴포넌트를 그대로 활용하면서 색상만 다르게 적용하려면 Figma의 `Variables`와 `Modes` 기능을 사용하는 것이 가장 효율적입니다.

컬러 변수 정의: 디자인 시스템에서 사용되는 모든 색상을 `Color Variables`로 정의합니다. 예를 들어, `Primary/500`, `Surface/Default` 등으로 이름을 지정합니다.

모드(Modes) 설정: 여러 테마(예: Light/Dark 모드, 브랜드 A/브랜드 B 테마)에 해당하는 `Mode`를 생성합니다. 각 모드에서 동일한 변수 이름에 다른 색상 값을 할당합니다. 예를 들어, 'Brand A' 모드에서는 `Primary/500`이 파란색 계열, 'Brand B' 모드에서는 `Primary/500`이 초록색 계열이 되도록 설정합니다.

컴포넌트에 변수 적용: 컴포넌트를 만들 때, 색상을 직접 지정하는 대신 정의된 `Color Variables`를 연결합니다.

모드 전환으로 색상 변경: 디자인 작업 시, 최상위 프레임이나 특정 프레임에 원하는 `Mode`를 적용하면, 해당 프레임 내의 모든 컴포넌트와 요소들이 자동으로 해당 모드의 색상 변수 값을 따라 색상이 변경됩니다.

이 방법을 사용하면 컴포넌트를 새로 만들 필요 없이, 하나의 컴포넌트 세트로 다양한 색상 테마를 유연하게 관리하고 전환할 수 있습니다.