Figma 베리언츠(Variants), 왜 나왔을까?

디자인 시스템을 관리하는 것은 쉽지 않다. 특히, 같은 컴포넌트라도 여러 상태와 변형이 필요할 때, 컴포넌트 패널이 난잡해지고 유지보수가 어려워지는 문제가 발생한다. Figma는 이를 해결하기 위해 2020년 11월, 베리언츠(Variants) 기능을 공식적으로 업데이트했다.

 

오늘은 베리언츠가 무엇인지, 왜 등장했는지, 기존 방식과 무엇이 다른지를 정리해보려고 한다.

 

1️⃣ 베리언츠(Variants)란?

베리언츠는 여러 개의 컴포넌트를 하나의 그룹으로 묶고, 속성(Property) 값만 변경할 수 있도록 만든 기능이다.

 

예를 들어, 버튼 컴포넌트가 있다고 가정해 보자.

버튼에는 Primary / Secondary / Error 같은 타입이 있을 수 있고, 각각 Default / Hover / Disabled 같은 상태가 존재할 수 있다.

 

베리언츠를 사용하면, 이 모든 버튼을 하나의 컴포넌트로 관리하고 속성 값만 바꿔 사용할 수 있다.

 

📌 베리언츠 적용 예시

[Button Component]
 ├── Type: Primary, Secondary, Error
 ├── State: Default, Hover, Disabled

 

 

베리언츠 없이 기존 방식대로 만들었다면, 각각을 별도의 컴포넌트로 생성해야 했을 것이다.

예를 들어, btn_primary_hover, btn_secondary_disabled 같은 개별 네이밍을 해야 했다.

 

베리언츠 덕분에 컴포넌트 패널이 훨씬 정리되고 유지보수가 쉬워졌다.

 

2️⃣ Figma는 왜 베리언츠 기능을 만들었을까?

베리언츠 기능이 나오기 전에는, 디자인 시스템을 구성할 때 불필요한 반복 작업이 많았다.

 

📌 기존 방식의 문제점

✅ 버튼, 아이콘 같은 컴포넌트를 각 상태별로 개별 생성해야 했다.

✅ 컴포넌트 패널이 너무 길어져서 원하는 컴포넌트를 찾기 어려웠다.

✅ 디자인 변경이 필요할 때, 각 컴포넌트를 일일이 수정해야 했다.

✅ 개발자가 컴포넌트 네이밍을 해석하고 적용하는 데 불필요한 커뮤니케이션 비용이 들었다.

 

Figma는 이러한 비효율적인 문제를 해결하고 디자인 시스템을 체계적으로 관리할 수 있도록 베리언츠 기능을 도입했다.

 

이제 한 개의 마스터 컴포넌트 안에서 다양한 변형을 속성 값으로 조정할 수 있게 되었다.

 

3️⃣ 베리언츠는 언제 업데이트되었을까?

Figma는 2020년 11월 18일, 베리언츠 기능을 공식적으로 발표했다.

📌 업데이트 요약 (2020.11.18)

🔹 컴포넌트를 그룹화하여 속성 값으로 변형 가능

🔹 컴포넌트 패널 정리 가능 → 관리 효율성 증가

🔹 Figma Dev Mode에서 개발자가 속성 값을 쉽게 확인 가능

 

출시 이후, 대부분의 디자인 시스템에서 필수 기능으로 자리 잡았다.

 

4️⃣ 기존 방식 vs. 베리언츠 방식 비교

🟥 베리언츠 이전 방식 (기존 방식)

btn_primary
btn_primary_hover
btn_primary_disabled
btn_secondary
btn_secondary_disabled
btn_error

✔️ 각 상태를 개별 컴포넌트로 만들어야 했다.

✔️ 컴포넌트가 많아질수록 관리가 어려워졌다.

✔️ 디자인 변경이 필요하면 모든 컴포넌트를 수정해야 했다.

🟩 베리언츠 이후 방식

[Button Component]
 ├── Type: Primary, Secondary, Error
 ├── State: Default, Hover, Disabled

✔️ 하나의 컴포넌트에서 속성 값만 변경하면 됨.

✔️ 컴포넌트 패널이 정리되어 찾기 쉬워짐.

✔️ 디자인 변경 시 한 번만 수정하면 모든 변형에 반영됨.

 

5️⃣ 실무에서 베리언츠가 중요한 이유

베리언츠가 단순히 “컴포넌트를 그룹화하는 기능”이라고 생각할 수도 있다.

그러나 실무에서는 유지보수, 디자인 시스템 관리, 개발자 협업에 매우 중요한 역할을 한다.

 

✅ 디자인 유지보수

• 기존 방식: 버튼 색상 하나 바꾸려면 모든 버튼 컴포넌트를 수정해야 했다.

• 베리언츠 방식: 한 번만 수정하면 모든 변형이 자동 반영된다.

 

✅ 디자인 시스템 관리

• 기존 방식: 컴포넌트가 많아질수록 패널이 복잡해졌다.

• 베리언츠 방식: 컴포넌트 패널이 정리되어 효율적이다.

 

✅ 개발자 협업

• 기존 방식: 개발자에게 btn_primary_hover.png 같은 파일을 넘겨야 했다.

• 베리언츠 방식: 속성 값(Type=Primary, State=Hover)을 넘기면 개발자가 바로 적용할 수 있다.

 

Figma Dev Mode를 활용하면, 개발자는 JSON 형태로 속성 값을 확인하고 CSS 변수로 쉽게 변환할 수 있다.

 

6️⃣ 결론: 베리언츠, 왜 써야 할까?

베리언츠는 단순한 기능이 아니라, 디자인 시스템을 체계적으로 구축하고 유지보수를 쉽게 만들어주는 핵심 기능이다.

 

📌 베리언츠를 쓰면?

✅ 네이밍 직접 안 해도 됨 → 컴포넌트 패널이 깔끔해짐

✅ 버튼 같은 UI 변경 시 한 번만 수정하면 됨 → 유지보수 편함

✅ 개발자가 속성 값만 보고 바로 적용 가능 → 협업이 쉬워짐

 

처음에는 어려워도, 한 번 익숙해지면 베리언츠 없이는 디자인 시스템을 관리하기 어렵다고 느낄 것이다.

 

베리언츠가 처음 등장한 이유도 결국 디자이너와 개발자의 협업을 더 효율적으로 만들기 위해서다.