[Figma] Component & Variants

Component

컴포넌트는 재사용 가능한 디자인 요소로, 버튼, 아이콘, 헤더 등 반복적으로 사용되는 UI 요소를 의미합니다. 컴포넌트를 사용하면 디자인 일관성을 유지하고, 작업 시간을 절약할 수 있습니다.

컴포넌트 생성 방법:

1. 객체 선택: 디자인 캔버스에서 컴포넌트로 만들고자 하는 객체를 선택합니다.
2. 컴포넌트 아이콘 클릭: 상단 중앙의 컴포넌트 아이콘을 클릭하거나 단축키를 사용합니다. (Windows: Ctrl + Alt + K, Mac: Cmd + Option + K)
3. 컴포넌트 생성: 선택한 객체가 컴포넌트로 변환됩니다.

컴포넌트 사용 방법:

- Assets 패널: 피그마의 좌측 패널에서 Assets 탭을 클릭하여 컴포넌트를 찾고, 드래그 앤 드롭으로 디자인에 배치합니다.
- Resource 툴: 툴바의 Resource(단축키: Shift + I)를 사용하여 컴포넌트를 선택하고 캔버스에 배치합니다.

컴포넌트와 인스턴스의 관계:

- 마스터 컴포넌트: 원본 컴포넌트로, 이 컴포넌트를 수정하면 모든 인스턴스가 자동으로 업데이트됩니다.
- 인스턴스: 마스터 컴포넌트의 복사본으로, 개별적으로 수정할 수 있지만, 마스터 컴포넌트와의 연결을 해제하면 독립적인 객체가 됩니다.

 

 

Variants

베리언트는 동일한 컴포넌트의 여러 가지 변형을 하나의 세트로 묶어 관리하는 기능입니다. 예를 들어, 버튼의 다양한 상태(기본, 호버, 활성화, 비활성화 등)나 크기(대, 중, 소)를 베리언트로 관리할 수 있습니다.

베리언트 생성 방법:

1. 컴포넌트 선택: 베리언트로 관리할 컴포넌트를 선택합니다.
2. Add Variant 클릭: 오른쪽 속성 패널에서 'Add Variant' 버튼을 클릭하여 첫 번째 변형을 추가합니다.
3. 속성 정의: 각 변형마다 속성을 설정합니다. 예를 들어, State(상태), Size(크기), Color(색상) 등의 속성을 지정할 수 있습니다.

베리언트 속성 유형:

- Variant: 다양한 스타일이나 상태를 나타내는 속성
- Boolean: True/False 두 가지 옵션으로 객체를 보이거나 숨김
- Instance swap: 컴포넌트 인스턴스 교체
- Text: 텍스트 내용 변경

베리언트 사용 방법:

- 인스턴스 사용: 생성한 베리언트의 인스턴스를 필요에 따라 끌어다 놓고, 원하는 속성 조합으로 조정할 수 있습니다.
- 속성 변경: 인스턴스의 속성 패널에서 베리언트의 속성을 변경하여 원하는 변형을 선택합니다.

베리언트의 장점:

- 디자인 일관성 유지: 동일한 컴포넌트의 다양한 상태를 체계적으로 관리
- 재사용성 향상: 반복 작업 감소
- 프로토타이핑 속도 증가: 다양한 상태를 쉽게 변경 가능
- 에셋 패널에서의 간편한 탐색: 필요한 컴포넌트를 빠르게 찾을 수 있음

 

 

결론

피그마의 컴포넌트와 베리언트 기능은 디자인 시스템을 체계적으로 관리하고, 작업 효율성을 높이는 데 큰 도움이 됩니다. 컴포넌트를 통해 반복적인 작업을 줄이고, 베리언트를 통해 다양한 상태를 효과적으로 관리할 수 있습니다. 이 두 가지 기능을 잘 활용하면 디자인 작업의 생산성을 크게 향상시킬 수 있습니다. 

 

 

더 알아보기 : https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants