2.4Components

Components and Variants

Component는 디자인 전반에 걸쳐 재사용되는 요소이다. 컴포넌트를 등록하고, 변형들은 Variants로 등록해 관리하면 프로젝트에서 디자인을 일관되게 만들 수 있다.

Component 만들기

디자인 요소 선택 후(레이어나 Auto Layout을 적용해 만든 프레임 등),

• 오른쪽 사이드바의 프로퍼티 패널에서 more 버튼을 눌러 create component 메뉴를 선택한다.
• 우클릭 후 create component를 선택한다.
• 단축키 option + command + k를 누른다.

이렇게 component를 만들면, 피그마에서 보라색의 컴포넌트 프레임을 자동으로 만들어 선택한 레이어(들)을 감싼다. 이렇게 만든 후, 오른쪽 사이드바의 adjustment 버튼을 눌러 설명을 적을 수 있다.

이렇게 컴포넌트를 만들면, 왼쪽 사이드바의 Assets 탭에서 해당 컴포넌트를 끌어다 쓸 수 있다. 이렇게 끌어다 쓴 복제본은 Instance라고 하는데, 원본인 Master Component나 복제본인 Instance들이나 모두 커스터마이징이 가능하다. 단, Master Component를 수정하면 전부 하위 항목들인 Instance에도 적용된다.

한번에 여러 컴포넌트 만들기

여러 개의 디자인 요소들을 선택 후, 오른쪽 사이드바의 more을 눌러 create multiple components 버튼을 선택하면 여러개의 독립적인 컴포넌트들이 생긴다. 이 때, 레이어들 간 종속 관계가 있다면 가장 위에 있는 레이어 기준으로 컴포넌트가 생긴다.

Variants 만들기

비슷한 컴포넌트들의 변형, 예를 들면 아이콘이 바뀐다거나 색이 바뀐다거나 다크모드 용이라던가 하는 경우는 Variants로 관리하면 편하게 디자인을 할 수 있다. Variants는 두 가지의 속성을 조절함으로 관리된다.

• Properties : 컴포넌트에서 변동될 수 있는 속성이다. 버튼의 예를 들면, 사이즈, 상태, 색깔 등이 있다.
• Values : 각각의 Property의 옵션 값들이다. 버튼의 상태라는 속성을 예로 들면, 기본 상태, 호버 되었을 때의 상태, 눌렸을 때의 상태, disabled 상태 등이 있다.

Variants를 만들 때, 이미 Component인 것들끼리 바꿔가며 쓰려면 여러개를 선택 후 오른쪽 사이드바에서 Combine as Variants 버튼을 누른다.

또는, 컴포넌트 하나로 여러가지 변형된 인스턴스를 만든 후, 전체를 선택 해 option + command + b를 눌러 Detach Instance를 해 우선 컴포넌트에서 해제하고, Component Set으로 만들 수 있다. 이렇게 만든 Component Set 안의 컴포넌트들은 서로의 Variant가 되어 서로 변환이 쉬워진다.

이렇게 만든 Component Set의 컴포넌트들은 Properties를 부여해 나중에 Assets에서 끌어쓸 때 쉽게 Variant를 불러올 수 있다.

Property 부여하기

컴포넌트 한 개에 Property를 부여하려면, 오른쪽 UI의 해당 컴포넌트 패널에서 편집할 수 있다. Add property 옆 + 버튼을 눌러 property의 종류들(Variant, Text, Boolean 그리고 Instance swap) 중 하나를 선택한다.

여러 개의 컴포넌트로 만든 Component Set에 Property를 부여하고 각각의 컴포넌트에 다른 값을 주려면, 마찬가지로 해당 Component Set에 있는 컴포넌틀르 클릭 후 오른쪽 UI의 컴포넌트 패널에서 편집할 수 있다. 이 때는 +를 누르기 전에 이름이 붙지 않은 속성이 있는데, 이름을 붙이고 값을 각각의 컴포넌트에 대해 주면 된다.