Figma의 Variants (feat. 새로운 컴포넌트 셋팅 방법)

2020년 10월 29일, 피그마 측의 컴포넌트 커스터마이징과 관련한 기능 업데이트가 있었습니다. 이 부분에 대해 이해를 하려면, 약간의 개발 상식을 필요로 하여 어렵게 느껴질 수 있어서 기능에 대한 개념 설명을 간단히 알려드리고 본격적으로 시작해 보겠습니다.

컴포넌트의 개념에 관한 설명은 이전 포스팅을 참고해주세요. 

1) Variants [베어리언츠] 기능 정의

Variants 기능 : Figma에서 생성한 컴포넌트(Component)를
개발 친화적인 방식으로 세팅하고 관리할 수 있는 컴포넌트의  확장 기능입니다.

 

 

컴포넌트 기능

• 00:58 버튼 컴포넌트 생성하기
• 01:36 메인 컴포넌트와 인스턴스 구분하는 방법
• 02:25 인스턴스의 옵션 살펴보기
• 04:34 인스턴스의 Text Override 기능
• 06:10 Detach Instance(인스턴스를 메인 컴포넌트와의 연결을 해제하는 방법)
• 10:54 Create multiple components(여러 개의 UI Asset을 한꺼번에 컴포넌트로 변환하는 방법) *컴포넌트 Swap 기능
• 02:35 아이콘 인스턴스를 Design 패널에 있는 다른 아이콘으로 변경하는 방법
• 03:41 아이콘 인스턴스를 Assets 패널에 있는 다른 아이콘으로 변경 하는 방법

Variants 기능

• 베리에이션 된 컴포넌트들을 하나의 컴포넌트로 합치는 방법
• 09:12 Variants 기능
• 11:09 컴포넌트 합치기(Combine as Variants)
• 12:04 신규 속성 추가(Add new property)
• 12:51 버튼에 아이콘이 있을 경우 Variant 값 정의 1(yes, on, true)
• 13:11 버튼에 아이콘이 없을 경우 Variant 값 정의 2(no, off, false)
• 13:58 버튼의 상태 속성(pressed) 추가하기 16:00 Secondary 버튼 Type 추가하기
• 17:09 Design 패널에서 버튼 컴포넌트 최종 결과물 확인하기
• 17:34 Inspect 패널에서 버튼 컴포넌트 최종 결과물 확인하기 

 

Variants 기능을 사용하는 이유 -  *컴포넌트 관리 용이 및 시간 절약

• 옵션 별 컴포넌트의 생성이 쉬워진다.
• 컴포넌트(인스턴스)의 커스터마이징과 Swap이 쉬워진다.
• 개발 친화적인 컴포넌트를 생성할 수 있다. 
• 컴포넌트에 관한 에셋 패널이 단순하고 깔끔해진다. -> 원하는 컴포넌트를 찾기 용이해진다.

 

 

연관 추천 글

피그마의 팀 라이브러리 기능

---

Variants 참고 레퍼런스

• Creating and organizing Variants
• Tom Lowry on Twitter
• Joey Banks on Twitter

• Variants 공식 튜토리얼 영상 (2020.10.29)