Figma에서 언제 Variants가 필요한가?
Variants(베리언츠)는 Figma에서 컴포넌트(Component)의 다양한 상태, 유형, 속성 등을 하나의 묶음으로 관리할 수 있는 기능이다.
컴포넌트가 많아질수록 정리가 어려워지는데, 베리언츠는 이를 정돈된 구조로 통합할 수 있도록 도와준다.
Variant란?
Variants는
"하나의 컴포넌트 세트(Component Set)" 안에 여러 변형(버전)을 담는 기능이다.
예를 들어, 버튼 컴포넌트를 만들 때:
- 기본(Default)
- 마우스 오버(Hover)
- 비활성화(Disabled)
- 아이콘 포함(With icon)
이런 다양한 상태나 종류를 따로따로 만들지 않고,
하나의 컴포넌트 세트 안에 속성(property)으로 묶어 관리할 수 있다.
구조 개념
| Button | Type | Primary / Secondary |
| State | Default / Hover / Disabled | |
| Icon | True / False |
이렇게 속성과 값이 조합되어 다양한 상태의 버튼이 만들어진다.
예시: 버튼 Variants
| Primary | Default | False | 기본 파란 버튼 |
| Primary | Hover | False | 마우스 오버된 파란 버튼 |
| Primary | Disabled | False | 비활성화된 파란 버튼 |
| Secondary | Default | True | 아이콘 있는 회색 버튼 |
→ 모두 하나의 Button 컴포넌트 세트로 관리 가능
언제 Variants가 필요한가?
1. 컴포넌트가 "상태"를 가질 때
| 버튼 | 기본(Default), 호버(Hover), 클릭(Active), 비활성(Disabled) |
| 토글 스위치 | 켜짐(On), 꺼짐(Off), Disabled 상태 |
| 체크박스 | 선택됨(Checked), 선택 안 됨(Unchecked), Disabled 상태 |
💡 Variants로 묶으면 하나의 세트로 관리 가능
→ 버튼 인스턴스를 쓰고 State 속성만 바꾸면 됨
2. "옵션"이 다양할 때
| 버튼 | 색상(Primary, Secondary), 크기(Small, Medium, Large) |
| 카드 컴포넌트 | 아이콘 있음/없음, 그림자 있음/없음 |
| 배지(Badge) 컴포넌트 | 타입(Success, Warning, Error), 사이즈 |
💡 속성(Property)을 조합해서 중복 없이 유연하게 재사용 가능
3. 동일한 컴포넌트가 화면/제품별로 약간씩 다를 때
| 입력창(Input) | 데스크탑용, 모바일용 너비 차이 |
| 네비게이션 탭(Tab) | 아이콘만 있는 버전, 텍스트+아이콘 버전 |
💡 Variants로 정리하면 디자인 변경 시에도 한 번에 관리 가능
4. 프러덕션 코드와 연동을 고려할 때
개발자와 협업할 때,
컴포넌트의 속성이 실제 코드와 1:1 매핑되면 매우 효율적이다.
| Type: Primary | <Button type="primary" /> |
| State: Disabled | <Button disabled /> |
💡 Variants는 개발과 디자인 간 공통 언어 역할을 한다.
5. 디자인 시스템이 점점 커질 때
- 버튼, 카드, 토글 등 수십 개 컴포넌트를 계속 개별로 만들면 → 관리 지옥 😨
- Variants로 묶으면 → 일관성 있는 구성 + 버전 관리 용이
🧩 정리: 이런 경우라면 Variants를 써라!
| 다양한 상태(hover, disabled 등)가 있을 때 | ✅ 꼭 사용하라 |
| 같은 구조인데 옵션(색상, 크기 등)만 다를 때 | ✅ 꼭 사용하라 |
| 다른 페이지에 따라 조금씩 다르게 보여야 할 때 | ✅ 사용 추천 |
| 일회성 디자인, 단독 UI 구성일 때 | ❌ 굳이 필요 없음 |
어떻게 만드는가?
- 여러 개의 컴포넌트를 선택
- Combine as Variants 클릭 (Shift + ⌥ + K 단축키)
- 오른쪽 패널에서 속성 추가 (Type, State, Size 등)
- 원하는 속성 값을 각 Variant에 부여
1단계: 기본 컴포넌트 여러 개 만들기
우선 서로 다른 상태나 유형의 컴포넌트를 만든다.
예: 버튼 3가지
- Primary 버튼
- Secondary 버튼
- Disabled 버튼
이들은 각각 따로 디자인된 Frame이어야 하며, 모두 Component로 만들어야 한다.
선택 후 ⌘ + ⌥ + K (Command + Option + K) 를 눌러 Component로 변환한다.
2단계: Variants로 묶기 (Combine as Variants)
모든 Component를 Shift로 다중 선택한 후,
우측 패널 또는 툴바에서
👉 “Combine as Variants” 클릭
단축키: Shift + Option + K
이제 이 컴포넌트들이 하나의 Component Set으로 묶인다.
3단계: 속성(Property) 지정하기
이제 오른쪽 속성 패널에 다음과 같은 필드를 설정할 수 있다:
예를 들어,
| Type | Primary / Secondary |
| State | Default / Hover / Disabled |
- 오른쪽 패널에서 “Property 1”이라고 보이는 필드를 클릭
- Type으로 이름 변경 → 각 컴포넌트에 Type 값을 넣어줌
- 속성이 여러 개 필요하다면 ➕ 버튼으로 Property 추가
각 컴포넌트마다 어떤 조합인지 명확하게 표시되면 성공!
4단계: 사용자가 쉽게 속성 변경할 수 있도록 만들기
이제 이 Variant Set은 디자인할 때 다음처럼 사용 가능:
- 인스턴스를 캔버스에 배치
- 오른쪽 속성 패널에서 Type, State 등의 드롭다운으로 상태 변경
사용 시 장점
| 컴포넌트 관리 용이 | 유사한 컴포넌트를 하나로 묶어 복잡성 감소 |
| 프러덕션 코드와 연결 용이 | 속성 기반으로 토큰화 → 개발 연동 쉬움 |
| Smart Instance 사용 가능 | 속성만 바꿔 다른 상태로 전환 가능 |
| 디자인 일관성 유지 | 실수로 다른 스타일 만들 일 없음 |