[Figma 배워보기]컴포넌트

피그마 쓰면서 제발 쓰고 싶었던 기능!!!~!
피그마 그냥 대에충 쓰고 있었는데 이 기능을 쓰고 싶어서 강의까지 찾아봄ㅠㅜ

컴포넌트
반복해서 쓰는 ui규칙들을 정의해서 규격화 하는 것. 
ㄴ 화면을 새로 만들때 정해진 ui들을 붙여넣기 해서 빠르게 만들 수 있음
ㄴ 기획자 입장에서는 아름다울 필요는 없고 정의만 되면 되는데 매번 그리기 피곤해서 피그마를 프로토타이핑 툴처럼 쓰고 싶었다 (개인적)
ㄴ 컴포넌트 정해두면 한꺼번에 모든 화면에 해당 ui를 수정 할 수 있음

 

그럼 어떻게 쓰는 거지!

선택하고 위에 마름모 4개짜리 누르거나 단축키 

 

그리고 이걸 복사해서 사용하면 되는데 복사된 복사본은 인스턴스라고 부름

즉 원본 = 컴포넌트 / 복제본  = 인스턴스 

 

컴포넌트를 수정하면 같이 수정됨

 

인스턴스를 수정하면 인스턴스만 수정되는데 이걸 override라고 부름 (인스턴스 수정된 영역에 대해서만 오버라이드 적용됨)
이때 컴포넌트를 수정하면 오버라이드 안된 부분만 일괄 수정됨

 

그럼 컴포넌트랑 인스턴스 해제는 어떻게함?
👉 Detach instance

인스턴스 단계에서 우클릭해서 Detach instance하면 기존 프레임으로 돌아감 (컴포넌트와의 관계는 해제됨)
그럼 컴포넌트는? 컴포넌트는 방법없음. 그냥 인스턴스 복사하고 컴포넌트는 삭제하는 수밖에😅