[UI][Figma] Variants - state 값에 따라 UI 전환하기

UI 프로토타이핑 과정에서는 특정 상호작용에 따라 수시로 UI의 디자인을 변경해야 할 일이 많습니다.

 

대표적인 예로 on/off 토글 버튼이나, 수준(여유-혼잡, 쉬움-어려움 등)을 나타내는 라벨 등이 있습니다.

 

이 경우 같은 frame에 해당 UI만 바꾼 뒤 navigate to로 구현할 수도 있지만, UI가 많아질 수록 생성해야 하는 frame의 수도 굉장히 많아지게 되어 관리가 어렵습니다.

 

Variants는 이렇게 상태값에 따라 달라지는 UI 요소를 관리할 수 있는 Figma의 기능입니다.

Variants 생성

다음과 같이 ON/OFF 토글로 사용할 요소를 만들고 컴포넌트로 지정합니다.

 

해당 컴포넌트를 선택해 Main component > Add Variant 를 해줍니다.

 

혹은 화면 우측 상단 작업창에서 Add variant 아이콘을 바로 실행할 수도 있습니다.

 

그러면 다음과 같이 동일한 UI 요소가 컴포넌트 내에서 복사되어 생성됩니다.

 

Variants 설정

컴포넌트 전체를 선택하면 우측 상단에서 해당 variants의 이름을 변경할 수 있습니다.

 

기본값으로는 property라고 설정됩니다. 여기서는 state라는 이름으로 바꾸어주었습니다.

 

각 variants 요소를 선택하면 상태 이름을 변경할 수 있습니다.

 

기본값으로는 Default라고 설정됩니다. 여기서는 각각 on / off 라고 바꾸어주었습니다.

 

이렇게 이름을 바꾸면 좌측 layer 창에서도 각 요소의 이름이 '[variants 이름]=[상태]'의 형태로 바뀐 것을 볼 수 있습니다.

 

해당 형식의 이름이 아니면 variants가 제대로 동작하지 않기 때문에, 이름을 임의로 수정하면 안됩니다.

 

 

당연히, 상태에 따른 요소의 디자인도 변경해주어야 합니다.

 

Variants 사용

다음과 같이 좌측 Asset 창에서 frame으로서 사용가능합니다.

 

새로 variants를 만들면 우측 상단에 variants의 상태값을 조절할 수 있는 항목이 추가됩니다.

 

상태가 두 가지 뿐일 경우 다음과 같이 토글 형태로 나타납니다.

 

프로토타이핑을 할 때는 컴포넌트 원본 내에서 두 상태에 해당하는 요소 사이에 interaction을 추가하면 됩니다.

 

이렇게 하면, 해당 컴포넌트를 이용해 생성한 모든 요소에 interaction이 적용됩니다.