피그마 기초 강의 5-1
이번에 배울 것
- 화면 단위의 ui 디자인 설계
- 프로토타입의 개념을 이해하고 피그마에서 프로토타이핑 해보기, 스마트 애니메이트 알아보기
- 지금까지 레고 블록들을 만들어봤다면 이제는 레고를 쌓아서 파츠를 만들어보기
피그마 기초 강의 5-2
화면 디자인 실습 - 홈 화면 만들기
- 1배수 화면이란?
피그마에서 디자인을 하기 위한 기준사이즈
일반적으로 375x812 or 360x800 - hero section 히어로 영역
가장 상단에서 이끌면서 가장 중요한 메세지를 전달하는 영역(ex)메인 롤링배너) - 앱 바(App bar = Navigation Bar) 컴포넌트
네비게이션 분류, 앱 화면의 이름을 알려주면서, 이전 화면으로 돌아갈 수 있도록 해준다 + 보조기능 제공
피그마 기초 강의 5-3
화면 디자인 실습 - 목록 화면 만들기
- 컨테이너 중 하나
- 동일한 형태의 정보 덩어리를 반복적인 패턴으로 보여줄 때 사용
피그마 기초 강의 5-4
화면 디자인 실습 - 상세 화면 만들기
피그마 기초 강의 5-5
화면 디자인 실습 - 로그인 화면 만들기
- Global Margin
전 앱에 동일하게 적용되는 마진값
-safe area
안전 영역(작업 영역)
피그마 기초 강의 5-6
프로토타입과 프로토타이핑
- 프로토타입
시제품(테스트제품)
-
Lo-fi - 고퀄리티
-
Hi-fi - 하이퀄리티
부족하거나 놓친 부분을 확인하고, 시각적인 결과물로 소통할 수 있으며 출시 전 빠르게 아이디어를 검증할 수 있다. -
장점 - 직관적, 빠르고 간편
-
단점 - 실제 제품처럼 동작하는 걸 만들기 어렵고, 효율성을 떨어트린다.
-
구성 - 시작점(hot spot) - 연결선(connection) - 종착점 (Desination)
-
Priview mode
shitf + space -
Present mode
우측 상단 플레이버튼
피그마 기초 강의 5-7
프로토타입과 스크롤 컨테이너와 오버플로우
- Overflow 오버플로우
프레임 밖으로 컨텐츠가 넘어가는 경우
스크롤로 보여주는 것
(오버플로우가 되지 않으면 스크롤이 생기지 않음)
- 스크롤 컨테이너
오버플로우가 생긴 프레임을 스크롤로 만들어주는 프로토타입 기능
<스크롤 방식>프로토타입 패널에서 선택
- No scrolling
- Horizontal
- Vertical
- Both directions
피그마 기초 강의 5-8
화면 디자인 연결하기
- 플로우(개별적인 흐름 하나)의 구성
- 트리거(이벤트)
- 애니메이션
- 액션
= ~하면 ~하게 ~한다.
- 스마트애니메이션 실습
피그마 기초 강의 5-9
디자인 핸드오프
- 핸드오프
개발자에게 전달하기 위해 디자인 사양을 정리한 문서, 가이드라인
최대한 자세하게, 통일된 구성으로, 쉬운 언어로 작성해야 한다.
커뮤니케이션이 잘 되는 것이 목적 - 핸드오프의 구성
- 디자인의 전체적인 구조
- 각 프레임의 크기 및 길이
- 각 프레임의 여백 및 간격
- 사용된 폰트 및 컬러 스타일 등
피그마 기초 강의 5-10
디자인 공유하기
- 디자인 깔끔하게 정리하기
- 페이지의 이름 변경
- 표지 설정
- 디자인 공유하기
share button - share this file - copy link
프로토타입 공유하기
presentation 화면에서 share prototype - copy link
특정 페이지, 프레임 공유하기
해당 페이지 또는 프레임 선택, 오른쪽 클릭 - copy/paste as - copy link to selection - copy link
