본문 바로가기

기획 tool/figma

[figma] 가이드라인 & 추천 요소 사이트

 

 

IOS / GOOGLE Guideline 가이드라인 정책

애플의 Human Interface Guidelines
https://developer.apple.com/design/human-interface-guidelines
iOS 17 디자인 리소스
https://www.figma.com/community/file/1248375255495415511/apple-design-resources-ios-17-and-ipados-17
구글의 Material Design 3
https://m3.material.io/components
Material 3 디자인 리소스
https://www.figma.com/community/file/1035203688168086460/material-3-design-kit

 

 

※ 예시

다음의 이미지 속 노란 색 부분의 명칭은 환경에 따라 달라집니다.

web의 경우 Header, mobile의 경우 top bar -> bottom bar 등으로 칭하는 것이 다릅니다.

따라서 가이드라인을 참고하여 각 플랫폼 별 명칭을 숙지하는 것이 좋습니다.

 

 

Reference 사이트

pinterest
wwit-윗

 

플러그인 & 폰트

언스플래시 : 무료 이미지 및 사진
https://unsplash.com/ko
언스플래시 플러그인
https://www.figma.com/community/plugin/738454987945972471/unsplash
컬러 제너레이터
https://mycolor.space/?hex=#4A51E9&sub=1
눈누 : 상업적 이용 가능한 무료 폰트
https://noonnu.cc/
추천 폰트
https://cactus.tistory.com/306
추천 마이콘
https://www.figma.com/community/file/1014241558898418245/material-design-icons

 

다음의 내용은 프로그래머스 정다영님의 "[웹개발/초급] Figma를 활용한 UI 제작하기"를 바탕으로 합니다.