#2 피그마로 아이콘 제작 Tip (feat. Shape Booleans 기능)

figma를 처음 접하는 분들을 위한 기초 강좌 영상입니다.  Shape 툴과 Pen 툴을 사용하여 머터리얼 아이콘을 제작해봅니다. 

[피그마 기초 Part2 - 영상 목차] 

• 00:00 Intro
• 00:09 1/6 Material Design - System Icon 개요
• 01:16 2/6 Layout Grid & Keyline 제작 [🔗연관 figma file]

  

  Keyline 샘플 파일을 복제하는 방법 예시

• 06:18 3/6 도형 툴 {Shapes, Booleans}
• 08:54 4/6 아이콘 Export & Import {SVG}
• 10:33 5/6 펜 툴 {Pen, Outline Stroke}
• 12:14 6/6 기타 유용한 사용 Tip {좌우 상하 반전}

 

 

아이콘 제작 시 유의사항 1 - Constraints

frame 안쪽 객체의 "Constraints 옵션을 반드시 Scale로 설정"해줘야 합니다. 만약 Scale로 설정 안했을 경우, frame의 크기를 변경 했을 시 객체가 frame기준으로 Scale 되지 않습니다. {영상으로 보기}

아래 예시 이미지를 참고해주세요.

Constraints의 옵션을 Scale로 설정하면 아이콘의 크기를 확대 시, frame 크기와 동일한 비율로 확대(Scale)됩니다.

---

아이콘 제작 시 유의사항 2 - Pen 툴로 제작 시

Stroke으로 아이콘을 제작한 경우 Outlined Stroke로 Shape 속성으로 변환 필요
Pen 툴로 그린 Outlined 아이콘의 경우, 라인 속성(Stroke)을 Shape로 변환해야 아이콘의 사이즈를 확대했을 때,
감싸는 프레임의 비율과 동일하게 Scale 가능 {영상으로 보기}

아래 예시 이미지를 참고해주세요.

A. Outlined Stroke가 적용 안된 Stroke 아이콘을 두 배 확대 시

* Outline Stroke 단축키 : Stroke 객체 선택 후 Shift + Command(Ctrl) + O
Tip. 추후 있을지도 모를 수정울 위해 Outlined Stroke 이전 원본은 가능하면 유지합니다. 

B. Outlined Stroke가 적용된 Stroke 아이콘을 두 배 확대 시

마찬가지로, Frame안에 아이콘 객체의 Constraints 속성을 모두 Scale로 체크 

---

 

Figma 관련 UI kits 및 아이콘 샘플 자료

Figma Kits 샘플 모음 #ux #figma #wireframe

아이콘 무료 Kits

 

다음 영상 바로가기

Part 3 #버전관리 #스타일링 #디자인 시스템 #컬러 시스템

 

figma Desktops App Download

Download Figma Desktop Apps, Mobile Apps, and Font Installers

 

---

연정's figma - Youtube 채널

구독과 좋아요는 힘이 됩니다. 

연정's Figma