피그마 컴포넌트 심화2 (variants)

**모든 내용은 피그마튜터 강의를 듣고 혼자서 복습 한 것입니다 ! 유튜브에 '피튜브' 추천해요.

이번부터는 업데이트된 UI를 사용하겠습니다!

 

베리언트 (Variants)

흔히 '변수'라고 부른다.

스타일이나 속성이 서로 다른 컴포넌트들을 말한다.

컴포넌트를 해야만 사용할 수 있다.

3개의 변수

완성된 베리언트를 먼저 보고 시작하는게 좋을 것 같다.

위 캡쳐는 바탕색이 서로 다른 (색깔이라는 속성이 다름) 컴포넌트들이 한되 묶여있는 것을 볼 수 있다.

 

 

인스턴스로 간편하게 white, grey, black 색상을 변경할 수 있는 것이다.

 

 

Variants를 만드는 방법

두가지로 나뉘는데, 일반 객체일 때와 마스터 컴포넌트 일 때로 나뉜다.

 

1. 일반 객체일 때

2개이상의 객체를 선택하고 Command+Option+k 를 누른다.

혹은 Create component set 클릭해도 된다.

 

그러면 이렇게 2개의 Variants 가 생긴다.

 

 

2. 마스터 컴포넌트일 때

1) 마스터 컴포넌트가 1개일 때

Add variants(=핑크색 사각형)을 누른다.

 

2) 마스터 컴포넌트가 여러개일 때

컴포넌트 4개를 드래그하고 Combine as variants 를 누른다.

이렇게 하면 간단하게 Variants 를 만들 수 있다.

 

 

베리언트는 다양한 프로퍼티와 밸류값으로 여러개의 조건을 만들 수 있다.

 

프로퍼티(=속성)를 추가해서 각각 배경색상과 피튜종류로 카테고리명을 정해주었다.

그리고 배경색상 프로퍼티에는 off,on 으로 각각의 밸류값에 고유이름을 지정해주었고,

마찬가지로 피튜종류 프로퍼티에도 어머나, 똘똘, 안경 으로 각각의 밸류값에 고유이름을 정해주었다.

 

총 2개의 프로퍼티가 생긴 셈이다.

필요한 인스턴스를 꺼내어 오른쪽 패널에서 배경색상을 on, off 할 수 있고, 원하는 아이콘도 선택할 수 있다 !