디자인 시스템 (6) 베리언츠(Variants)의 사용

 

드디어 디자인 시스템 대망의 과정, 베리언츠에 대해서 알아보겠습니다.

베리언츠는 변형체, 변이체라는 말로 '같은 종류으로부터 나와 다른 모습이 된 것'이란 뜻입니다. 

즉, 여러 변형을 갖는 디자인을 만들 때 사용하는 기능이라고 할 수 있습니다.

 

 

 

지금부터 이 베리언츠(Variants)에 대해서 알아보겠습니다.

 

---

1. 베리언츠란?

피그마에서는 베리언츠는 마스터 컴포넌트로 등록된 컴포넌트들의 묶음을 의미합니다.

이때, 베리언츠 속성으로 '상태'를 컨트롤합니다.

크고 녹색인 버튼을 만들어 주세요! 같은 경우라고 할 수 있어요.

 

속성의 개수도 여러 개를 설정할 수 있기 때문에

한 개의 컴포넌트가 여러 '상태(status)'를 가질 때 주로 표현합니다. 

 

---

2-1. 베리언츠 생성하기

이런 베리언츠를 만드려면, 3가지 방법이 있습니다. 

 

첫 번째는 두 개 이상의 마스터 컴포넌트를 선택하면

디자인 패널의 "Combine as variants"라고 씌여진 버튼을 눌러

베리언츠로 등록할 수 있어요.

 

두 번째는 한 개의 마스터 컴포넌트를 클릭하면 상단에 '베리언츠 추가하기(add Variant)'를 실행할 수 있습니다.

이 경우 선택한 컴포넌트와 같은 형태로 복제가 됩니다. 

새로 성성된 컴포넌트는 디자인을 바꿔서 적용해 봅시다.

 

세 번째는 퀵 추가 방식으로, 해당 베리언츠 안의 요소 1개를 선택하면

+ 버튼으로 되어 있는 아이콘으로 베리언츠를 추가할 수 있습니다.

 

단, 베리언츠를 전체 선택하여 복제하는 경우에는 Instance가 생성되지 않고

Master 컴포넌트가 생성될 수 있으니 유의 부탁 드립니다.

 

---

3. 인스턴스 전환 기능과 베리언츠의 차이

그런데 베리언츠와 유사한 기능인 인스턴스 전환 기능이 이미 존재합니다. 

이 둘은 무엇이 다를까요?

 

먼저 인스턴스 전환 기능은 말 그대로 '인스턴스'는 상호간에 전환이 가능하다는 점입니다.

인스턴스 패널로 가면 원하는 컴포넌트를 선택하여 바꿀 수 있습니다.

 

이 경우 마스터 등록 시에 그룹명/개체명으로 네이밍 규칙을 활용하면

그룹으로 처리되어 보다 편리하게 관리할 수 있습니다.

 

반면에 베리언츠는 해당 그룹에 있는 컴포넌트만 전환해 줄 수 있습니다.

폭 넓은 점은 인스턴스 전환 기능이 좋을 수 있지만, 

 

2,3개 이상의 속성을 기준으로 분류를 해야하는 경우에는

베리언츠의 기능이 훨씬 활용도가 높을 것입니다.

 

필요에 따라 선택하여 활용해야 합니다.

---

4. 인스턴스 전환 - 컴포넌트 속성 - 컴포넌트 베리언츠 간의 유기성

지금까지 배운 컴포넌트 등록과정을 모두 활용하여

마스터 컴포넌트 등록, 컴포넌트 프로퍼티 등록, 베리언츠를

모두 등록하여 디자인 시스템을 구성해 보았습니다.

 

이미지처럼 모든 단계를 밟아 놓으면, 일반적인 상태에서는 베리언츠로

더블 클릭으로 하위 레이어를 선택하면 컴포넌트 프로퍼티를 사용할 수도 있고, 

아이콘 간 인스턴스 전환도 손쉽게 가능한 구조로 만들 수 있습니다.

 

반드시 이렇게 작업할 필요가 있는 것은 아니지만, 

활용도를 높이기 위해서는 고려해볼법한 작업이기 때문에

이런 식의 구조체를 만드는 법을 연구해 보시는 것을 권장해 드립니다.

 

---

5. 계층 구조의 이해

 

저는 피그마의 컴포넌트들을 잘 쓰기 위해 위와 같은 구성으로 나눠 두었습니다.

 

마스터 컴포넌트 내부 구조는 인스턴스에서 수정할 수 없기 때문에, 

베리언츠로 해당 요소를 곧바로 지정할 경우

내부 구조를 바꾸기가 어려워지는 문제가 있습니다.

 

그래서 중간 다리로 컴포넌트 프로퍼티를 사용하여 변경이 가능한 다양한 모델을 만들고

해당 조합을 다시 마스터로 등록한 뒤에 베리언츠로 묶어주는 방향으로 주로 사용합니다.

 

인스턴스는 아이콘, 로고와 같은 이미지 자원에 사용하고,

컴포넌트 프로퍼티는 UI 구조에 반영하도록 하며,

베리언츠는 최종 스타일로 나눠 두는 것이

관리 운영적인 측면에서 원활할 거라 생각합니다.

---

자 여기까지, 피그마의 핵심 기능인 베리언츠까지 전부 다뤄 봤습니다.

이제 다음 시간부터는 디자인 시스템과 같이 사용하면 좋을

플러그인 몇 가지에 대해서 준비해 보겠습니다.