컴포넌트 & 인스턴스
네비게이션 아이콘 색상 변경 오류
피그마 오픈카톡방2026. 3. 7.
질문사항
네비게이션 바의 메뉴별 상태에 따라 아이콘 색상이 변경되도록 설정하고 있습니다. selected 상태일 때 아이콘이 흰색으로 변경되게 하려면, 메뉴에 들어갈 아이콘이 포함된 상태로 variant를 만들고 value값을 주어야 아이콘 색상이 변경될까요? 현재 variant에 설정된 아이콘은 색상이 변경되지만, 다른 아이콘으로 변경한 상태에서는 selected로 변경해도 색상 변경이 안됩니다.
답변
아닙니다. 메뉴마다 각각 컴포넌트를 만드는 것이 아니라, 하나의 컴포넌트를 만들고 그 안에 아이콘은 Instance Swap 기능을 사용하여 교체하는 방식으로 사용해야 합니다. Instance Swap으로 교체된 아이콘의 색상이 제대로 변경되지 않는다면, 몇 가지 케이스를 확인해봐야 합니다.
일반적으로 아이콘 컴포넌트 내부에 색상 변경을 위한 `Selection Colors` 또는 `Variables`가 적용되어 있어야 하며, Instance Swap 시 교체되는 아이콘도 동일한 색상 속성을 가지고 있어야 합니다. 아이콘 컴포넌트의 Fill 속성이 단색(Solid)으로 설정되어 있고, 해당 색상이 Variables나 Style로 연결되어 있다면, Variant 변경 시 색상도 함께 변경될 것입니다.