Figma - Component Variants 2
기획자의 피그마 :: 컴포넌트 베리언트 자세히 알아보기
Figma 의 이 Variants 기능이 릴리즈 된 것은 불과 얼마 전의 일이랍니다.
그래서 아직 저도 학습 중에 있는 부분이라 완벽하게 마스터했다고... 말씀드리긴 좀 ... ^^;;;
그래도 실무에서 다시 한번 사용을 해보면서 그간 알게된 내용들을 공유드립니다.
*** 이번 포스팅도 동영상으로 볼 수 있어요.
Variants - Property 설정
지난 시간에는 Component 를 만들고 Variants 패널에서 컴포넌트를 추가하는 이주 기본적인 방법들을 알아봤습니다. 오늘은 Variants 에서 제공하는 옵션을 이용해서 컴포넌트 그룹핑을 해보도록 할게요.
Variant Property새롭게 그룹핑 할 기준은 총 2개입니다.
타입별 : User, Bank, Card
사이즈별 : Big, Default, Small
2. 컴포넌트의 Variants 를 생성해주느 방법은 지난 시간과 같습니다.
Variants 로 구성할 컴포넌트를 클릭한 후에 오른쪽 Design 패널에서 플러스 버튼을 클릭합니다. 하나의 이미지당 총 3개의 사이즈로 베리에이션을 할 예정이기 때문에 저는 User Profile 컴포넌트를 총 3개로 만들어주었습니다.
Variants 패널의 플러스(+) 버튼, 또는 작업 화면 영역의 보라색 플러스 버튼을 클릭해서 Component 를 추가로 생성하면 위의 이미지처럼 Property와 Value 값이 모두 자동 네이밍되어 보여집니다.
3. 작업 화면에서 Variants 네임 부분을 클릭한 상태로 Variants 패널을 보시면, Property 의 이름 변경, 삭제, 추가할 수 있는 기능이 제공됩니다.
Variants, Property이 기능을 활용해서 아래와 같이 Variants 구성이 완료되었습니다.
Variants 안에 존재하는 모든 Component 는 해당 그룹에 정의된 Property 에 모두 매핑이 되어있어야 하니, 이 점 꼭 주의하세요 :)
Component, Variants 기능 모두 효율적으로 디자인 시스템을 만들 수 있는 아주 좋은 기능이랍니다.
그러니 꼭 한번씩 실습해보시기를 바래요 :)
자, 그리고 우리는 이렇게 해서 Figma 의 기본 기능이라고 할 수 있는 부분에 대해서 모두 짚어보았습니다.
앞으로 이 Figma 를 통해 기획, 디자인의 협업을 진행하기 위해 다음 시간부터는 조금 더 세세한 기능을 살펴보도록 할게요.
오늘도 고생 많으셨습니다~!!
#figma #피그마 #웹디자인 #컴포넌트 #Component #Variants #designsystem #디자인시스텝 #웹기획 #앱기획 #피그마튜토리얼 #피그마사용방법
