[디자인부트캠프] Chapter 7. 피그마 심화(2)

화면에 배치된 오브젝트를 그룹으로 묶는 세 가지 기능 그룹 / 프레임 / 컴포넌트

 

1. 그룹(Group)

콘텐츠를 하나의 그룹으로 묶는 개념. 그룹화된 콘텐츠는 크기, 색상, 속성이 모두 같이 변경됨

단축키 Ctrl+G / 해제 Ctrl+Shift+G

 

2. 프레임(Frame)

레이아웃을 설정하고 반응형 디자인을 적용할 수 있는 컨테이너

내부 콘텐츠의 속성이나 크기에는 영향X

중첩이 가능하며 페이지, 카드 레이아웃 등에 사용

단축키 F or A

 

3. 컴포넌트(Component)

디자인에서 반복적으로 사용하는 요소를 하나로 묶어 재사용 가능하게 만든 디자인 템플릿

 

버튼, 아이콘, 카드 같은 UI 요소를 하나의 '기준 템플릿'으로 만들어 여러 화면에서 반복 사용 가능

컴포넌트의 복사본(인스턴스)는 원본을 수정하면 자동으로 바뀌기 때문에 작업 속도 향상&디자인 일관성 유지

 

4. 컴포넌트와 인스턴스

부모-자식과 같은 관계의 컴포넌트와 인스턴스

 

• 컴포넌트 : 재사용 가능한 UI요소. 디자인 시스템의 핵심. 여기저기 흩어진 디자인 요소를 한번에 수정/변경 가능. 효율적이고 일관성 있는 디자인 작업. 버튼, 캐러셀 콘텐츠, 텍스트 필드와 같은 요소를 모두 컴포넌트로 구성할 수 있음.
• 인스턴스 : 재사용하도록 등록한 원본인 컴포넌트를 복제한 오브젝트. 아이콘으로 두 속성을 구분할 수 있음. 위치, 텍스트, 색상 정도는 오버라이드 가능

원본 컴포넌트는 복제한 인스턴스의 색상, 크기, 형태 변화에 영향을 주지만 인스턴스는 원본 컴포넌트에 영향X
복제한 인스턴스의 속성을 변경하면 원본 컴포넌트로부터 독립되어 컴포넌트가 변경되어도 영향X
detach instance로 인스턴스를 복제하여 속성 변경 뒤 다시 컴포넌트를 만들 수 있음

 

컴포넌트 등록하기

1. 상단 컴포넌트 아이콘 클릭
2. 단축키 Ctrl+Alt+K
3. 개별 컴포넌트 한번에 등록시 컴포넌트 - create multiple components 선택
4. 등록된 컴포넌트는 asset에서 확인