컴포넌트 & 인스턴스

버튼 아이콘, Variants 관리

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

질문사항

아이콘이 자주 바뀌는 버튼 컴포넌트를 만들 때, 아이콘을 Variants로 묶는 것이 보편적인 방법인가요?

답변

아이콘이 자주 바뀌는 버튼 컴포넌트를 만들 때, 아이콘을 Variants로 묶는 방법은 일반적인 접근 방식 중 하나입니다. 하지만 더 효율적인 방법은 아이콘 자체를 별도의 컴포넌트로 만들고, 이 아이콘 컴포넌트를 버튼 컴포넌트의 슬롯(slot)에 넣는 것입니다.

아이콘 컴포넌트 분리: 모든 아이콘을 개별 컴포넌트로 만듭니다.

버튼 컴포넌트 생성: 버튼 컴포넌트를 만들 때, 아이콘이 들어갈 자리에 `Swap instance`가 가능한 아이콘 컴포넌트 인스턴스를 배치합니다.

Variants 활용: 버튼의 상태(Primary, Secondary, Disabled 등)나 크기(Small, Medium, Large)에 따라 Variants를 만들고, 각 Variant 내에서 아이콘 컴포넌트의 `Swap instance` 속성을 노출시켜 사용자가 쉽게 아이콘을 변경할 수 있도록 합니다.

이 방법은 아이콘 변경의 유연성을 높이고, 디자인 시스템 관리 및 개발자 핸드오프 시에도 명확한 구조를 제공합니다. 개발팀과의 협의를 통해 가장 적합한 방식을 선택하는 것이 중요합니다.