Figmapedia
목록으로 돌아가기
컴포넌트 & 인스턴스

아이콘 컴포넌트 색상 자동 변경

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

질문사항

아이콘 컴포넌트의 색상이 자동으로 변경되는 기능은 어떻게 설정하는 건가요? (직접 변경 없이)

답변

아이콘 컴포넌트의 색상을 직접 변경하지 않고 동적으로 바꾸려면, 아이콘 컴포넌트 내의 색상 레이어에 컬러 스타일 또는 컬러 변수(Color Variable)를 적용해야 합니다.
  • 컬러 스타일 사용: 아이콘 내의 색상 레이어를 선택하고, 디자인 패널의 'Fill' 섹션에서 로컬 컬러 스타일을 적용합니다. 인스턴스에서는 이 스타일을 다른 스타일로 스왑하여 색상을 변경할 수 있습니다.
  • 컬러 변수(Color Variable) 사용: 아이콘 내의 색상 레이어에 컬러 변수를 적용합니다. 인스턴스에서는 디자인 패널의 'Variables' 섹션에서 해당 변수의 값을 변경하여 색상을 바꿀 수 있습니다.
  • 만약 변수나 스타일을 적용했는데도 색상이 변경되지 않는다면, 다음을 확인해 보세요:

  • 아이콘 컴포넌트 내의 색상 레이어에 실제로 변수/스타일이 적용되어 있는지.
  • 인스턴스에서 해당 변수/스타일이 오버라이드(override)되지 않았는지.
  • 컴포넌트가 올바르게 설정되어 인스턴스에서 속성 패널을 통해 색상 변경이 가능하도록 되어 있는지 (예: `Swap instance` 또는 `Boolean property`를 활용한 색상 변경).
  • 경우에 따라서는 컴포넌트 내의 색상 레이어를 선택하고, 'Selection colors' 패널에서 색상을 변경하는 것이 가장 간단할 수 있습니다.