컴포넌트 & 인스턴스

Figma 아이콘 색상 관리 방식

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

질문사항

Figma에서 아이콘 색상을 관리할 때, 마스터 컴포넌트의 아이콘 색상을 블랙으로 설정하고 UI 페이지에서 인스턴스 색상만 변경하는 방식이 일반적인가요?

Figma에서 아이콘 색상을 관리하는 일반적인 방법은 다음과 같습니다:

모든 아이콘을 독립된 컴포넌트로 관리: Assets 패널에서 쉽게 검색하고 재사용할 수 있도록 각 아이콘을 개별 컴포넌트로 만듭니다.

아이콘 패스 정리 (Outline Stroke): 아이콘의 스트로크(Stroke)를 아웃라인(Outline Stroke) 처리하여 패스(Path)로 변환합니다. 이는 아이콘의 크기 조절 시 일관성을 유지하고, 색상 적용을 용이하게 합니다.

패스 이름 통일: 아이콘 내부의 모든 패스 레이어 이름을 동일하게 설정합니다 (예: `Vector`, `Path`). 이는 색상 스타일이나 변수를 적용할 때 일관성을 유지하는 데 도움이 됩니다.

메인 컴포넌트 색상 관리:

기본 색상 (블랙/그레이): 대부분의 아이콘 마스터 컴포넌트는 기본 색상(예: 블랙 또는 특정 그레이 스케일)으로 설정합니다.

인스턴스에서 색상 변경: UI 페이지에서 아이콘 인스턴스를 사용할 때, 필요한 색상으로 오버라이드하여 변경합니다. 이는 디자인 시스템의 유연성을 높여줍니다.

스태틱 컬러 아이콘: 특정 브랜드 컬러나 고정된 색상을 항상 사용하는 아이콘(예: 로고 아이콘)의 경우, 메인 컴포넌트 단계에서부터 해당 색상을 적용하여 관리할 수 있습니다.

이러한 방식을 통해 아이콘의 재사용성을 높이고, 디자인 시스템 내에서 일관된 색상 관리를 할 수 있습니다.