컴포넌트 & 인스턴스

투명도 0 컴포넌트 내 아이콘/글자 스왑

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

질문사항

오른쪽 배경을 투명도 0으로 설정하여 온/오프 상태를 만들었습니다. 이제 이 컴포넌트 내에서 아이콘과 글자를 교체(스왑)하고 싶은데, 어떻게 구현할 수 있을까요?

컴포넌트 내에서 아이콘과 글자를 교체하는 방법은 크게 두 가지가 있습니다:

개별 컴포넌트 생성: 교체하려는 각 [아이콘 + 글자] 조합을 각각 별도의 컴포넌트로 만듭니다. 그리고 메인 컴포넌트 내에서 이 개별 컴포넌트들을 인스턴스로 사용하여 필요에 따라 'Swap instance' 기능을 통해 교체합니다.

중첩 인스턴스(Nested Instances) 및 컴포넌트 세트 활용:

모든 아이콘들을 하나의 컴포넌트 세트(예: `Icons/Type=Home`, `Icons/Type=Settings` 등)로 만듭니다.

모든 글자(텍스트 레이어)들도 하나의 컴포넌트 세트(예: `Labels/Text=Home`, `Labels/Text=Settings` 등)로 만듭니다.

메인 컴포넌트 내에 아이콘 컴포넌트 세트의 인스턴스와 글자 컴포넌트 세트의 인스턴스를 중첩하여 넣습니다.

메인 컴포넌트의 Variants 속성을 사용하여, 각 Variant에서 중첩된 아이콘 및 글자 인스턴스의 속성(예: `Type` 속성)을 변경하여 원하는 조합을 만듭니다.

두 번째 방법은 더 유연하고 확장성이 높아 디자인 시스템 구축에 유리합니다.