Comento 피그마 실무 PT 3주차 강의

Comento 피그마 강의

2022. 07. 02 (3주차 강의)

 

Comeponents

: 원본 Master Comeponents를 중심으로 N개의 Instance(복제품)을 관리하는 기능

일관된 디자인을 만들고 관리할 수 있으며, 디자인한 모든 레이어 및 개체에 적용할 수 있음

Master Comeponents의 속성을 수정하면 원본과 연결된 Instance도 따라서 수정되는 기능을 가지고 있음

Master Comeponents는 관리를 위해 별도의 페이지를 생성해 보관하며, 컴포넌트로 등록한 요소들은 Asset 탭에서 확인 가능

 

* 생성 방법

1. 개체 선택 -> 우클릭 -> Create Components

2. 개체 선택 -> 상단 컴포넌트 아이콘 클릭

3. 개체 선택 -> 단축키 Cmd+Option+K

** Create multiple component : 한번에 여러개의 컴포넌트 생성

    Create component set : Variants 생성

 

Variants

: 컴포넌트를 경우에 수에 따라 만들어두고 Drop down box에서 꺼내 쓰거나 토글 버튼으로 상태를 변경하며 사용할 수 있는 기능

버튼에서 On, Off 버튼을 미리 만들어 두고서 필요에 따라 상태를 변경해가며 쓸 수 있는 기능

 

*생성방법

1. 완성된 2개 이상의 마스터 컴포넌트의 텍스트를 선택한 후에 우측 패널에서 Combine as variants 버튼 클릭

2. 2개 이상의 개체(프레임, 일반 오브젝트, 인스턴스 포함) 선택 후 상단 Create component set 클릭

 

Master Component

: 최초로 생성된 원본 컴포넌트

요소 추가, 삭제가 자유로우며 마스터 컴포넌트를 수정하면 인스턴스도 수정됨

한번 생성된 마스터 컴포넌트는 해제 불가능함

Instance

: 마스터 컴포넌트를 복사한 복제 컴포넌트

마스터에 있는 요소를 추가하거나 삭제할 수 없음(연결해제하고 싶을시 Detach instance)

자체적으로 색상, 간격, 아이콘 등의 속성을 수정하는 것 가능 (한번 속성이 변경된 부분은 마스터를 수정해도 수정되지 않음//메인컴포넌트와 연결하고 싶을시 Reset all overides로 초기화)

인스턴스에서 변경한 간격, 색상등의 요소를 마스터로 업데이트 가능 (인스턴스 우클릭->메인 컴포넌트->Push overides to main component)

인스턴스 우클릭->main component->Go to main component : 마스터 컴포넌트로 이동

Restore master component : 

 

Component Property

Variants 하지 않아도 컴포넌트에 Property 줄 수 있음

1. TEXT Property

: Component text에 property 값을 부여하여 우측 패널에서 텍스트를 수정할 수 있도록 하는 기능

마스터를 수정하지 않아도 다중 인스턴스를 한번에 수정하는 것이 가능

 

*생성방법

1. 완성된 마스터 컴포넌트의 텍스트를 선택한 후에 우측 패널에서 Content 옆의 버튼 클릭

2. Name : 구분항목, value : 디폴트가 될 텍스트 값을 적은 뒤 Create property 클릭

3. 복사한 인스턴스를 클릭 후 우측 패널에서 텍스트를 수정

TEXT Property Defult

TEXT Property 변경

2. Boolean Property

: 특정요소를 토글 버튼으로 숨김 또는 노출 처리 할 수 있는 기능

베리언츠에서도 지원되는 기능, UI요소를 베리에이션 할 때 사용하기 좋음

 

*생성방법

1. 완성된 마스터 컴포넌트의 UI를 선택한 후에 우측 패널에서 Layer 옆의 버튼 (Apply boolean property) 클릭

2. Name (구분항목명)을 적은 뒤 Create property 클릭

3. 복사한 인스턴스를 클릭 후 우측 패널에서 토글 버튼으로 상태값을 바꿔줄 수 있음

Boolean Property toggle on

Boolean Property toggle off

3. Instance Property

: 컴포넌트에 포함되어 있는 인스턴스 UI요소에 Property를 더해주는 기능

Swap instance기능과 동일

 

*생성방법

1. 모듈에서 Instance 아이콘 클릭 후 우측 Instance 옆의 버튼 (Apply boolean property) 클릭

2. Name (구분항목명)을 적은 뒤 Create property 클릭

3. 복사한 인스턴스를 클릭 후 우측 패널에서 리스트 클릭 후 변경할 아이콘을 클릭

Instanco Property

 

 

 

https://bit.ly/3D9XCOz

LIVE로 배우는 실무 PT ㅣ 코멘토