핵심 기능으로 빠르게, 피그마 실무 50강사전(4)

 

1. 컴포넌트

 

한번 제작한 기능을 다시 재사용할 수 있도록 원본을 중심으로 여러 복사본을 관리할 수 있도록 하는 것

일관성 있는 디자인이 가능하다.

Master component(원본) - Insance(복사본)

 

요소 클릭 후 Create component 버튼을 클릭하면 component가 된다.(component 관련 객체는 특정 아이콘이 뜬다.)

 

master componen를 복사 하면 Instance를 만들 수 있다.

 

생성한 component를 왼쪽 Assets 탭에서 확인 및 바로 사용할 수 있다.

 

---

2. Master Component 와 Instance

 

Master Component를 수정하면 Insatnce에도 적용된다.

단, Instance 요소를 수정한 후에는 Master Component에서 동일한 요소를 수정해도 적용되지 않는다.

Master Component가 지워져도 Instance가 있으면 복구할 수 있다.

 

Instance는 원본에 없는 요소를 추가 및 삭제할 수 없다.(안보이게 하는 것은 가능)

단, Instance는 투명도, 색상, 선, 오토레이아웃 등 다른 요소는 수정이 가능하다.

 

* Detach Instance Plugin 을 사용하여 원본과 연결을 해제할 수 있다! -> 최근 버전에서는 피그마에 아예 추가된 듯 하다.

 

 

Instance의 수정 내용을 main component에 반영되게 할 수 있다.

동일 요소 인스턴스 component를 다른 인스턴스의 component로 바꿀 수 있다.

 

 

---

3. 마스터와 인스턴스 활용법

1. 마스터 컴포넌트 제작 및 라이브러리 발행
2. 인스턴스를 불러와 화면 구성
3. 마스터에서 수정사항 진행
4. 인스턴스에 수정사하 반영

---

4. Essets 관리

다른 페이지의 Component와 페이지 내에서 생성한 Component를 구분해서 정리되어 있다.

페이지 - 프레임 - '/'로 구분된 Esset 명으로 폴더가 자동으로 나뉜다.

Rename을 통해 경로 및 파일명을 정리할 수 있다.

 

---

5. 프로퍼티

컴포넌트에 옵션을 주는 기능

Component의 특정 요소를 클릭 후 property를 부여할 수 있다.

 

 

Property의 종류

• Text : 마스터 컴포넌트를 제외한 특정 instance의 텍스트를 한번에 컨트롤할 수 있다.
• Boolean : 특정 요소를 토글로 끄고 켤 수 있다.
• Swap : 특정 요소를 같은 폴더의 다른 요소로 바꿀 수 있다. 따라서 사용할 아이콘들을 같은 Asset 폴더에 넣어야함

 

---

6. Variant

마스터 컴포넌트를 그룹화 하는 것

 

1. 마스터 컴포넌트끼리 그룹화 

2. 마스터 컴포넌트가 아닌것 포함 그룹화

 

Variant의 설정 및 component 값을 확인할 수 있다.

 Value의 값은 중복되어서는 안되고, Variant 레이어명을 임의로 수정하면 안된다.(property=Value 공식 유지)

 

Component의 요소에 따라 자유롭게 객체를 수정할 수 있다.