재사용 가능한 아이콘 만들기

주제 : 프레임, 레이아웃 그리드, 도형, 구성 요소

---

이 프로젝트에서는 Figma Design에서 재사용 가능한 24 x 24 아이콘 그리드를 만들 것입니다. 아이콘 그리드는 아이콘 디자인에 대한 일관된 지침을 제공하는 준비된 프레임입니다. 

 아이콘은 일반적으로 집합에 존재하기 때문에 한 아이콘에서 다른 아이콘으로 시각적 일관성을 유지하는 것이 중요합니다. 아이콘 그리드 사용에 대한 자세한 내용은 Material Design의 시스템 아이콘을 확인하세요.

아이콘 그리드를 구축하려면 다음을 수행합니다.

1. 프레임 만들기
2. 레이아웃 그리드를 사용하도록 설정합니다
3. 직교선을 그린다
4. 키 셰이프 추가
5. 아이콘 그리드를 구성 요소로 변환

완료되면 최종 레이아웃 그리드에는 아이콘 디자인을 위한 20 x 20 픽셀의 안전 영역과 2픽셀 너비의 트리밍 영역이 있습니다. 

---

프레임 만들기

1. 도구 모음에서 [프레임] 도구를 클릭하거나 키를 누릅니다.F
2. 누른 상태에서 프레임 도구를 클릭하고 드래그하여 24 W x 24 H 프레임을 만듭니다. 오른쪽 사이드바의 높이 및 너비 설정을 사용하여 크기를 조정할 수도 있습니다.Shift
3. 프레임 이름을 두 번 클릭하고 이름을 "아이콘 그리드"로 바꿉니다.

레이아웃 그리드를 사용하도록 설정합니다

1. 아이콘 그리드 프레임을 선택합니다.
2. 오른쪽 사이드바에서 레이아웃 격자 옆에 있는 더하기를 클릭하여 격자를 활성화합니다.
3. 레이아웃 격자 설정을 클릭합니다.
4. 그리드 크기를 로 변경합니다. 원하는 경우 그리드의 불투명도와 색상을 변경할 수도 있습니다.1

직교선을 그린다

직교는 대칭과 시각적 균형을 유지하기 위해 공통 각도에 대해 아이콘을 정렬하는 데 도움이 되는 선입니다.

직교선 값이 일관되도록 하려면 Icon 그리드 프레임 위에 선을 그릴 것입니다. 선의 속성을 복사하고 튜토리얼의 뒷부분에서 다른 개체에 적용하여 시간을 절약할 수 있습니다.

1. 도구 모음에서 [펜 도구]를 선택하거나 키를 누릅니다.P
2. 캔버스의 두 위치를 클릭하여 아이콘 그리드 프레임 위에 선을 만듭니다.
3. 도구 모음에서 Done(완료)을 클릭하거나 두 번 눌러 Pen 도구를 닫습니다.Esc
4. 방금 그린 선을 선택하고 오른쪽 사이드바의 Stroke 섹션에서 속성을 다음과 일치하도록 조정합니다.
   • 채우다: FF0000
   • 불투명도: 100%
   • 위치: Center
   • 무게: 0.2

직교선 추가

1. 펜 도구를 사용하여 아이콘 격자 프레임 안에 두 개의 점을 만든 다음 펜 도구를 닫습니다.
2. 도구 모음에서 [이동] 도구를 선택하거나 점을 눌러 프레임의 왼쪽 위 및 오른쪽 아래 모서리로 드래그합니다.V
3. 선을 선택하고 바로 가기를 사용하여 복제합니다.
   • 맥 : ⌘ Command D
   • 윈도우: Control D
4. 복제된 선을 선택한 상태에서 바로 가기를 사용하여 가로로 뒤집습니다. 오른쪽 위와 왼쪽 아래 모서리로 드래그하여 프레임에 큰 "X"를 만듭니다.ShiftH
5. 펜 도구를 다시 활성화하고 두 개의 점을 더 만듭니다. 이것이 우리의 수직 중심선이 될 것입니다. [이동] 도구를 사용하여 점을 프레임의 가장자리로 드래그합니다.
6. 선을 두 번 복제하고 한 선은 중심선에서 오른쪽으로 3픽셀, 다른 선은 왼쪽으로 3픽셀 이동합니다.
7. 세 개의 수직선을 복제하고 수평이 될 때까지 회전하면서 누르고 있습니다.Shift

사각형과 사각형을 추가합니다.

1. 도구 모음의 Shape tools 드롭다운에서 Rectangle을 선택하거나 키를 누릅니다.R
2. 프레임 내부를 클릭하고 드래그하여 16 W x 20 H 직사각형을 그립니다. 오른쪽 사이드바의 높이 및 너비 설정을 사용하여 사각형의 크기를 수동으로 조정할 수도 있습니다.
3. 사각형을 프레임의 중앙으로 드래그합니다.
4. 동일한 프로세스를 사용하여 사각형에 선 스타일 속성을 적용합니다.
5. 모퉁이 반지름을 로 변경합니다.1
6. 사각형을 복제하고 Shift 키를 누른 상태에서 90도 회전합니다.
7. 첫 번째 사각형을 다시 복제합니다.
8. 오른쪽 사이드바의 높이 및 너비 설정을 사용하여 18 W x 18 H로 변경하고 프레임 중앙에 배치합니다.

구성 요소 만들기

아이콘 그리드가 완성되었습니다! 이 자산을 재사용 가능한 자산으로 만들고 싶기 때문에 구성 요소로 전환해 보겠습니다.

1. 아이콘 그리드 프레임을 선택합니다.
2. 도구 모음에서 Create component(구성 요소 만들기)를 클릭합니다.

---

System icon metrics

Anatomy

1. Stroke terminal
2. Corner
3. Counter area
4. Stroke
5. Counter stroke
6. Bounding area

---

keyline과 그리드를 활용하여 아이콘을 만들어 보자