Variants로 디자인과 코드의 (새 탭에서 열림)
Figma의 Variants는 하나의 컴포넌트에 존재하는 여러 변형을 하나의 컴포넌트 세트로 묶어 디자인 시스템과 코드의 구조를 가깝게 연결한다. 디자이너는 관련 변형을 쉽게 탐색·관리하고, 개발자는 상태·스타일·크기 같은 속성을 코드의 컴포넌트처럼 이해할 수 있다. Figma는 사용자 관찰과 6주간 4차례의 사용성 테스트를 통해 기능 구조와 UI, 명칭을 다듬었다.
디자인과 코드의 사고방식 맞추기
- 개발은 재사용성과 확장성을 중시하고, 디자인은 자유로운 반복과 탐색을 중시한다.
- 기존 Figma 컴포넌트는 관련 변형을 찾거나 전환하기 어려웠고, 인스턴스 교체 메뉴가 지나치게 복잡해지는 문제가 있었다.
- 디자인 시스템이 커지면서 팀들은
default/primary/large/icon같은 슬래시 기반 이름 규칙을 사용해 상태와 속성을 표현했다. - Variants는 이를
state="hover",style="secondary"처럼 속성명:값 구조로 발전시킨다. - 상태뿐 아니라
type,color,size등 여러 차원의 속성을 지원해 코드의 컴포넌트 모델과 더 유사하게 구성할 수 있다.
변형을 한곳에 모으는 컴포넌트 세트
- Figma는 디자인 시스템 관리자가 변형들을 그리드에 배치하고 나란히 비교한다는 점을 관찰했다.
- 이에 따라 하나의 컴포넌트에 속한 여러 Variants를 캔버스에 side-by-side로 배치할 수 있도록 설계했다.
- 이 방식은 다음 작업에 유용하다.
- 변형 간 시각적 비교
- 디자인 반복 작업
- 라이브러리 유지보수
- 전체 디자인 시스템 구조 파악
- 기존 컴포넌트 변형들을 모두 선택한 뒤 Combine Variants를 클릭하면 하나의 컴포넌트 세트로 쉽게 전환할 수 있다.
사용성 테스트로 다듬은 UI
- Figma는 작동하는 프로토타입을 제작하고 6주 동안 네 차례 사용성 테스트를 진행했다.
- 초기 UI는 모든 속성값을 pill 형태로 표시했다.
- 하지만 pill은 일반적으로 여러 태그를 동시에 표시하는 요소로 인식되기 때문에, 사용자는 특정 변형의 속성을 조정하는 UI로 이해하기 어려워했다.
- 최종적으로는 다음과 같이 변경했다.
- 특정 Variant를 선택했을 때는 각 속성을 간단한 입력 필드와 드롭다운으로 표시
- 전체 컴포넌트 세트의 속성과 값을 한눈에 볼 때는 pill UI 유지
- 기본 속성명도
State,Style처럼 미리 정해진 용어보다Property 1,Property 2를 사용했다. - 사용자가 이를
Type,Size등 자신의 디자인 시스템에 맞는 이름으로 직접 커스터마이즈하도록 한 것이다.
기능 이름을 ‘States’에서 ‘Variants’로 변경
- 초기에는 주요 사용 사례가 버튼의 hover, active, disabled 같은 인터랙션 상태였기 때문에 기능명을 States로 정했다.
- 그러나 사용자들은 이 이름이 기능을 상태 관리에만 한정하는 것처럼 보인다고 지적했다.
- Variants는 상태뿐 아니라 색상, 크기, 유형 등 다양한 속성 조합을 표현할 수 있다.
- Fidelity Investments의 피드백을 계기로 기능의 전체 범위를 더 잘 드러내는 Variants라는 이름을 채택했다.
- 이후 사용성 테스트에서도 Variants가 기능의 목적과 확장성을 더 직관적으로 전달하는 것으로 검증됐다.
디자인-개발 협업을 위한 확장
- Variants는 컴포넌트의 구조를 코드와 유사하게 만들어 디자이너와 개발자가 같은 개념으로 대화하도록 돕는다.
- Auto Layout 업데이트와 Inspect 패널 개선도 함께 제공되어 디자인을 구현으로 전달하는 과정이 간결해진다.
- 단순한 상태 관리부터 여러 속성을 조합한 복잡한 디자인 시스템까지 동일한 방식으로 관리할 수 있다.
실무에서는 버튼, 입력창, 카드처럼 상태·크기·스타일 변형이 많은 컴포넌트부터 Variants로 통합하는 것이 효과적이다. 속성명은 팀의 코드 규칙과 일치시키고, 변형을 체계적인 속성-값 조합으로 정의하면 디자인 시스템 유지보수와 개발 협업을 모두 개선할 수 있다.