Note
이 문서에서는 컴포넌트와 연계하여 Component-Set가 무엇인지, 구성하는 이유와 사용 예시를 설명합니다.
- **컴포넌트 집합(Component Set)**은 **여러 개의 유사한 컴포넌트(버튼, 토글 등)**를 하나의 그룹으로 묶어 관리할 수 있는 기능입니다.
- Figma에서는 이 기능을 **Variants(변형)**라고도 부릅니다.
- 예를 들어, 하나의 버튼 컴포넌트에 "기본 상태(Default)", "마우스 오버(Hover)", "비활성화(Disabled)" 등의 다양한 상태를 속성 기반으로 관리할 수 있게 됩니다.
| 필요성 | 설명 |
|---|---|
| 상태 관리 통합 | 다양한 상태(기본/활성/비활성 등)를 하나의 컴포넌트로 관리 가능 |
| 디자인 일관성 | 동일한 구성/위계/스타일을 유지하면서 상태만 변경 |
| 개발 연동 용이 | 개발자에게 상태 간 차이를 명확히 전달 가능 (속성 기반 전달) |
| 작업 속도 향상 | 반복된 컴포넌트 대신 속성만 바꿔 다양한 UI 빠르게 생성 가능 |
- 여러 개의 컴포넌트를 선택합니다.
(예: 버튼 Default / Hover / Disabled 상태 컴포넌트 각각) - 우클릭 >
Combine as Variants선택 - 자동으로
Component Set으로 묶이며, 우측 속성에서 속성 이름과 값을 설정할 수 있습니다.
(예:Property: 상태 / Value: Default, Hover, Disabled)
Tip
이후 인스턴스를 드래그한 후, 오른쪽 속성에서 상태를 선택해 변경할 수 있습니다.
| 상태 | 설명 |
|---|---|
| Default | 기본 버튼 상태 |
| Hover | 마우스 올렸을 때 상태 |
| Disabled | 비활성화된 버튼 |
| 상태 | 설명 |
|---|---|
| On | 켜진 상태 |
| Off | 꺼진 상태 |
| Hover-On | 마우스 올린 켜진 상태 |
| 상태 | 설명 |
|---|---|
| Checked | 선택됨 |
| Unchecked | 선택되지 않음 |
| Disabled | 비활성화 상태 |
| 용어 | 설명 |
|---|---|
| Component | 반복되는 디자인 요소의 원본 |
| Instance | Component를 복제한 개별 요소 |
| Variant | Component의 여러 상태를 하나로 묶은 집합 |
| Component Set | Variant들이 모인 그룹 (Figma에선 Variants 패널로 표시됨) |
Tip
하나의 컴포넌트에 다양한 상태를 통합하는 것은 디자인 효율성과 개발자와의 협업에서 매우 중요합니다.