0601 (목) component property, variants, prototype interaction

컴포넌트 프로퍼티 설정 방법 #2

아이콘은 인스턴스, 인스턴스 + 텍스트 필 채워서는 마스터로 설정

create property로 아이콘 대체/텍스트 수정/ 아이콘 유무 설정할 수 있음.

사용은 layer에서

 

스크롤 만들기

주로 가로 스크롤 사용, 페이지 스크롤과 겹치기 때문에 세로형은 사용 거의 X
지도형: 해당이미지프레임(스크롤프레임) 바깥으로 프레임이 노출되야함

 

cmd+r -> 레이어 rename 할 때 

마스터 컴포넌트 분류 시 폴더이름 + / + 아이콘이름

 

variant 내부에서 디자인 기본 설정 + 프로토타입 설정 해두기 (보통 디폴트,호버,클릭인 듯)

아이콘/컬러/타이포 사전 컴포넌트 설정 후 디자인

 

---

실습 리뷰

 

 

 

 

피그마 컴포넌트 세트 기본 세팅

hover 등의 프로토타입은 variants로 미리 만들어두고 활용

 

+property 설정은 세트로 만드는 것 외에도 요 메뉴판에서도 설정 가능

주로 쓰는 속성인 variant (component set 생성 버튼으로 만들면 요 채워진 마름모꼴 구성요소가 생김)

보이게 안보이게 Boolean

다른 인스턴스랑 바꾸는 Instance swap

컴포넌트 내 텍스트 변경 가능한 text

 

단, 위 속성의 간편설정(?)은 컴포넌트 등록 후 마스터에서만 만들 수 있고

실행은 인스턴스에서만 가능!