Variants란?

Variants는 하나의 컴포넌트 안에서 여러 상태를 관리하는 기능입니다.

예를 들어 버튼 UI에는 다양한 상태가 존재합니다.

Default
Hover
Disabled

또는 버튼 스타일에 따라

Primary
Secondary
Outline

이러한 상태와 스타일을 각각 따로 컴포넌트로 만드는 대신
하나의 Component 안에서 관리할 수 있도록 만든 기능이 Variants입니다.

주요 포인트 Top3

01. Variants가 필요한 이유

UI에는 다양한 상태가 존재합니다.

예를 들어 버튼 UI를 보면

Primary Button - 기본 버튼
Secondary Button - 두번째 버튼
Hover Button - hover했을때
Disabled Button - 비활성화

이처럼 여러 형태의 버튼이 존재합니다.

Variants를 사용하면
이 모든 상태를 하나의 컴포넌트 안에서 관리할 수 있습니다.

02. Variants 구조

Variants는 보통 속성(Property)과 값(Value) 구조로 구성됩니다.

예를 들어 버튼 컴포넌트라면

Type

• Primary
• Secondary
• Outline

State

• Default
• Hover
• Disabled

이처럼 컴포넌트의 상태나 스타일을 속성(Property) 기준으로 관리할 수 있습니다.

03. Variants 만드는 방법

피그마에서 Variants를 만드는 방법은 다음과 같습니다.

1️⃣ 먼저 Component를 여러 개 준비합니다

예를 들어 버튼 상태를 만든다고 가정하면

Button Default
Button Hover
Button Disabled

이처럼 각 상태별로 Component를 먼저 만들어야 합니다.

2️⃣ 여러 Component를 동시에 선택합니다

Variants로 묶을 Component들을
Shift를 누른 상태에서 모두 선택합니다.

3️⃣ Combine as Variants 클릭

선택된 Component에서

Combine as Variants

버튼을 클릭하면
여러 Component가 하나의 Variants 그룹으로 묶입니다.

4️⃣ Property 설정

Variants로 묶이면
Property를 설정할 수 있습니다.

이처럼 컴포넌트 상태를 속성(Property) 기준으로 관리할 수 있습니다.

04. Variants 이름 규칙

Variants는 일반 레이어 이름과 달리
특정한 네이밍 규칙을 사용합니다.
Variant 이름은 반드시 다음 형식을 사용합니다.

Property=Value

또는 여러 속성이 있을 경우

Property=Value, Property=Value

예를 들어 버튼 컴포넌트라면 다음과 같은 구조가 됩니다.

Type=Primary, State=Default
Type=Primary, State=Hover
Type=Primary, State=Disabled

Type=Outline, State=Default
Type=Outline, State=Hover
Type=Outline, State=Disabled

이처럼 속성과 값을 기준으로 Variants를 구성하면
피그마에서 컴포넌트 상태를 선택할 수 있는 구조가 자동으로 생성됩니다.

GOYO.’s Tip

Variants를 사용할 때는 속성과 상태를 기준으로 구조를 먼저 설계하는 것이 중요합니다.
예를 들어 버튼 컴포넌트라면 Type, State와 같은 기준을 먼저 정한 뒤 Variants를 구성하면
컴포넌트 관리가 훨씬 쉬워집니다.

마무리

이번 글에서는 피그마에서 컴포넌트의 다양한 상태를 관리할 수 있는
Variants 기능과 네이밍 규칙을 정리했습니다.

Variants를 활용하면 UI 상태를 체계적으로 관리하고
디자인 시스템을 보다 효율적으로 구축할 수 있습니다.