18기 클래스 리뷰 #14

Chapter 3-7. 머터리얼 디자인 아이콘 키라인 제작 실습

 

 

아이콘 키라인 제작할 것

구글 머터리얼 디자인에서 제공하는 아이콘 가이드를 그대로 활용

 

머터리얼 디자인 아이콘 키라인 제작

아이콘의 경우 키라인에 맞춰서 제작해야 일관성 있는 아이콘을 제작할 수 있다

피그마 > 커뮤니티에서 > icon key line을 검색해서 가져다가 사용 가능하다

 

 

아이콘 비율

 

​정사각형 - 18*18

세로 변이 큰 직사각형 - 16*20

가로 변이 큰 직사각형 - 20*16

원형 - 20*20

모바일 중심 작업을 할 때 4의 배수나 8의 배수를 지켜서 디자인하는 것이 유리하다

 

 

24x24 DP frame - Layout grid (+활성화)

18x18 box - fill 0, stroke 1px, corner radius 1

 

community - icons - plugins - material design icons - try it  > Resource - plugins

To be more accurate disable Snap to pixel grid from preference 

 

규칙이 있는 상태에서 아이콘 제작할 것

 

아이콘 사이즈 가로세로 20DP (24x24)

1) 프레임 선택 >> Layout grid

사이즈 1 - 격자무늬 - 컬러 블랙으로 변경

 

사각형 툴 (18포인트 가로세로)

stoke 0.1 

코너 라디우스 1 + 복제 (ctrl D)

Shift + 로테이트(회전)

20지름 (Stoke 0.1)

 

 

카트 아이콘 실습

홈 >> 커뮤니티 >> 아이콘 >> 플러그인 >> 머터리얼 디자인 아이콘 설치 

 

리소스 >> 플로그 인 >> 머터리얼 아이콘 실행

팝업창 >> cart 검색 >> 드래그 앤 드롭

Ctrl + c >> 삽입

 

 

Chapter 3-8. 컴포넌트 & 오토레이아웃 실습

 

​

컴포넌트 & 오토 레이아웃

1. 오토레이아웃울 활용하여 요소간 배치를 쉽게 적용할 수 있다

2. 컴포넌트를 사용하면 마스터- 인스턴스 관계를 활용해서

오브젝트 재사용성을 늘릴 수 있다. 또한, 이후 베리언츠에서 활용 가능하다

​

컴포넌트 : 반복적으로 사용하는 UI 구격을 규정하는 것

 

디자인은 수정의 연속이다. 

업무 효율을 높여서 작업해야 함!

 

인터페이스 >> Components >> 에셋 페널에서 가져와서 사용!

원본 파일을 수정하면 전체적으로 인테페이스들을 유지보수할 수 있음

 

(실습)

 

컴포넌트 등록 

 

마스터 컴포넌트 - 수정 

컬러변경, 텍스트 수정, 

 

인터페이스들을 컴포터넌트로 등록하면 에셋해서 유지보수 가능함

 

 

오토 레이아웃 기능

 

잘 응용한다면 업무효율이 비약적으로 상승!

>> 연습

 

 

오토레이아웃 >> 레이아웃을 자동적으로 관리하도록 도와줌

 

 

Chapter 3-9. 배리언트 실습

 

 

 

 

 

 

Combine as Varient

통합 >> 버튼 명

 

 

버튼들 >> 규칙 정의!

 

Properties >> 정의 : 이름 명명 

 

 

 

Chapter 3-10. 피그마 프로토타이핑 알아보기

 

베리언츠 실습

- 비슷하지만 약간씩 다른 컴포넌트를 쉽게 관리하기 위해 사용한다

 

 

On tap

On Drag

While hovering / pressing

Key/Gamepad

Mouse Enter/ leave

Touch down / up

 

 

 

 

 

 

응용 실습

 

Instant / Disolve / Smart animate

- 움직임의 수치 조절