Note
이 문서는 Figma에서 다양한 스타일의 아이콘을 직접 디자인하고 아이콘팩을 만드는 실습 가이드입니다. 다양한 아이콘 디자인과 제작 규칙들에서 배운 내용을 바탕으로 진행됩니다.
- Figma의 벡터 편집 도구를 사용하여 아이콘을 그립니다.
- 라인, 채워진, 듀오톤 등 다양한 스타일의 아이콘을 제작합니다.
- 아이콘 제작 규칙을 준수하여 일관성 있는 아이콘팩을 만듭니다.
- 제작된 아이콘을 컴포넌트로 만들고 관리합니다.
- 새 Figma 파일 생성: 새로운 Figma 파일을 열어 작업 공간을 준비합니다.
- 아이콘 그리드 설정: 아이콘의 크기(예: 24x24px, 32x32px)를 정하고, 해당 크기의 프레임을 만듭니다. 프레임 내부에 픽셀 그리드를 활성화하여 정밀한 작업을 돕습니다.
- 기본 아이콘 목록 선정: 만들 아이콘의 종류를 미리 정합니다. (예: 홈, 설정, 검색, 메시지, 사용자 등)
- 펜 도구 (P) 또는 도형 도구 활용: 사각형, 원, 선 등의 기본 도형을 활용하거나 펜 도구로 직접 패스를 그려 아이콘의 형태를 만듭니다.
- 선 두께 및 모서리 설정:
Stroke속성에서 선 두께(예: 2px)와Corner radius를 일관되게 설정합니다. - 정렬 및 간격 조절: 아이콘 내부 요소들이 중앙에 잘 정렬되고, 시각적으로 균형 잡히도록 조절합니다.
- Outline Stroke: 아이콘 제작이 완료되면
Stroke를Outline Stroke(단축키Ctrl/Cmd + Shift + O)로 변환하여 벡터 형태로 만듭니다. 이는 아이콘 크기 조절 시 선 두께가 변하지 않도록 합니다.
- 라인 아이콘 기반: 라인 아이콘을 복제하여 시작하거나, 처음부터 면으로 채워진 형태로 그립니다.
- Fill 속성 적용:
Fill속성을 사용하여 아이콘 내부를 채웁니다. 색상은 Day 5: 다크/라이트 테마 디자인에서 정의한 색상 변수를 활용할 수 있습니다. - 형태 다듬기: 채워진 형태가 되었을 때 시각적으로 어색한 부분이 없는지 확인하고 다듬습니다.
- 두 개의 레이어 활용: 아이콘의 형태를 두 개의 레이어로 나누어 그립니다.
- 색상 적용: 각 레이어에 다른 색상을 적용하여 듀오톤 효과를 냅니다. 브랜드 색상을 활용하면 좋습니다.
- 투명도 조절: 필요에 따라 상위 레이어의 투명도를 조절하여 깊이감을 더합니다.
- 컴포넌트 생성: 제작된 각 아이콘을 선택하고
Create Component(단축키Ctrl/Cmd + Alt + K)를 눌러 컴포넌트로 만듭니다. Day 3: 컴포넌트 (Component)를 참고하세요. - 컴포넌트 세트 활용: 동일한 아이콘의 다른 스타일(예: 라인, 채워진)을
Component Set으로 묶어 관리하면 편리합니다. Day 3: 컴포넌트 세트 (Component Set)를 참고하세요. - 이름 규칙: 아이콘 컴포넌트에 명확한 이름 규칙을 적용합니다. (예:
Icon/Home/Outline,Icon/Home/Filled)
Tip
아이콘 제작은 반복적인 연습이 중요합니다. 다양한 레퍼런스를 참고하고, 직접 그려보면서 자신만의 스타일을 찾아보세요.
Note
다음 내용인 디자인 시스템의 개념과 구축 방법에서는 아이콘팩을 포함한 디자인 시스템의 전반적인 개념과 구축 방법에 대해 학습합니다.