컴포넌트 & 인스턴스

인스턴스 아이콘 색상 미변경 해결

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

질문사항

메인 컴포넌트에서 아이콘을 인스턴스 스왑 프로퍼티로 설정했습니다. 인스턴스에서 아이콘 종류를 변경했을 때, 일부 아이콘은 메인 컴포넌트에 지정된 색상으로 바뀌지만, 다른 아이콘은 원래 아이콘 제작 시 설정된 색상값대로 나타납니다. 컴포넌트에서 지정한 색상대로 나타나지 않는 이유와 해결 방법이 궁금합니다.

답변

이 문제는 아이콘 컴포넌트의 구조나 명명 규칙이 일관되지 않을 때 주로 발생합니다. 다음 사항들을 확인해 보세요:

레이어 구조의 일관성: 스왑하려는 모든 아이콘 컴포넌트의 내부 레이어 구조가 동일한지 확인합니다. 예를 들어, 모든 아이콘이 `Vector` 레이어 하나로 구성되어 있거나, `Path` 레이어 그룹으로 구성되어 있는지 등 일관된 구조를 유지해야 합니다.

레이어 명명 규칙: 색상 오버라이드가 적용될 벡터 레이어의 이름이 모든 아이콘에서 동일한지 확인합니다. 예를 들어, 모든 아이콘의 색상이 적용되는 최상위 벡터 레이어 이름을 `Vector` 또는 `Icon Fill` 등으로 통일하는 것이 좋습니다.

Fill/Stroke 속성: 아이콘이 `Fill` (면) 속성으로 채워져 있는지, `Stroke` (선) 속성으로 그려져 있는지 일관성을 유지해야 합니다. 컴포넌트에서 색상을 오버라이드할 때, 해당 속성에만 적용되기 때문입니다.

색상 스타일 적용: 아이콘 컴포넌트 자체에 색상 스타일이 적용되어 있다면, 인스턴스에서 오버라이드하기 어려울 수 있습니다. 메인 컴포넌트에서 색상 오버라이드를 허용하려면, 아이콘 내부의 색상 레이어에 직접 색상 스타일을 적용하기보다는, 인스턴스에서 변경될 수 있도록 준비하는 것이 좋습니다.