컴포넌트 & 인스턴스

아이콘 컴포넌트 색상 오버라이드 유지

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

질문사항

디자인 시스템에서 아이콘 컴포넌트를 사용 중입니다. 버튼 내 아이콘은 화이트 색상을 사용하는데, 아이콘 컴포넌트를 변경할 때 어떤 아이콘은 화이트가 유지되고 어떤 아이콘은 원래 색상(블랙)으로 돌아옵니다. 색상 오버라이드가 유지되는 기준이 무엇인가요? 아이콘 변경 시 색상을 화이트로 유지하고 싶습니다.

답변

Figma에서 컴포넌트 인스턴스를 교체할 때 색상 오버라이드가 유지되는 기준은 레이어 이름 매칭입니다.

오버라이드 유지: 교체하려는 새 아이콘 컴포넌트 내의 레이어 이름(예: `Vector`, `Path`)이 기존 아이콘 컴포넌트 내의 레이어 이름과 동일할 경우, Figma는 해당 레이어에 적용된 색상 오버라이드(예: 화이트)를 유지하려고 시도합니다.

오버라이드 초기화: 새 아이콘 컴포넌트 내의 레이어 이름이 기존 아이콘과 다르거나, 레이어 구조가 크게 변경된 경우, Figma는 오버라이드를 적용할 대상을 찾지 못해 새 아이콘의 기본 색상(예: 블랙)을 적용합니다.

해결 방법:

일관된 레이어 이름 사용: 모든 아이콘 컴포넌트의 색상이 적용되는 최하위 레이어(예: `Vector` 또는 `Path`)에 일관된 이름을 부여합니다. 예를 들어, 모든 아이콘의 메인 벡터 레이어 이름을 `Icon/Vector` 등으로 통일하면 오버라이드가 더 잘 유지됩니다.

색상 스타일 적용: 아이콘의 색상을 직접 지정하는 대신, `Primary`, `On Primary`와 같은 색상 스타일을 적용하여 관리하면, 컴포넌트 교체 시 스타일이 유지되어 색상 변경이 용이합니다. (단, 이 경우에도 레이어 이름 매칭이 중요합니다.)