망키님의 목표 : 프로덕트 디자인에 참여할 수 있는 피그마 사용법
모바일 기반 가이드 만들기 → 1) 그리드 2) 텍스트 3) 색상
피그마로 누끼 딸 수 있나요? → 네!
Mobile Design Guide
0. Artboard size
: 375x812 px
1. Layout grid (우리가 사용할 것)
우리가 사용할 것) Grid | 콘텐츠를 구성하는 데 사용되는 일련의 교차 직선 또는 곡선으로 구성된 구조 |
Columns | 열이 어떻게 구성되어야 할 지에 대한 구조 |
Rows | 행이 어떻게 구성되어야 할 지에 대한 구조 |
1-1. Columns에서 설정하기
Count | 4px |
Margin | 16~20px |
Gutter | 8px |
* 정답은 없음. 단, 8/4/2의 배수 순으로 권장함.
2. Font
* 단, IOS/AOS 개발자와 협업해야 하는 경우에는 네이티브 폰트 사용을 권장함
IOS | SF Pro Display (영문), Apple SD 산돌고딕 NEO (국문) |
AOS | Roboto(영문), Noto Sans(국문) |
2-1. Text Styles 설정하기
Head | ~40px |
Sub title | ~24px |
Body | ~16px |
Sub body | 12px~ |
* 단, 12px 아래로 내려가지 않도록
3. Color
Grey | #000000 기준으로 단계 설정 |
Main (Primary) | 브랜드 키컬러 |
Sub
(Secondary) | 보조 컬러 |
+ | 경고 컬러 |
3-1. Color Styles 설정하기
Black | Grey6 | Grey5 | Grey4 | Grey3 | Grey2 | Grey1 | Grey0 |
#000000 | #444444 | #666666 | #888888 | #AAAAAA | #DDDDDD | #EEEEEE | #F6F6F6 |
+ 피그마로 누끼따기!
이렇게 만들려면, 누끼가 필요해!
•
Pen tool
다운로드 받아서 같이 실습해봐요!
Self Study →
이제 우리도 이런 거 만들기 가능~!
실습 자료
