Day 5 (1주차)
| 시간 | 학습내용 | 소요시간 | 메모 |
|---|---|---|---|
| 아침 | 피그마 4강 | 3시간...? | 피그마로 학습내용 정리하느라 시간이 좀 걸림 |
| Arvo | 피그마 5강 | 2시간 40분 | |
| TIL 작성 & 피그마로 썸네일 만들기 | |||
| Evening | 인스파이어드 읽기 |
Figma 4~5
4강 : 컴포넌트 프로퍼티
5강 : 화면설계, 프로토타입, 핸드오프
Component Property
- 컴포넌트 pseudo state를 만들 기능. i.e. 컴포넌트 속성 제어
- 하나의 component를 효율적으로 활용하게 함.
Variants
- 프로퍼티의 한 종류.
e.g. 버튼 버튼 버튼 와 같은 베리언츠
- 프로퍼티는 디자인 구조 유지하되 그 안에있는 요소를 바꿀 때
- Variants는 foundation 요소가 변경될 때 (색상, 크기, 폰트의 값이 바뀌면...)
프로퍼티는 옷 입히기, 베리언츠는 마네킹 만들기
Boolean - Y/N
- 레이어를 껐다 켰다 함.
Instance Swap (Instance a Instance b)
- 반드시 인스턴스끼리 교체.
Text
- 텍스트 속성 창
Button - Pseudo
-
마스터 컴포넌트 - 인스턴스 컴포넌트
- 언리얼 Master Material, MI와 같은 개념.
- 인스턴스는 여러 속성들을 속성 패널에서 조절할 수 있고, 마스터는 어떤 속성을 활성화 할지 정하는 역할
-
프로퍼티 적용시키는 위치
- Boolean: Appearance 탭.
- Instance Swap: Instance 이름 (패널 상단).
- 프로퍼티 적용은: ❖ (컴포넌트 아이콘) 활용.
Comp Component (합성 Component)
- Create component set: 선택 프레임을 컴포넌트 속 Variant로 생성.
화면 설계
-
Hero 영역: main에서 가장 중요
e.g. 메인 배너 -
앱바 컴포넌트: 화면 상단에서 네비게이션 역할.
e.g. 현재 위치, 뒤로 가기 등 -
리스트 컴포넌트: 동일한 형태의 정보 덩어리를 반복적인 패턴으로 구성.
-
Global margin: 앱 화면 전체에 적용되는 margin. (16~24px이 일반적)
프로토타입
- lo-fi / high-fi 구분
스크롤 컨테이너
- 오버플로우: 프레임 밖으로 콘텐츠가 넘어가는 것
- 오버플로우 X 스크롤 X
- 스크롤은 '화면 프레임'에 적용 (스크롤 되는 콘텐츠 X)
플로우
- 트리거 — 언제 액션을 수행?
- 액션 — 무엇을?
- 애니메이션 — 트리거 액션 어떻게?
스마트 애니메이트
- 움직일 요소 이름, 레이어 구조가 동일해야 함.
핸드오프 (Handoff)
- 개발자에게 전달하는 문서.
Rule
1. 구성 통일 (e.g. 색 설명 간격 등).
2. 최대한 자세하게.
3. 개발·기획자가 알기 쉽게 쉬운 언어로.
구성
1. 디자인의 전체 구조 (어디에 무엇이 있는지)
2. 규격 (각 프레임의 크기·길이·간격·여백)
3. 사용된 폰트, 컬러 스타일, 사용된 UI etc.
4. 애니메이션, 인터렉션.
- I.E. 핸드오프 = 문서로 이뤄지는 커뮤니케이션
유용한 플러그인 : DesignDoc
