컴포넌트 관리

디자인 가이드 버튼 아이콘 컴포넌트 관리

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

질문사항

디자인 가이드라인을 만들 때, 버튼 내 아이콘처럼 다양한 종류로 변경될 수 있는 요소들을 모두 컴포넌트로 만들어 관리해야 하나요?

답변

버튼 내 아이콘과 같이 여러 종류로 변경되어 사용될 수 있는 에셋의 경우, 컴포넌트 프로퍼티(Component Properties)를 활용하여 관리하는 것이 일반적이며 매우 효율적입니다.

필수 사항은 아님: 모든 아이콘 조합을 개별 컴포넌트로 미리 만들어둘 필요는 없습니다. 이는 오히려 관리 부담을 가중시킬 수 있습니다.

프로퍼티 활용: 버튼 컴포넌트를 만들 때, 아이콘을 위한 슬롯을 만들고 `Instance Swap` 프로퍼티를 적용하여 필요에 따라 원하는 아이콘 인스턴스로 쉽게 교체할 수 있도록 설계합니다. 또는 `Boolean` 프로퍼티를 사용하여 아이콘의 가시성을 제어할 수도 있습니다.

장점:

유지보수 용이성: 아이콘 변경이나 추가 시 마스터 컴포넌트만 업데이트하면 모든 인스턴스에 반영됩니다.

개발 효율성: 개발자에게 명확한 구조를 제공하여 디자인 to 코드(Design to Code) 과정에서 일관성을 유지하고 효율성을 높일 수 있습니다.

일관성: 디자인 시스템 내에서 아이콘 사용의 일관성을 보장합니다.

따라서, 무조건 모든 경우의 수를 미리 만들어두기보다는, 아이콘을 컴포넌트화하고 이를 버튼 컴포넌트 내에서 프로퍼티로 관리하는 방식을 추천합니다.