컴포넌트 관리

아이콘 컴포넌트 색상 관리 효율화

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

질문사항

Figma에서 아이콘 컴포넌트의 색상 관리는 어떻게 하는 것이 효율적인가요? 특히 인스턴스 스왑 시 색상이 변경되는 경우, 레이어명에 색상 정보를 추가해야 하는지, 아니면 개발자가 SVG 파일을 받아 코드로 색상을 변경하는 것이 일반적인지 궁금합니다. 이전 툴에서는 색상별로 파일을 따로 관리했습니다.

답변

Figma에서 아이콘 색상 관리는 여러 방법이 있지만, 가장 효율적인 방법은 컬러 스타일(Color Styles)과 컴포넌트 속성(Component Properties)을 활용하는 것입니다.

컬러 스타일 적용: 아이콘의 Fill 색상에 디자인 시스템의 컬러 스타일을 적용합니다. 이렇게 하면 아이콘 인스턴스에서 색상을 쉽게 변경할 수 있으며, 개발자는 해당 컬러 스타일의 토큰을 참조할 수 있습니다.

컴포넌트 속성 (Variant 또는 Boolean/Instance Swap):

Variant: 아이콘의 주요 상태(예: 기본, 활성, 비활성)에 따라 색상이 달라지는 경우, Variant를 사용하여 각 상태별 아이콘을 만들고 색상을 미리 지정할 수 있습니다.

Boolean Property: 아이콘 내부에 색상을 변경할 수 있는 레이어(예: `icon-fill`)를 만들고, 이 레이어에 Boolean Property를 적용하여 On/Off를 통해 색상 변경을 유도할 수도 있습니다.

Instance Swap: 아이콘 자체를 스왑하는 경우, 스왑되는 아이콘이 이미 적절한 컬러 스타일을 가지고 있도록 관리합니다.

개발자 핸드오프:

SVG 파일: 개발자는 Figma에서 SVG 파일을 직접 내보내거나 Dev Mode를 통해 SVG 코드를 확인할 수 있습니다. SVG는 XML 기반이므로, 개발자는 CSS나 JavaScript를 사용하여 SVG 내부의 `fill` 속성을 동적으로 변경할 수 있습니다. 따라서 디자이너가 색상별로 여러 SVG 파일을 제공할 필요는 없습니다.

디자인 토큰: 컬러 스타일을 디자인 토큰으로 관리하고 있다면, 개발자는 해당 토큰을 참조하여 아이콘의 색상을 적용합니다. 예를 들어, `color-primary-500`과 같은 토큰을 사용하여 아이콘의 `fill` 값을 설정합니다.

레이어명: 레이어명에 색상 정보를 추가하는 것은 Figma 내에서 디자이너의 가독성을 높일 수는 있지만, 개발자 핸드오프 시 필수적인 방법은 아닙니다.

결론적으로, Figma에서는 컬러 스타일을 활용하여 아이콘 색상을 관리하고, 개발자는 SVG의 유연성을 활용하여 코드로 색상을 변경하는 것이 일반적입니다. 디자이너는 색상별로 별도의 아이콘 파일을 만들 필요 없이, 하나의 아이콘 컴포넌트에서 다양한 색상을 표현할 수 있도록 구조화하는 데 집중하는 것이 좋습니다.