DAY 05 ㅣ 피그마 기초 / 부모 컴포넌트 & 자식 컴포넌트 / Combine Variants

📌 Figma 부모 컴포넌트 & 자식 컴포넌트 개념 정리

1. 부모 컴포넌트 vs. 자식 컴포넌트 아이콘 차이

• 부모 컴포넌트: 컴포넌트의 원본(마스터) 역할을 하며, 수정하면 모든 자식 컴포넌트에 변경이 적용됨.
  • 아이콘: 원형 다이아몬드
• 자식 컴포넌트: 부모 컴포넌트를 인스턴스로 가져온 것으로, 부모의 스타일과 속성을 상속하지만, 일부 속성을 개별적으로 변경 가능.
  • 아이콘: 속이 빈 다이아몬드

 

2. 실무 활용 팁

✅ 디자인 시스템에서 일관성 유지

• 버튼, 카드, 입력 필드 같은 UI 요소를 부모 컴포넌트로 만들어 관리하면 일관성을 유지할 수 있음.

✅ 작업 효율성 향상

• 부모 컴포넌트 하나만 수정해도 모든 자식 컴포넌트가 업데이트되므로, 디자인 수정 시간을 줄일 수 있음.

✅ 오버라이드 기능 활용

• 자식 컴포넌트에서 텍스트, 색상, 아이콘만 변경하면 커스터마이징이 가능하므로, 같은 레이아웃의 다양한 변형을 쉽게 적용할 수 있음.

✅ 컴포넌트 재사용 최적화

• 반복적으로 사용되는 UI 요소를 컴포넌트로 만들어 관리하면 디자인 시스템을 더욱 체계적으로 운영할 수 있음.

 

3. Figma에서 부모 & 자식 컴포넌트 사용 방법

(1) 부모 컴포넌트 생성 방법

1. Figma에서 새 프레임(Frame) 또는 원하는 UI 요소를 디자인함.
2. 선택한 요소를 우클릭 → Create Component(컴포넌트 만들기) 선택.
3. 생성된 컴포넌트는 레이어 패널에서 원형 다이아몬드 아이콘으로 표시됨.

(2) 자식 컴포넌트(인스턴스) 만들기

1. 부모 컴포넌트를 선택하고 Option(Alt) + 드래그하여 복사하면 자식 컴포넌트가 생성됨.
2. 생성된 인스턴스는 속이 빈 다이아몬드 아이콘으로 표시됨.
3. 필요하면 텍스트, 색상 등을 개별적으로 변경하여 사용할 수 있음.

 

4. 컴바인 베리언츠(Combine Variants) 사용 방법

(1) 개념

• 여러 개의 유사한 컴포넌트를 하나의 Variants(변형) 그룹으로 결합하여, 속성(Property) 값만 변경하면 다양한 변형을 쉽게 적용할 수 있음.

(2) 사용 방법

1. 여러 개의 컴포넌트 선택 → 우클릭 → Combine as Variants(베리언츠로 결합) 클릭.
2. 오른쪽 패널에서 Properties를 설정하여 각 변형에 대한 옵션을 정의함 (예: Size, Color, State 등).
3. 자식 컴포넌트를 만들면 오른쪽 속성 패널에서 Variants 옵션을 변경할 수 있음.

✅ 활용 예시

• 버튼(Primary, Secondary, Disabled) 변형 관리
• 아이콘 컬러 변경
• 카드 UI에서 텍스트 정렬 방식(왼쪽, 가운데, 오른쪽) 변경

 

5. 레스토어 컴포넌트(Restore Component) 기능 활용

(1) 개념

• 부모 컴포넌트에서 변경된 내용을 자식 컴포넌트가 원래대로 복원할 수 있는 기능.

(2) 사용 방법

1. 자식 컴포넌트에서 이미지를 변경하거나 다른 속성을 수정함.
2. 변경된 자식 컴포넌트를 우클릭 → Restore Default Property(기본 속성 복원) 클릭.
3. 부모 컴포넌트의 원래 상태로 복구됨.

✅ 활용 예시

• 디자인 시안 검토 중 원본 상태로 되돌릴 때 유용함.
• 실수로 변경한 속성을 복원할 때 사용 가능함.

 

6. 레스토어 컴포넌트 기능을 활용한 이미지 변경 예제

(1) 기존 이미지 변경

1. 자식 컴포넌트에서 이미지가 포함된 Frame을 선택.
2. 오른쪽 속성 패널에서 Fill 클릭 후 원하는 이미지로 변경.

(2) 원래 이미지 복원

1. 변경된 자식 컴포넌트를 선택.
2. 우클릭 → Restore Default Property 클릭.
3. 부모 컴포넌트의 원본 이미지로 복구됨.

 

🎯 정리

부모 컴포넌트	원본 컴포넌트, 모든 인스턴스에 영향	디자인 시스템 구축
자식 컴포넌트	부모 컴포넌트의 인스턴스, 일부 속성 변경 가능	UI 요소 변형 관리
컴바인 베리언츠	여러 컴포넌트를 하나의 Variants 그룹으로 결합	버튼 상태 관리, 아이콘 색상 변경
레스토어 컴포넌트	부모 컴포넌트의 원본 상태로 복원	실수로 변경한 디자인 복구