Figma iOS 아이콘 사용하기

iOS에서는 아이콘을 아이콘 폰트로 사용하고 있어요

그 사용방법에 대해 알아볼게요

 

 

1. SF Symbols를 다운 받아 주세요.

 

https://developer.apple.com/sf-symbols/

 

 

 

 

2. SF Symbols를 실행시키고 원하는 폰트 찾기

SF Symbols 실행시

카테고리 별로 분리가 되어 있어 쉽게 찾을 수 있어요.

원하는 아이콘을 검색해서 작성중인 피그마 파일에 ctrl+C,V 해주기.

붙여넣기하고 아이폰 폰트인 SF Pro로 해주셔야 아이콘이 보임니다.

폰드 기반이라 두께조정도 가능하고, 폰트 크기로 깨짐없이 사이즈 조절도 가능해요. 

폰트 크기 조절에 따라 아이콘의 두께도 달라져서 폰트가 작아질 경우 

모바일 폰에서는 잘 가동하나, 데스크탑에서는 심미성이 떨어지는 단점도 있다.

SVG를 아이콘이 깨져 보이는 거 보완 가능하다.

 

 

 

직접 아이콘 작성시 가이드 팁!

구글 머티리얼 디자인 아이콘 가이드를 보면 쉽게 알 수 있다.

써클이 스퀘어보다 공백이 있어서 좀 더 크게 만들어야 한다는 것!

https://material.io/design/iconography/system-icons.html#grid-and-keyline-shapes

구글 머티리얼 디자인 가이드 아이콘1

 

 

 

구글 머티리얼 디자인 가이드 아이콘2