베리언트 — 하나의 컴포넌트로 모든 상태 관리

Variant가 필요한 이유

버튼 하나에도 Primary, Secondary, Danger 세 가지 타입이 있고, 각 타입마다 Default, Hover, Pressed, Disabled 네 가지 상태가 있습니다. Variant 없이는 12개의 별도 컴포넌트를 관리해야 합니다. Variant를 쓰면 이 모두를 하나의 컴포넌트 세트로 통합할 수 있습니다.

Variant는 같은 컴포넌트의 "버전 모음"입니다. Instance를 배치한 뒤 패널에서 드롭다운 하나로 타입과 상태를 전환할 수 있어 디자인 작업 속도가 크게 높아집니다.

Variant 기본 구조

Component Set: 외곽선이 보라색 점선인 큰 컨테이너
  Variant 1: Type=Primary, State=Default
  Variant 2: Type=Primary, State=Hover
  Variant 3: Type=Secondary, State=Default
  Variant 4: Type=Secondary, State=Hover
  ...

Variant Property:
이름: "Type"     값: Primary / Secondary / Danger
이름: "State"    값: Default / Hover / Pressed / Disabled
이름: "Size"     값: Small / Medium / Large (선택적)

Variant 생성 순서

Step 1: 첫 번째 컴포넌트 완성
버튼 컴포넌트 완성 (7강에서 만든 Button/Primary)

Step 2: Variant 추가
Main Component 선택 → 오른쪽 패널 "Add Variant" 클릭
또는 Main Component 선택 → Ctrl+Alt+K (이미 컴포넌트) → 패널에서 Add Variant

Step 3: Variant Property 정의
Component Set 선택 → 오른쪽 패널 Properties "+" → Variant
이름: "Type", 값: Primary, Secondary, Danger (쉼표로 구분 입력)

Step 4: State Property 추가
Properties "+" → Variant
이름: "State", 값: Default, Hover, Pressed, Disabled

Step 5: 각 Variant 스타일 설정
Component Set 내 각 칸 선택 → 해당 Type/State에 맞게 색상, 불투명도 등 수정

각 State 디자인 가이드

State	시각적 변화	용도
Default	기본 상태	아무 인터랙션 없을 때
Hover	색상 10~15% 어둡게 또는 밝게	마우스를 올렸을 때
Pressed	색상 20% 어둡게 + scale 97%	클릭하는 순간
Disabled	Opacity 40% + cursor:not-allowed	비활성화 상태
Loading	텍스트 숨김 + 스피너 아이콘	비동기 처리 중

Primary 컬러별 State 계산:
Default:  #6366f1 (원본)
Hover:    #4f46e5 (채도+명도 낮춤)
Pressed:  #4338ca (더 어둡게)
Disabled: #6366f1 + Opacity 40%

Secondary 버튼 State:
Default:  투명 배경, #6366f1 테두리
Hover:    #eef2ff 배경 (브랜드 컬러 5% 불투명)
Pressed:  #e0e7ff 배경
Disabled: 전체 Opacity 40%

Interactive Components (인터랙티브 컴포넌트)

프로토타입 없이 Figma 미리보기 안에서 Hover, Click 상태 전환 가능

설정 방법:
Main Component 선택 → Prototype 탭
"+" 클릭 → Trigger: While Hovering
→ Action: Change To → Hover Variant 선택

사용법:
Presentation Mode(Ctrl+Alt+Enter) 또는
Preview(Ctrl+P)에서 실제 Hover 효과 확인 가능

주의:
Interactive Components는 프로토타입 화면에서만 동작
실제 개발 구현과는 별개 — 팀 커뮤니케이션 용도

실습 — 3 Type x 4 State 버튼 시스템

Step 1: 기반 컴포넌트 준비
7강에서 만든 Button/Primary를 활용
또는 새로 생성: 텍스트 "버튼" → Shift+A → Padding 12/24 → Ctrl+Alt+K

Step 2: Variant Property 2개 추가
Type: Primary, Secondary, Danger
State: Default, Hover, Pressed, Disabled

Step 3: 3x4 = 12개 Variant 스타일링
Primary/Default:  Fill #6366f1
Primary/Hover:    Fill #4f46e5
Primary/Pressed:  Fill #4338ca
Primary/Disabled: Fill #6366f1, Opacity 40%

Secondary/Default:  Fill none, Stroke #6366f1
Secondary/Hover:    Fill #eef2ff, Stroke #6366f1
Secondary/Pressed:  Fill #e0e7ff, Stroke #4f46e5
Secondary/Disabled: Opacity 40%

Danger/Default:  Fill #ef4444
Danger/Hover:    Fill #dc2626
Danger/Pressed:  Fill #b91c1c
Danger/Disabled: Fill #ef4444, Opacity 40%

Step 4: Instance 배치 및 검증
Assets 패널에서 버튼 컴포넌트 드래그
오른쪽 패널에서 Type, State 드롭다운 전환 확인
Primary → Danger 전환 시 즉시 스타일 교체 확인

관련 검색어  ·  피그마 베리언트, Figma Variants, 피그마 컴포넌트 상태, 피그마 Interactive Components, 피그마 버튼 시스템, 피그마 디자인 시스템, Figma Variant Property