컴포넌트 & 인스턴스

컴포넌트 인스턴스 요소 변경

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

질문사항

헤더처럼 공통으로 사용하는 부분을 컴포넌트화했습니다. 인스턴스에서 로고와 같은 특정 요소를 다른 것으로 수정하려고 할 때 변경이 안 되는데, 이럴 경우 컴포넌트를 해제(detach)하는 방법밖에 없을까요?

답변

컴포넌트 인스턴스 내의 특정 요소를 수정하려면, 해당 요소가 메인 컴포넌트에서 'Swap Instance'가 가능한 컴포넌트이거나, 'Content Property'로 설정되어 텍스트나 이미지 등을 변경할 수 있도록 설계되어야 합니다. 만약 메인 컴포넌트에서 해당 요소가 고정되어 있다면, 인스턴스에서 직접 수정하기 어렵습니다. 이 경우 다음과 같은 방법을 고려할 수 있습니다:

메인 컴포넌트 수정: 로고처럼 중요한 요소는 메인 컴포넌트 자체를 수정하여 모든 인스턴스에 반영하거나, 로고를 컴포넌트화하여 메인 컴포넌트 내에서 'Swap Instance'가 가능하도록 만듭니다.

Variants 사용: 로고 유무나 종류에 따라 여러 버전의 헤더가 필요하다면, Variants를 사용하여 하나의 컴포넌트 내에서 다양한 상태를 관리할 수 있습니다.

컴포넌트 해제(Detach Instance): 정말 예외적인 경우로, 해당 인스턴스가 메인 컴포넌트의 규칙을 따르지 않아도 되는 독립적인 요소로 사용될 때만 고려해야 합니다. 하지만 이는 디자인 시스템의 일관성을 해칠 수 있으므로 신중하게 결정해야 합니다.