피그마 핵심2) 컴포넌트 프로퍼티 Variant (베리언트) 추가방법

안녕하세요. 지난 포스팅에선 컴포넌트는 무엇인지 컴포넌트는 어떻게 만드는지 알아보았습니다. 컴포넌트를 만들기만 해도 활용도가 높지만 컴포넌트의 속성을 추가하고 잘 활용하면 작업의 속도뿐만 아니라 시스템으로도 더욱 강화됩니다. 지금부터 컴포넌트 속성에 대해 알아보겠습니다.
 
Property(프로퍼티) = 속성 = 컴포넌트 자체속성
Variants(베리언츠) = 변형 = 단일 컴포넌트에서 파생된 다양한 컴포넌트를 세트로 묶어서 관리
 
컴포넌트 자체가 가지고 있는 속성을 프로퍼티라고 합니다.

베리언트는 한 개의 컴포넌트를 (상태, 색상, 크기... 등) 필요에 의해 다양한 컴포넌트로 변형 만들고 세트로 묶어서 관리하는 것을 말합니다.
 
프로퍼티는 현재 총 4가지가 있습니다.
1. Variant (베리언트) : 컴포넌트의 여러 상태에 따른 종류, 여러 컴포넌트를 세트로 묶음
2. Boolean (불리언) : Ture(참)과 False(거짓) 이렇게 2가지 옵션으로 객체를 보이게 또는 가리게 할 수 있습니다.
3. Instance swap (인스턴스 스와이프) : 인스턴스끼리 교체
4. Text (텍스트) : 텍스트 직접 선택하지 않고 디자인패널에서 바로 수정 및 한꺼번에 수정
 
컴포넌트 프로퍼티 추가 방법을 버튼을 통해서 설명하겠습니다.
 
첫 번째, 복잡한 변형(variant) : 컴포넌트 세트
베리언트는 컴포넌트에 원하는 Type (Primary, Secondary), State (Default, Hover, 등), Size(Large, Medium, Small)... 등 원하는 1. 속성을 추가  2. 속성 이름 지정  3. 값 이름 지정 순서로 만들 수 있습니다.
 
방법 1) 이미 만들어진 여러 컴포넌트를 선택 후 디자인패널에서 Combine as Variants 버튼 클릭 묶는다.
 
TIP. 컴포넌트 네이밍을 할 때 슬래시( / )로 명칭구분을 하면 베리언트로 묶었을 때 한 번에 이름과 속성 지정가능
예를 들어 button/primary, button/secondary라고 이름을 미리 지정하면 베리언트로 묶었을 때 button이라는 컴포넌트 세트가 생성되고 그 안에 primary와 secondary라는 이름으로 버튼이 구분됩니다.

< 여러 컴포넌트 선택 후 Combine as variants 클릭 >

 

---

 
방법 2) 아직 컴포넌트로 만들어지지 않은 개별 객체를 한 개 이상 선택 후 컴포넌트 세트(Component set)로 만든다. 여러 객체를 선택하면 맨 위에 툴바에 컴포넌트 아이콘 옆에 뜨는 dropdown icon을 누르고 Create component set 클릭

< 여러 객체 선택 후 컴포넌트 세트로 한 번에 묶기 >

---

 
방법 3) 단일 컴포넌트를 선택 후 툴바의 Add variant 아이콘을 누르거나 우클릭 > Main component > Add variant 클릭

< 단일 컴포넌트 바로 베리언트 추가 >

 

---

 
방법 4) 단일 컴포넌트 선택  디자인패널 Properties + 클릭 >  Variant 클릭 > 베리언트를 만든 후 Add variant 클릭

< 단일 컴포넌트 디자인패널에서 베리언트 추가 >

 

---

< Properties에 property1이라고 되어있는 부분을 더블클릭 이름 수정>

 
컴포넌트 세트로 만들어지면 이미지에서 보이듯이 레이어 앞에 색상이 채워진 다이아몬드 모양의 심볼이 나타납니다. 베리언트 된 컴포넌트로 보시면 됩니다. 이때 속성이름을 지정 안 하면 우측 디자인패널에서 Property 1, Property 2.. 이런 식으로 나와서 어떤 속성인지 쉽게 구분하기 어렵습니다. 따라서 반드시 베리언트를 하고 나면 속성이름을 지정해 주세요. 저는 색으로 구분했기 때문에 Property 1에 더블클릭해서 color로 이름을 변경하였습니다.

---

위 설명으로 이해가 안 되시는 분들을 위해 영상 올렸습니다. 참고해 주세요. 
 
 

 
 

지금까지 4가지 방법으로 베리언트 추가하는 방법을 확인할 수 있습니다. 다음 포스팅에서는 나머지 속성 추가방법 알아보겠습니다.

Property > Boolean 추가 방법
Property > Instance swap 추가 방법
Property > Text 추가 방법