Figma - Component Variants 1
기획자의 피그마 :: 컴포넌트 그룹핑하기
제가 처음으로 실무에서 피그마 figma 를 사용하게 된 것이 2019년 5월경입니다.
그때부터 지금까지 figma 는 정말이지 너무도 많은 업데이트를 해왔습니다. 디자인 시스템의 기초가 되는 컴포넌트에 대한 기능 역시 수없이 많은 과정을 거쳐 굉장히 많은 발전을 해왔지요.
figma 회사와 저는 아무 관계도 없는 사이지만 사용자로서 굉장히 만족스럽기도 하고 뿌듯한 기분까지 드네요. ㅋㅋㅋ
오늘은 Component 의 Variants 기능에 대해 알아보도록 하겠습니다.
*** 이 포스팅의 내용을 동영상으로도 확인할 수 있어요 :)
Component 를 아름답게 그룹핑하는 방법 - Variants
컴포넌트를 만들었으니 이제 이 컴퍼넌트들을 성격에 따라 그룹핑을 해볼까요?
Figma 업데이트 이전에는 컴포넌트의 그룹핑을 위해서 / 를 기준으로 네이밍으로 설정을 했었답니다.
예를들면 textfields/input/default 이런 구조의 네이밍으로 만들어 디자인 시스템을 정리했어야 했지요.
하지만 이제 그럴 필요가 없어졌습니다. 아주 아름다운 기능 Variants 가 생겼으니까요.
자, 그럼 우리가 실습 중인 Toss 화면을 구성하고 있는 에셋들을 다시 한번 살펴볼까요?
Variants 기능으로 만들어 볼 부분은 버튼과 이미지 썸네일 입니다.
송금 버튼 타입 1 : 파란색 / 타입 2 : 회색
이미지 썸네일 타입 1 : 사용자 프로필 사진 / 타입 2 : 은행 계좌 심볼 / 타입 3 : 카드 이미지
지난 시간에 이미 버튼과 프로필 부분을 컴포넌트로 설정했습니다.
버튼 컴포넌트부터 그룹핑을 해볼까요?
1. 버튼 component 를 클릭한 상태에서 오른쪽의 디자인 패널의 Variants 에서 플러스 + 버튼을 클릭해주세요. Variants 기능은 컴포넌트를 선택한 상태에서만 활성화되어 보여집니다.
figma component variants2. 그럼 아래 화면과 같이 Component 그룹이 만들어지면서 현재의 컴포넌트 형태가 복사되어 자동 추가됩니다. 그리고 추가된 컴포넌트에 대한 명칭을 설정할 수 있도록 입력란이 활성화 됩니다. 이 영역에서 원하는 이름으로 변경을 해주시면 됩니다.
최초에 만들었던 마스터 컴퍼넌트의 이름이 그룹명으로 지정되고, 해당 컴퍼넌트의 이름은 자동으로 Default 로 적용됩니다.
물론 이 부분 역시 더블 클릭하거나 Property 영역의 셀렉트 박스에서 선택해서 이름 변경이 가능합니다.
우리는 그레이 색상의 작은 송금 버튼을 만들 예정이기 때문에 프로퍼티의 이름을 small로 지정해준 후 디자인을 변경해주었습니다.
3. 이미지 썸네일 부분도 동일하게 컴포넌트를 만들어 Variant 그룹을 만들었습니다.
사용자의 프로필 사진, 은행 계좌의 심볼이 표시되는 부분은 모두 원형으로 사이즈의 차이만 있을 뿐 다른 부분이 없기 때문에 위에서 우리가 버튼 컴포넌트를 만든 것과 동일하게 제작이 가능합니다.
4. 하지만, 카드 썸네일 같은 경우 원형이 아닌 직사각형 형태의 썸네일입니다.
이런 경우에는 어떻게 추가할 수 있을까요? 방법은 여러가지가 있지만, 우선은 가장 심플한 방법으로 추가를 해보도록 하겠습니다. 우선 작업 화면에 카드 썸네일용으로 사용할 사각형을 하나 그려주세요.
그리고 Fill 패널에서 색상 썸네일 부분을 클릭한 후, Fill 속성을 Image 로 선택해주세요.
그럼 아래와 같이 기본 이미지가 채워진 상태가 됩니다. 이 화면에서 Choose image 버튼을 클릭하세요.
그리고 카드 썸네일 이미지를 적용하면 됩니다.
준비한 카드 썸네일 이미지가 가로 형태라면 적용 후 패널 내에 있는 로테이션 버튼을 클릭하면 세로 형태로 적용되도록 변경할 수 있습니다.
이렇게 적용한 후 Create Component 를 클릭해서 컴포넌트로 만들어줍니다.
5. 그리고 이 컴포넌트를 우리가 위에서 만들었던 Picture variant 로 포함시켜 주도록 하겠습니다.
방법은 아주 쉬워요. 만들어진 컴포넌트를 Picture variant 영역으로 드레그합니다.
그럼 Card 썸네일 컴포넌트가 Picture 그룹 안으로 들어온 것을 확인할 수 있습니다.
사실 Component 를 만들고, Variants 기능을 사용하는 방법 자체는 아주 쉽습니다.
기능의 특성을 살려서 디자인 시스템을 구성하기 위해서는 이 Variants 기능에 대해 조금더 깊게 알아볼 필요가 있습니다.
그래서 다음 시간에는 Variants 에서 제공하는 기능을 알아보도록 할게요.
(사실 저도 이 부분은 아직 학습 중 ㅋㅋㅋㅋ)
오늘도 고생하셨습니다~!!
