책 제목 : 실전 피그마UI/UX 디자이너, 서비스 기획자를 위한 실무 입문서 / 김범용 (스무) 지음 읽은 부분 : PART 5. 컴포넌트 & 배리언츠 적용하기 > chapter 02.컴포넌트로 아이콘 관리하고 사용하기 인상 깊게 본 내용 : 02) 컴포넌트로 아이콘 관리하고 사용하기< PART 5. 컴포넌트 & 배리언츠 적용하기 >
chapter 02.컴포넌트로 아이콘 관리하고 사용하기
컴포넌트를 활용해 아이콘을 효율적으로 관리하고 빠르게 사용하는 방법
1. 아이콘 컴포넌트 만들기
1) 아이콘 컴포넌트 생성하기 (플러그인 활용하여 아이콘 에셋 가져오기)
•
shift + I > 리소스 도구 선택
•
Plugins 탭에서 Icon 검색
•
Feather Icons
2) Feather Icons 플러그인 창에서 원하는 아이콘 선택
3) 불러온 아이콘 레이어가 분리되어 있고, 아이콘이 선 형태로 되어 있다.
(Feather Icons는 사용자가 아이콘 두께 등을 변경하여 사용할 수 있도록 Stroke 형태로 아이콘 에셋을 제공)
4) 컴포넌트로 만들기 전에 레이어를 정리한다. (아이콘 프레임 선택한 다음, Enter를 눌러 하위 레이어 모두 선택)
5) 툴바에서 Union selection 아이콘을 클릭해 레이어를 하나로 합친다.
6) Ctrl+E를 눌러 Union 그룹을 통합하고, 레이어 이름을 'Icon'으로 변경한다.
7) 아이콘 레이어를 통합하고, 선을 면으로 전환한다.
8) 아이콘 프레임을 모두 선택하고 > 툴 바 가운데 Create component 아이콘 옆 확장 클릭 > Creat multiple components 선택해 모든 프레임을 각각의 메인 컴포넌트로 만든다.
9) 리소스 도구를 선택하고 [Components] 탭에서 컴포넌트로 만든 아이콘을 검색해 원하는 페이지에 빠르게 불러올 수 있다.
•
아이콘은 배리언츠를 사용하지 않고 각각의 컴포넌트 단위로 관리하는 것을 권장한다.
아이콘을 배리언츠로 묶어서 사용한다면 프로퍼티를 통해 아이콘을 선별해야 하기 때문에, 아이콘 종류가 많을 경우 프로퍼티 밸류 목록에서 원하는 아이콘을 찾기 어려운 경우가 많다. 리소스 도구에서 원하는 아이콘을 바로 검색해서 사용할 수 없기 때문에 아이콘은 각각의 컴포넌트로 리소스를 관리하면 편리하게 사용할 수 있다.
2. 컴포넌트 스왑하기
1) 인스턴스 컴포넌트 아이콘 선택
2) 오른쪽 Component 패널 확장 아이콘 클릭 > 다른 아이콘 목록 확인 가능
•
모든 인스턴스 컴포넌트는 다른 인스턴스 컴포넌트로 스왑(swap) 할 수 있다.
3) 다른 아이콘 목록을 클릭하면 기존 인스턴스 컴포넌트를 다른 인스턴스 컴포넌트로 변경할 수 있다.
3. 컴포넌트를 그룹으로 구분하기
1) 인스턴스 스왑을 사용하면 모든 인스턴스 컴포넌트를 다른 컴포넌트로 변경할 수 있다.
컴포넌트를 선택한 다음 Crtl+R을 눌러 이름 바꾸기 도구를 실행한다.
•
레이어 이름에 / 를 추가하여 컴포넌트를 그룹화하면 각각의 인스턴스 컴포넌트를 탐색하기 쉽게 만들 수 있다.
•
Preview : 현재 레이어 이름
•
Match : 입력된 문자열을 Rename to에 쓰여진 문자열로 대체
•
Rename to : 모든 레이어 이름을 동일하게 변경
•
Current name : 현재 레이어 이름을 불러옴
•
Numver ↑ : 숫자를 오름차순으로 입력
•
Numver ↓ : 숫자를 내림차순으로 입력
2) Rename to 에 'Icon/' 입력, <Current name> 버튼 클릭하면 미리 보기에서 현재 각각의 아이콘 이름 앞부분에 'Icon/' 이 추가된다. <Rename> 버튼을 클릭하여 수정 내용을 적용한다.
•
'Icon/' : Icon 이라는 폴더로 각 아이콘 컴포넌트들을 그룹화하겠다는 의미
3) 이름이 변경된 아이콘의 인스턴스 컴포넌트를 선택하고 Component 패널에서 인스턴스 스왑 목록을 살펴보면 'Icon' 폴더로 컴포넌트들이 그룹화된다. 'Icon' 부분을 클릭하면 상위 폴더로 이동 및 탐색할 수 있다.
•
레이어 이름에 '/'를 추가하면 또 다른 상위 그룹을 계속 생성할 수 있다.
B그룹 / A 그룹 / 아이콘 이름
4) 프레임으로 컴포넌트를 그룹화할 수 있다.
아이콘 메인 컴포넌트들을 프레임으로 감싼 다음 Ctrl+R 누르고 이름을 'General'로 변경한다.
5) 인스턴스 컴포넌트를 선택하고 Component 패널에서 인스턴스 목록을 연다. 'Icon' 부분을 클릭해 상위 개념을 확인하면 'General'이라는 프레임 이름으로 컴포넌트가 그룹화된 것을 확인할 수 있다.
•
/ 를 사용하지 않아도 파일 안에 있는 컴포넌트 위치에 따라 그룹이 자동으로 분류된다.
•
자동으로 분류되는 컴포넌트의 폴더 구조
파일 → 페이지 → 섹션 or 프레임 → 그룹 이름 / 컴포넌트 이름
6) 아이콘을 용도에 따라 레이어 이름, 또는 프레임으로 분류하여 완성한다.
코멘트아이콘 플러그인 Feather Icons를 활용해서 연습해 봐도 좋을 것 같다. 아이콘을 배리언츠로 등록하지 않고 각각의 컴포넌트로 등록하고, 그룹으로 구분하는 방법을 배웠다. 레이어 이름에 /를 추가하여 그룹화하거나 프레임 또는 파일 안에 있는 컴포넌트 위치에 따라 자동 분류되거나 그룹화하는 것도 가능하다는 것을 알 수 있었다.
어떻게 적용할 수 있을까아이콘은 배리언츠를 사용하지 않고 각각의 컴포넌트로 관리하는 것이 좋다는 노하우를 배웠다.
아이콘이 많을 경우 리소스 도구에서 검색해서 아이콘을 바로 사용할 수 있도록 각각의 컴포넌트로 등록해서 사용하려고 한다.
* 출처 : 실전 피그마