피그마 사용자라면 기본, 베리언트 기능활용
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) 반응형 메뉴 사용법
① 크기별 메뉴 바 제작
사각형 툴을 이용해서 세 가지 크기별 메뉴 바를 제작하고 각각을 그룹화하여 이름을 지정
