피그마 사용자라면 기본, 베리언트 기능활용
1. 베리언트(Variants)의 이해
저도 프로젝트를 진행하다 보면 생각보다 많은 컴포넌트를 만들어 사용을 하기도 합니다. 컴포넌트의 형태는 같지만, 색상이 다른 [Light] 모드와 [Dark]모드를 제작하여 변경할 수도 있고, 같은 용도지만 크기를 Small/Medium/Large로 설정하여 사용할 수도 있습니다. 이처럼 스타일과 속성값이 다른 경우 일일이 모든 컴포넌트를 만들어 사용하는 것보다 비슷한 종류의 컴포넌트를 세트로 묶어서 사용할 수 있는 베리언트(Variants)를 활용하는 것이 좋을 것 같습니다.
(1) 베리언트(Variants)의 주요 장점 및 활용 방법
베리언트는 디자인 시스템의 효율성을 극대화하는 데 핵심적인 역할을 합니다.
① 디자인 시스템의 간결화
수많은 컴포넌트를 단일 컴포넌트 셋으로 통합하여 에셋 패널(Assets Panel)을 훨씬 깔끔하게 유지할 수 있습니다. 디자이너가 필요한 컴포넌트를 찾기 쉬워집니다.② 재사용성 및 일관성 강화
한 번 정의된 베리언트는 프로젝트 전반에 걸쳐 일관된 디자인을 유지하게 해줍니다. 속성만 변경하면 되므로, 디자인 에셋의 재사용성이 극대화됩니다.③ 작업 속도 향상
원하는 컴포넌트 속성만 패널에서 선택하면 되므로, 일일이 수동으로 수정하거나 새로운 컴포넌트를 찾아 드래그할 필요가 없어 작업 속도가 비약적으로 빨라집니다.④ 쉬운 유지보수
특정 컴포넌트의 디자인 변경이 필요할 때, 베리언트 셋 안의 마스터 컴포넌트만 수정하면 해당 베리언트를 사용하는 모든 인스턴스에 변경 사항이 반영됩니다. 이는 디자인 시스템 업데이트 시 엄청난 시간을 절약해 줍니다.⑤ 개발자와의 협업 효율성 증대
개발자도 베리언트의 속성(Property)과 값(Value)을 명확하게 파악할 수 있어, 디자인과 개발 간의 싱크를 맞추기가 훨씬 용이해집니다. "이 버튼은 state: disabled, size: large 입니다." 와 같이 명확한 커뮤니케이션이 가능해집니다.(2) 베리언트(Variants)의 사용법
- 컴포넌트 세트 제작 : 컴포넌트 버튼을 클릭하고 [Create component set] 선택
- 베리언트 생성 : [Properties] 메뉴 우측의 [+]을 클릭하여 [Variant]를 선택
- 속성 지정 : [Create component property] 옵션 창에서 'Name'과 'Value' 값 지정
- 속성 추가 : 추가로 지정할 옵션이 있다면 [Add new]를 선택하여 추가
(3) 베리언트(Variants)의 활용 사례
① 버튼: 상태(State)
Default, Hover, Pressed, Disabled, 유형(Type):
Primary, Secondary, Ghost, 아이콘(Icon): True, False 등으로 베리언트를 구성할
수 있습니다.
② 입력 필드(Input Field)
상태(State): Default, Focused,
Error, Disabled, 텍스트(Text): True, False 등으로 구성할 수 있습니다.
③ 아바타(Avatar)
크기(Size): Small, Medium, Large, 이미지
유무(Image): True, False 등으로 구성할 수 있습니다.
④ 탭(Tab)
선택 상태(Selected): True, False, 아이콘
유무(Icon): True, False 등으로 구성할 수 있습니다.
2. 베리언트(Variants)와 반응형 메뉴
피그마 베리언트 기능을 활용하여 반응형 메뉴를 만드는 것은 매우 효율적이며, 일반적으로 반응형 메뉴는 데스크톱 버전의 전체 메뉴와 모바일 버전의 햄버거 메뉴(또는 축소된 메뉴)로 나뉩니다.
(1) 반응형 메뉴 사용법
① 크기별 메뉴 바 제작
사각형 툴을 이용해서 세 가지 크기별 메뉴 바를 제작하고 각각을 그룹화하여 이름을 지정
② 컴포넌트 세트 제작
세 개의 그룹을 모두 선택하고 컴포넌트 버튼을 클릭한 뒤 [Create component set] 선택③ 베리언트 옵셜 설정
생성한 'Component1'을 선택하고 [Properties] 메뉴 옵션을 [Mode]로 변경④ 모드 변경
[Properties] 메뉴 옵션에 [Mode]를 변경하여 반응형 메뉴를 사용(2) 반응형 메뉴 추가 팁
① 오토 레이아웃(Auto Layout) 적극 활용
반응형 메뉴를 만들 때는 오토레이아웃을 사용하여 요소들이 화면 크기에 따라 유연하게 정렬되도록 하는 것이 필수입니다. 각 메뉴 아이템, 메뉴 그룹 등에 오토 레이아웃을 적용하여 유연성을 높일 수 있습니다.② 제약 조건(Constraints) 활용
컴포넌트 내의 요소들이 부모 프레임 크기에 따라 어떻게 움직일지 Constraints를 설정하여 반응형 동작을 미세 조정할 수 있습니다.③ 컴포넌트 인스턴스 교체
만약 Desktop 메뉴와 Mobile 메뉴 내부에 공통으로 사용되는 컴포넌트(예: 로고, 사용자 프로필 아이콘)가 있다면, 이를 베리언트로 만들고 각 Breakpoint 베리언트 내에서 적절한 인스턴스를 사용하면 더 효율적일 것입니다.3. Figma Variants의 테마(모드) 기능
Figma의 Variants(베리언트) 기능은 컴포넌트의 다양한 상태나 속성을 효율적으로 관리하는 데 사용됩니다. 이 중 "테마를 위한 모드(Modes for Theming)" 기능은 특히 다크 모드, 라이트 모드와 같은 시각적 테마 전환이나, 다양한 브랜드 테마, 언어별 텍스트 스케일등을 관리하는 데 매우 강력하고 유연한 방법을 제공합니다.
기존에는 다크 모드 등을 구현하기 위해 컴포넌트의 각 상태마다 별도의 색상 스타일을 지정하거나, 아예 다크 모드용 컴포넌트를 따로 만들어야 하는 번거로움이 있었습니다. 하지만 Figma Variables(변수)와 Variants의 조합을 통해 이러한 테마 전환을 훨씬 효율적으로 관리할 수 있게 되었습니다.
(1) 테마를 위한 모드(Modes)의 기본 개념
Figma에서 "모드(Mode)"는 **변수(Variables)의 특정 값 세트**를 의미합니다. 예를 들어, `Colors`라는 변수 컬렉션이 있고, 이 컬렉션 안에 `Primary`, `Secondary`, `Background` 등의 색상 변수가 있다고 가정해 봅시다.
- Light Mode (모드 1):** `Primary` = `#007AFF` (파란색), `Background` = `#FFFFFF` (흰색)
- Dark Mode (모드 2):** `Primary` = `#99CCFF` (밝은 파란색), `Background` = `#1E1E1E` (어두운 회색)
이렇게 `Light Mode`와 `Dark Mode`라는 두 가지 모드를 정의하면, 디자인에서 사용된 색상 변수(`Primary`, `Background` 등)의 값이 모드에 따라 자동으로 전환됩니다.
(2) Variants와 Modes의 연동
Variants는 컴포넌트의 속성(Property)을 정의하여 다양한 상태를 만드는 기능입니다. 예를 들어, `Button` 컴포넌트에 `State` (Default, Hover, Pressed)와 `Size` (Small, Medium, Large)라는 Variants 속성을 줄 수 있습니다.
여기에 변수(Variables)를 활용하여 테마를 위한 모드를 적용하면, 컴포넌트의 시각적 속성(주로 색상)이 모드에 따라 자동으로 변경됩니다.
작동 방식
① 색상 변수 정의:
먼저 Local Variables에서 'Colors'와 같은 컬렉션을 만들고, 'Primary', 'Secondary', 'Background', 'Text' 등 디자인에 필요한 색상 변수를 정의합니다.
② 모드 생성
'Colors' 컬렉션 내에 'Light Mode', 'Dark Mode'와 같은 모드를 추가하고, 각 모드에 해당하는 색상 변수의 값을 지정합니다.
③ 컴포넌트에 변수 적용
버튼, 카드 등 UI 컴포넌트의 채우기(Fill)나 텍스트 색상에 직접 정의한 색상 변수를 연결합니다. 예를 들어, 버튼의 배경색을 'Primary' 변수로, 텍스트 색상을 'Text' 변수로 설정합니다.
④ 인스턴스에 모드 적용
디자인 페이지에 컴포넌트의 인스턴스를 배치한 후, 해당 인스턴스(또는 인스턴스가 포함된 프레임)의 패널에서 "Layer" 섹션을 보면 'Colors' 컬렉션과 함께 'Light Mode' 또는 'Dark Mode'를 선택할 수 있는 드롭다운 메뉴가 나타납니다. 여기서 원하는 모드를 선택하면, 인스턴스에 적용된 색상 변수의 값이 해당 모드의 값으로 자동으로 변경되어 테마가 전환됩니다.
(3) 테마를 위한 모드(Modes)의 장점
- 효율적인 테마 관리
다크 모드, 라이트 모드 등 여러 테마를 동시에 관리해야 할 때, 각 테마별로 컴포넌트를 별도로 만들 필요 없이 변수 모드만 전환하면 됩니다. 이는 디자인 파일의 복잡성을 줄이고 유지보수를 간소화합니다.
- 일관성 보장
모든 컴포넌트가 동일한 색상 변수를 참조하므로, 테마 전환 시 색상 팔레트의 일관성이 자동으로 보장됩니다. 수동으로 색상을 변경할 때 발생할 수 있는 오류를 줄여줍니다.
- 빠른 테마 전환
디자인 작업 중에도 실시간으로 테마를 전환하며 UI를 확인할 수 있어, 다양한 환경에서의 사용자 경험을 쉽게 시뮬레이션할 수 있습니다.
- 확장성
새로운 테마를 추가하거나 기존 테마의 색상을 변경할 때, 변수 컬렉션에서 해당 모드의 값만 수정하면 모든 관련 컴포넌트에 자동으로 반영됩니다.
- 개발 핸드오프 용이
변수를 통해 테마를 관리하면, 개발자에게도 명확한 디자인 토큰(Design Tokens)을 제공할 수 있습니다. 각 모드에 대한 변수 값을 전달하여 개발 과정에서의 일관성을 높일 수 있습니다.
