제로베이스 콘텐츠 마케팅 8기 #19. 콘텐츠 마케터에게 꼭 필요한 Figma-03

 정렬과 레이아웃

프레임과 레이어

• 프레임 툴 단축키: A 또는 F
• 확대/축소 단축키: cmd +/-
• 피그마의 클리핑 마스크: 클립 콘텐츠 
• 오브제트 위로/아래로 단축키: cmd ]/[
• 오브젝트 잠그기 단축키: cmd shift L
• 그룹으로 다중선택하고 cmd r -> 한글같은 문서 프로그램에서 사용했던 이름 replace 기능이라고 보면 됨 
  
  

정렬과 스마트 셀렉션

• 우측 패널에서 정렬 기능을 사용하면 된다.
• 다중선택을 하고 정렬을 하게 되면 

- 좌측정렬: 가장 왼쪽에 있는 오브젝트를 기준으로 정렬되게 된다.

- 우측정렬: 가장 오른쪽에 있는 오브젝트를 기준으로 정렬되게 된다.

- 가운데정렬: 가장 가운데에 있는 오브젝트를 기준으로 정렬되게 된다.

.이하 동일한 규칙으로 이동

.

.

.

• tidy up은 정렬된 가장 넓은 간격을 기준으로 재배치
• 중구난방으로 배치된 오브젝트 다중선택 후 커서를 바운딩박스 안쪽으로 가져가면 tidy up 빠른실행 아이콘이 뜬다.
• distribute horizontal spacing은 양끝 오브젝트를 움직이지 않고 간격을 조절하여 재배치
• 스마트 셀렉션: 정렬 후 다중선택 후 오브젝트 내부의 원을 드래그해 위치 이동 또는 오브젝트 사이에 위치한 선을 드래그해 간격조절

 

컨스트레인트

• 해당 기능을 이용해 배경과 함께 사진의 한쪽을 고정시켜 늘어나거나 줄어들 수 있다.
• https://m3.material.io/

 

오토레이아웃

• 오토레이아웃 단축키: shift A (단어를 변경하면 자동으로 늘어나게된다. 내부의 포함된 아이템을 감싼 크기를 자동으로 조정하는 기능.)
• 오토레이아웃 해제 단축키: shift option A

 

레이아웃 그리드

• 아이폰들은 프레임 크기가 대부분 홀수로 떨어진다.
• 그리드를 두 개를 만들어서 그리드 내부의 그리드를 만들어준다. 8px하나 1px하나

이 글은 제로베이스 콘텐츠마케팅스쿨 강의자료를 발췌하여 작성했습니다.

• 마진 거터 컬럼-(관련정보 https://heesangs.com/7)
  Margin마진(외부 여백): 화면 좌우에 생기는 여백
  Gutter거터(열 간격): 컬럼과 컬럼 사이에 생기는 커터
  Column컬럼(열, 세로)
  Row로우 (오, 가로)
• 컬럼의 값을 계산 할때
  {프레임 가로값 - 좌우 마진값 - (거터값 x 거터 개수)} / 컬럼 개수 = 컬럼값
• 그리드도 스타일로 등록할 수 있다. (등록예시 grid/desktop(스크린) 1440(사이즈))
• 눈금자(가이드라인) 단축키: shift R
• 눈금자(가이드라인) 꺼내오는 법은 포토샵, 일러스트레이터랑 동일

꿀팁
 동일한 사이즈의 프레임으로 작업하는 경우 마진(좌우여백)을 동일하게 쓰기 때문에 눈금자를 그려주는 것이 좋다. 하지만 눈금자도 오브젝트로 선택이 되어 삭제가 되거나 위치가 바뀌는 등 작업에 지장을 줄 수 있다. 따라서 컬럼으로 가이드라인을 만들어주고 거터를 0으로 만들면 가이드라인 보인다.

• http://gridcalculator.dk/#/1440/12/20/200 그리드 계산기를 활용하여 작업하면 정확한 작업을 할 수 있다.

이 글은 제로베이스 콘텐츠마케팅스쿨 강의자료를 발췌하여 작성했습니다.

꿀팁!
거터, 마진, 컬럼을 입력하고 생성된 페이지 넓이가 프레임 넓이와 다른 경우가 발생할 수 있다. 이럴 땐 차이가 생긴 부족한 픽셀값을 2로 나누어 마진값에 더해준다. 

• 편법이긴 하지만 텍스트를 위한 그리드도 생성하면 편하다. 
  [로우, Type-Top, 거터 0, height=행간값, offset=행간값] <-??? 사실 잘 모르겠음 

이 글은 제로베이스 콘텐츠마케팅스쿨 강의자료를 발췌하여 작성했습니다.

 

 

 

이 글은 제로베이스 콘텐츠마케팅스쿨 강의자료를 발췌하여 작성했습니다.