[Figma] 컴포넌트안에 컴포넌트 만들기, Nested Component 실무 활용법

1. Nested Component란?

컴포넌트 안에 또 다른 컴포넌트를 넣는 구조를 의미해요.
예를 들어 버튼 안에 아이콘이 들어가 있다고 해볼게요.
이 아이콘도 별도로 만든 ‘아이콘 컴포넌트’라면, 이건 Nested Component 구조라고 할 수 있어요.

 

 

이렇게 만들면 디자인 시스템을 더 깔끔하고 유연하게 관리할 수 있어요.

 

 

 

2. 왜 써야 할까? 

 

• 유지보수 효율 ↑ → 아이콘이나 서브 컴포넌트를 수정하면, 모든 인스턴스에 자동 반영됨
• 재사용성 ↑ → 같은 아이콘, 같은 텍스트 스타일을 여러 곳에서 활용 가능
• 스타일 일관성 유지 → 브랜드 가이드를 지키기 쉬움

 

예: 아이콘 색상을 바꾸고 싶을 때, ‘아이콘 컴포넌트’ 하나만 수정하면 버튼, 탭바, 카드 등 전체에 반영됨.

 

 

 

 

 

 

3. 실전 예시: 버튼 안에 아이콘 넣기

1. Icon이라는 컴포넌트를 먼저 만든다

 

 

2. Button 컴포넌트를 만들고, 안에 텍스트 + 복사한 Icon 컴포넌트를 넣는다

 

 

이 상태에서 Button을 인스턴스로 만들고, 각 인스턴스마다 다른 아이콘으로 바꾸고 싶을때이때 많은 사람들이

"왜 인스턴스 안에 있는 → 아이콘이 안 바뀌지?"라고 생각해요. 그게 바로 다음 내용이에요.

 

 

4. Swap instance

• Swap instance (인스턴스 교체) 기능을 써야 교체가 가능해요.
• 해결 방법: 아이콘을 선택하고 오른쪽 속성창에서 “Swap instance” 버튼 클릭
  → 원하는 아이콘 컴포넌트로 교체 가능
   ❌ 단, 너무 깊게 중첩된 구조는 관리하기 어렵고 실수도 많아짐 → 🆗 2~3단계 중첩 이내가 적당

 

 

 

 

 

5. 실무에서 Nested Component로 쓸 수 있는 예시 UI

패턴	구성예시
버튼	텍스트 + 아이콘 컴포넌트
카드	이미지 컴포넌트 + 텍스트 + CTA 버튼
탭바	각 탭이 컴포넌트 + 상태별 Variant
댓글 리스트	프로필 이미지 + 닉네임 + 텍스트 컴포넌트

 

 

💡 6. 꿀팁 정리

• 중첩된 컴포넌트를 만들 때는 컴포넌트 명명 규칙을 정리해두면 나중에 관리하기 편해요
  예: btn/icon_left/default
• Variant랑 함께 쓰면 더 강력함!
  → Nested Component + Boolean 속성 + Variant 조합 예제: “아이콘 on/off 버튼”
  
  다음 글에서는 Variant를 활용한 상태 관리 방법을 소개할게요!

 

 

2023.06.14 - [Design/Figma] - [Figma] 컴포넌트 만들기 (실무자용)

[Figma] 컴포넌트 만들기 (실무자용)

2023.04.19 - [Design/Figma] - [Figma] 피그마로 PPT 만들기 PDF로 추출하기, 피그마 입문

[Figma] 피그마로 PPT 만들기 PDF로 추출하기, 피그마 입문

2022.10.03 - [Design/Figma] - [Figma]피그마 프로토타입에서 영상과 Gif 이미지 넣기

[Figma]피그마 프로토타입에서 영상과 Gif 이미지 넣기