디자인 시스템 구축기 (3) - figma component 기능

Figma에서 제공하는 Component 기능을 연습해보자

Material 3 Design Kit

Button 컴포넌트를 만들기 전에 이것부터 보면 좋을거 같다.
Material Design에서 제공하는 figma kit가 있다.

Material 3 Design Kit
figma 파일로 열 수 있는데
다양한 컴포넌트가 있어서 이름도 익히고 피그마에 사용된 스킬도 살펴볼 수 있어서 좋다.

Button component 만들기

버튼의 모양을 다 만들고 그룹화한 뒤 최상단에 맨 왼쪽 아이콘을 누르면 컴포넌트화가 된다

만든 컴포넌트를 복사하면 위의 사진처럼 표시된다
컴포넌트 원본을 main이라 부르고 복사된 컴포넌트를 instance라 부른다.
instance는 main과 똑같은 속성을 유지하는 부분만 main이 변경시 일괄변경된다

instance는 main과 동일한 속성을 유지하는 부분에 한해서만
main의 속성값 변경시 일괄변경된다

component autolayout

autolayout은 컴포넌트의 정렬 속성을 지정할 수 있다
부모 요소 기준 정렬(모바일의 constraint layout 개념이랑 똑같음)
아이템간 거리, padding top, padding bottom 값도 지정할 수 있다

이렇게 요소의 크기를 늘려도 autolayout에 의해 자동정렬되는 모습이다.

component properties

컴포넌트의 속성을 지정할 수 있다.

• variant
  컴포넌트의 사이즈, 레이아웃 배치 등 변형 상태를 나타냄
• boolean
  컴포넌트의 가시성에 대한 값
• instance swap
  컴포넌트 내 구성요소의 변경을 위한 값(icon 변경 등)
• text
  컴포넌트 내에 사용되는 text field

instance swap

icon과 같이 구성 요소를 변경할 수 있다
다만 이미 내부적으로 정의된 컴포넌트(라이브러리)인 경우 속성을 지정할 수 있다

boolean

컴포넌트의 구성 요소를 보일지 말지 지정할 수 있다

속성 등록 버튼을 누르면 속성 이름을 지정할 수 있다.

이렇게 아이콘을 껐다 킬 수 있다.

text

text도 마찬가지로 속성 등록하고 테스트를 해보았다.

속성의 값만 바뀌면 바로 적용되는것을 볼 수 있다.

variant

위의 버튼을 클릭하거나 오른쪽의 design 탭에서 속성을 추가할 수 있다.
주로 같은 컴포넌트지만 다른 상태를 나타낼 때 사용한다.

ps

여태 오랫동안 피그마를 써왔지만 이렇게 인텔리하게 쓸 수 있다니 놀라웠다.
component 기능을 쓰면 똑같은 instance를 여러개 만들지 않아도 좋을거 같다.