피그마 핵심기능 01: 컴포넌트

컴포넌트

컴포넌트를 사용해 반복적으로 사용되는 요소를 제작하면 한 번의 수정으로 전체에 반영할 수 있음 

• 작업 시간 단축
• 일관성 있는 디자인 스타일 유지
• 마스터 컴포넌트와 인스턴트 컴포넌트로 구성 

마스터 컴포넌트

• 최초로 형성된 컴포넌트
• 모든 인스턴스의 마스터
• 유지, 보수 시에만 수정 
• 마스터 컴포넌트 수정 시 인스턴트 컴포넌트에도 똑같이 적용됨

인스턴트 컴포넌트

• 마스터 컴포넌트의 사본 
• 인스턴스 컴포넌트 수정 시 마스터 컴포넌트에 적용되지 않음 

 

컴포넌트 만들기

마스터 컴포넌트 만들기

 

- 컴포넌트로 만들 대상 선택 후 상단 바에 다이아몬드 버튼 클릭

- 단축키: cmd+opt+k

 

- 컴포넌트 생성 시 테두리 보라색으로 변경

- 좌측 레이어 탭에서도 확인 가능

인스턴스 컴포넌트 만들기

- 마스터 컴포넌트 복사 시 인스턴스 컴포넌트 생성 

마스터 컴포넌트와 인스턴스 컴포넌트 구별법 

- 마스터 컴포넌트는 좌측 탭에서 꽉 찬 다이아몬드 아이콘

- 인스턴스 컴포넌트는 좌측  탭에서 빈 다이아몬드 아이콘

 

- 마스터 컴포넌트는 상단에 보라색으로 마스터 컴포넌트 아이콘 확인 가능

- 인스턴스 컴포넌트는 상단 컴포넌트 아이콘 x 

 

컴포넌트 에셋에서 가져오기

 

- 좌측 Layers -> Assets로 변경

- Local components에서 컴포넌트 확인 가능

- 해당 컴포넌트를 드래그 앤 드랍해서 인스턴스 컴포넌트 사용 가능

- 먼저 마스터 컴포넌트를 다른 페이지에 생성 후  Assets를 활용하여 빠르게 재사용하며 작업 가능

 

마스터 컴포넌트로 돌아가기 

 

 

- 인스턴스 컴포넌트 선택 후 우측 인스턴스 컴포넌트 아이콘 옆에 마스커 컴포넌트(꽉 찬 다이아몬드) 아이콘 클릭

- 마스터 컴포넌트로 이동 후 화면 하단에 "Return to instance" 버튼 생성

-"Return to instance" 클릭 하여 다시 해당 인스턴스 컴포넌트로 이동 가능

 

컴포넌트 연결 끊기 

 

-인스턴스 컴포넌트 선택 후 낫또 아이콘 클릭

-Detach instance  클릭

-연결이 끊긴 인스턴스 컴포넌트는 보라색 테두리에서 파란색 테두리로 변경됨 

-연결이 끊어지면 마스터 컴포넌트 수정 사항이 인스턴스 컴포넌트에 적용되지 않음

 

인스턴스 수정 후 리셋

-인스턴스 컴포넌트 선택 후 낫또 아이콘 클릭

-전체 리셋 시 Reset all changes  클릭

-부분 리셋 시 인스턴스 컴포넌트 수정 사항에 따라 Reset fill 등 선택지 클릭 

 

오버라이드 

- 마스터에서 복사한 모양을 유지한 채 다른 속성을 변경시키는 것 

- 공유하기(마스터 컴포넌트)

- 좋아요(인스턴스 컴포넌트)

- 좋아요 버튼은 공유하기 버튼의 코너 레디어스, 패딩 값을 유지하지만 배경색과 폰트 굵기가 달라짐 

 

슬래시 

- 피그마는 슬래시를 단위로 폴더 기능 제공

- 같은 폴더에 있으면 Swap Instance 사용 가능 

 

- 단축키 cmd+R로 이름 변경 가능 

- 인스턴스 컴포넌트의 드랍다운 버튼 클릭

 

- Swap instance로 같은 Label 폴더에 있는 인스턴스끼리 스와핑 가능