PPT보다 쉬운 피그마 | 2주차 (숙제)

설연휴 끝나고 화요일차 2월 13일

오늘의 목표

2-5 ~ 2-8, 숙제까지 강의 완료

 

2-5 컴포넌트 속성 이해하고 활용해보기1

컴포넌트란?

UI의 구성을 저장하여 복제,변형 용이하게하는 기능

 

마스터와 인스턴스

 

마스터는 원본 인스턴스는 복제본

 

컴포넌트로 변경하면 객체의 레이어가 보라색으로 변경?

 

사각도형 객체를 누르고 상단의 마스터 모양을 클릭하면 객체의 레이어가 보라색으로 변경된다!

C+A+K 단축키 사용하면 더 빨라요~

 

*정리

 

인스턴스는 컴포넌트의 복제본이다.

컴포넌트의 색상을 변경하면 인스턴스도 변경된다.

 

반복되는 요소들을 수정할때 클릭 한번으로 다 변경되서 편함.

 

 

오른쪽 동그라미 르탄  2개 개체를 마스터하고싶으면 멀티 컴포넌트

 

그리고

 

디테치 Detach 연결해제라는 의미

 

마스터 컴포넌트 디테치는 원본이기때문에 해제할수 없다.

 

인스턴스 디테치는 해제할수있고,

단축키는 C+A+B

 

연결해지된 인스턴스는 다시 마스터 컴포넌트와 재연결할수 없다! 

 

 

꿀팁!!

 

마스터 컴포넌트를 실수로 지웠다? 어떡하죠!

 

인스턴스 개체를 누르고 우클릭 메인컴포넌트에서 리스토어 컴포넌트를 누르면 되살아납니다!

 

그리고 인스턴스를 실수로 지웠다?어떡하죠!

 

이거는 그냥 인스턴스 만들었던것처럼 알트옵션누르고 복제하면 됩니다!

또는 Asset에서 뽑아서 가져오면 된다. 아래와 같이 드래그앤드롭으로 땡겨~

 

 

 

2-6 컴포넌트 이해하기2

 

컴포넌트 복사했는데 왜 수정이 안돼용?

 

마스터 컴포넌트는 인스턴스로 복제가 되지요~

 

그러나 인스턴스는 마스터 컴포넌트의 복제본이기때문에 마스터컴포넌트에 적용되지 않아요

 

마스터 컴포넌트와 인스턴트 컴포넌트의 차이를 알아보자!

 

마스터컴포넌트로 변경을하면 인스턴스도 변경이된다.

 

인스턴스는 원본에 없는 요소를 추가하거나 삭제할 수없다.

- 예를 들어, 인스턴스 버튼 에만 아이콘을 추가하려는데 안들어가고, 마스터에도 생기지 않음

- 예를 들어, 인스턴스 색상을 빨강으로 변경했다? 그러면 마스터컴포넌트에서 다시 파란색으로 변경해도 그 인스터는 색상이 변하지 않고, 빨강이임. 마스터컴포넌트만 파랑색이다. 

- 인스턴스는 마스터에 없는 요소를 추가하거나 삭제할 수없으며, 색상 변경시에도 주의해야함. 

-  한 인스턴스만 아이콘을 안보이게 하고싶다면 차라리 눈끄기 이거 쓰셈!

 

 

2-7 베리언츠 기능 활용

 

베리언츠 의미

 

마스터 컴포넌트로 등록된 컴포넌트들의 묶음을 의미

 

 

 

숙제까지 따라해보았다.