[Figma] 컴포넌트 특징 & 단축키

컴포넌트란

- UI 디자인에서 반복해서 쓰는 덩어리로 반복작업을 줄이는 것이 목적
- 하나의 수정으로 전체가 반영이 되도록
- 원본으로 수정할 수 있는 마스터 컴포넌트와, 수정된 것을 적용시키는 인스턴스가 있음

 

종류

1. 마스터 컴포넌트
   원본으로 수정이 가능하다.
2. 인스턴스
   마스터 컴포넌트에서 복제된 것으로 마스터 컴포넌트가 수정되면 인스턴스도 수정된다.
3. 프로퍼티 (이후 포스팅 글에 자세히 설명)
   컴포넌트의 속성값

특징

- "create component"로 생성

 

- 마스터 컴포넌트 수정 시 인스턴스 전부 같이 수정됨

 

 

- 마스터 삭제했어도 인스턴스 우클릭 → Main component → Restore main component 클릭

 

 

- 마스터 위치 찾을 땐 인스턴스 우클릭 → Go to main component 클릭

2. 인스턴스 관련

1. 인스턴스를 수정하면 마스터랑 연결 끊김. 이후 마스터 수정해도 해당 인스턴스에는 적용 안 됨
2. 다시 마스터와 연결하려면 인스턴스 우클릭 → Reset all changes 클릭
3. 인스턴스 복사해서 재사용 가능

---

단축키 (Mac 기준)

마스터 컴포넌트

• 생성: Option + Command + K
• 해제: Plugins → Detach component 검색 → Run 클릭

인스턴스

• 생성: Option + Drag
• 해제: Option + Command + B 또는 우클릭 → Detach instance 클릭
• 마스터 위치 이동: Control + Option + Command + K