프레임(단축키:F)
- 작업을 진행할 툴 (프레임=아트보드)
- 매우 다양한 프레임이 있음
- 중첩 가능함
- 일반 오브젝트처럼 모서리 둥글기, 배경색 적용 가능
f →
shift드래그 : 정사각형
f →option드래그 : 중앙에서 시작
f →option+shift드래그 : 중앙에서 시작하고 정사각형
clip content
 |  |
|---|
- clip content 활성화 시 → 해당 frame 크기를 넘치는 컨텐츠를 클리핑(숨김) 처리 할 수 있음
- 사용이유 : 스크롤 할 수 있는 영역이나 이미지가 포함된 카드 요소에서 가시적인 영역을 조절할 수 있음
Constraints
요소를 담고 있는 프레임을 기준으로 요소의 위치와 크기 통제
 |  |
|---|
요소를 Left and right으로 지정하게 되면 프레임의 넓이를 넓혔을 때 프레임만 옆으로 늘어나고 가운데 요소가 그대로인 것을 확인 할 수 있다.
가이드(shift+R)
- 오브젝트를 더 섬세하게 작업할 수 있도록 도와주는 안내선
- 가이드는 눈금자에서 드래그해서 생성
가이드 삭제
- 가이드 생성과 일하게 눈금자까지 드래그
- 삭제하려는 가이드를 선택해 해당 가이드 선이 파란색이 되면 delete
그리드
격자나 바둑판 모양의 눈금을 의미하고 디자인 레이아웃에 규칙을 부여하는 수단으로 디자인이 동일한 그리드 규칙을 가지게 되면 일관된 UI를
- 사이즈, 색상 변경 가능
- Columns
- 지정한 색상에 맞추어 만들어진 선
웹 : 컬럼 12-13개
타블렛 pc : 컴럼 6-8개
모바일 : 컬럼 2-4 개
→ 기기의 해상도가 작아지면 컬럼의 갯수도 작아진다.
- Gutters : 컬럼 사이의 여백 → 컬럼의 갯수에 따라 거터의 갯수도 달라짐
- count : 컬럼의 갯수
- Margins(Grid에서) : 프레임 가장 좌, 우측에 있는 여백 칼럼과 화면과의 간격
grid calculator : http://gridcalculator.dk/
