컴포넌트 & 인스턴스

아이콘 컴포넌트 인스턴스 변경 후 되돌아감 해결

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

질문사항

아이콘 버튼 컴포넌트에서, 인스턴스의 아이콘을 변경한 후 베리언트 상태를 변경하면 원래 아이콘으로 되돌아가는 문제가 발생합니다. 어떻게 해결할 수 있나요?

답변

이 문제는 주로 컴포넌트 베리언트의 기본 설정값 때문에 발생합니다. 인스턴스에서 아이콘을 변경해도, 베리언트 상태를 변경하면 해당 베리언트의 마스터 컴포넌트에 정의된 기본 아이콘으로 돌아가는 것이죠. 이를 해결하려면 [Swap Instance Property](https://help.figma.com/hc/en-us/articles/5874288600087-Organize-your-files-with-sections#h_01G22100000000000000000000000000)를 활용해야 합니다.

마스터 컴포넌트 수정: 아이콘 버튼의 마스터 컴포넌트(또는 베리언트 세트 내 각 베리언트)로 이동합니다.

아이콘 슬롯 생성: 아이콘이 들어갈 자리에 더미 아이콘을 배치하고, 이 아이콘 레이어를 선택합니다.

Swap Instance Property 적용: 디자인 패널의 오른쪽 사이드바에서 'Properties' 섹션을 찾습니다. 'Add new property'를 클릭하고 'Instance swap'을 선택합니다. 이 속성에 이름을 지정합니다 (예: `icon`).

사용 가능한 아이콘 추가: 'Instance swap' 속성을 설정할 때, 이 버튼에서 교체할 수 있는 모든 아이콘 컴포넌트들을 'Available components'에 추가해줍니다.

인스턴스에서 사용: 이제 디자인 파일에서 아이콘 버튼 인스턴스를 선택하면, 오른쪽 사이드바에 `icon`이라는 속성이 나타나고 드롭다운 메뉴를 통해 원하는 아이콘으로 쉽게 교체할 수 있습니다. 이렇게 하면 베리언트 상태를 변경해도 아이콘이 유지됩니다.

워크플로우: 베리언트 값을 변경한 후, 아이콘을 교체하는 순서로 진행하면 원하는 결과를 얻을 수 있습니다.