04-1 오른쪽 패널 살펴보기

스타일

동일한 작업을 반복할 때 스타일로 묶어 관리해서 반복 작업 줄이기
Background
Text Styles
Color Styles
Grid Styles
Effecs : 그림자, 흐림 효과 등

Design 패널

/오른쪽 패널 design, prototype, inspect 중 하나
레이어를 구성하는 세부적인 값 관리
좌표, 색상, 규칙, 적용 효과 등

정렬하기

오브젝트 선택-아이콘 클릭
오브젝트 여러 개일 경우 여백 맞춰 정렬 o
정렬 대상이 프레임/그룹 안에 있을 경우 그 안에서 정렬

Alt+W,S,A,D : 상하좌우 정렬
Alt+H,V : 수평, 수직 정렬

프레임의 위치와 크기 조절

상단 UI : 크기, 가로세로
수치 직접 입력
모서릿값. Clip content : 다양한 모양
수식 가능(140*3) 등

자동 레이어 간격 조절 Auto layout

웹사이트에서 전체 창 크기 바꿀 때 UI가 함께 늘어나던 것
Shift+A

인스턴스

다른 컴포넌트를 검색해 빠르게 교체 가능
원하는 컴포넌트가 같은 계층(페이지,프레임)에 있을 경우 함께 보여줌
이름에 "/" : 폴더 생김
Detach instance : 컴포넌트와 연결 끊기

04-2 오브젝트 간격과 위치에 규칙 설정하기

화면 크기에 맞춰 레이어 크기를 조절하는 [Constranints]

기기의 다양한 크기에 맞춰 컴포넌트가 어떻게 반응할지 규칙을 정하면, 해상도를 고려하지 못했더라고 대부분 규칙에 따라 대응할 수 있음
적용 시 나타나는 점선으로 규칙 확인 가능
left and right / scale : 레이어 크기가 상위 프레임 크기에 맞춰 늘어나고 줄어든다

그리드를 그려주는 [Layout grid]

그리드 스타일에 등록해 두면 같은 파일에서 계속 사용 가능

04-3 다채로운 그래픽 옵션 알아보기

레이어

디자인 오브젝트 순서대로 쌓기
모드 바꿔 이미지를 겹치고 새로운 분위기 연출
흑백(luminosity) : 비활성화 상태
투명도

텍스트

폰트, 굵기, 크기, 행간(줄 사이 간격), 자간(글자 사이 간격), 문단 간격, 영역(텍스트 박스 영역이 텍스트 영역에 따라 달라지는지, 줄에 따라 달라지는지, 고정할지), 정렬(수평, 수직)

색상 채우기

단색, 그라디언트, 이미지, fill 중첩, 투명도, 채우기

선 설정

생상, 투명도, 방향(path 기준 어느 방향으로 뻗어 나갈지), 두께, 상하좌우 개별 설정, stroke style(실선, 점선), end points(가장 끝부분 화살표, 라운드. 시작과 끝을 알 수 없는 도형은 비활성화), join(모서리)

색상 관리하기

design-selection colors : 내가 선택한 모든 레이어의 색상을 한꺼번에 팔레트로, 위치도

효과 지정하기

그림자, 배경 블러, 그림자효과, 흐린 정도, 퍼지는 정도, 투명도 등