[제로베이스 콘텐츠 마케팅 스쿨] 스터디 노트 + 데일리 원미션 DAY5

[스터디 노트] Part 02. Figma 기초 및 실습 - Chapter 04~05

 

 

Chapter 04. 그래픽 스타일의 적용

 

공동 작업 시 Hex 코드로 색상 공유

- I : 색상 스포이드

- 계속해서 사용하는 색상 스타일 등록 가능

- 스타일에 등록된 색상 변경 시 동일한 색상 전체 변경

- (Action) tailwind color generator : 색상 단계 별 생성

 

Tokens Studio for Figma

개발자들과 작업 내용 공유 가능

 

Font Family / Font Weight(XXL, XL, Large, Medium, Small) / Line Height (140, 150, 160)

Heading / Lable / Paragraph

(그룹명).(폰트 사이즈) -> Heading.Large

 

Solid 단색 / Gradient 두 가지 이상 색상

Effect - Drop shadow 그림자 설정

command + option + C/V : 속성 복사/붙여넣기

command + D : 오브젝트 복제

 

command + shift + K : 이미지 불러오기

이미지 열기 - 도형 위에서 클릭 : 도형 내 이미지 넣기

무료 이미지 사이트 : pexels, pixabay

Plugins : Iconify, Unsplash, Material Design Icons

 

 

Chapter 05. 정렬과 레이아웃

command + +/- : 줌 인/아웃 (선택한 프레임을 기준으로)

오브젝트가 있는 상태에서 프레임 설정 하기 = 프레임 외부 선 더블 클릭

clip content : 프레임에서 벗어난 오브젝트 숨기기

command + shift + H : 숨기기

 

Alignment 정렬 설정 (오브젝트 두 개 이상 선택 시 오브젝트 간 정렬)

- Tidy up 오브젝트 간 간격 동일하게 조정

Smart selection 오브젝트 순서, 간격 조정

 

Constraints 

프레임에 맞춰 늘어날 부분(=고정) 설정 (추가 시 shift 누른 채 클릭)

Center : 프레임 중앙에 고정

Left/Right : 좌우 간격을 맞춰 고정 (오브젝트 크기 바뀔 수 있음)

 

- shift + A : 오토 레이아웃 (여러 개의 오브젝트가 하나의 프레임으로 묶임)

- shift + alt + A : 오토 레이아웃 해제

- command + shift + G : 그룹(프레임) 해제

- 오브젝트 개별 선택 시 더블 클릭 - 방향키로 순서 변경 가능

- Hug : 오브젝트에 프레임 맞추기

- 간격 Auto : 프레임 크기에 맞춰 간격 설정

프레임 내 정렬 설정 가능

- Padding 문자를 감싸고 있는 도형의 간격

 

- shift + R : 자 + 가이드

 

[데일리 원미션] 실습 결과물 캡쳐해서 올리기