제로베이스 콘텐츠 마케팅 스쿨 스터디 노트 12_피그마(2)

 

05_정렬과 레이아웃

1. 프레임과 레이어

페이지와 프레임

- 프레임 안에 프레임을 만들 수도 있고, 그룹화도 가능

- 오브젝트를 먼저 그리고 프레임을 나중에 그려도 됨

이미지가 프레임 밖으로 벗어날 때 Clip content 해제하면 잘리지 않음

- Clip content 체크하는 것을 권장

- Ctrl + [ : 한 칸씩 뒤로

- Ctrl + ] : 한 칸씩 앞으로

- Ctrl + Shift + [ : 맨 뒤로

- Ctrl + Shift + ] : 맨 앞으로

여러개의 레이어 이름 한꺼번에 바꾸기: 다중선택 후 Ctrl + R

- Match에 \d+ 입력하고 number ↑, number ↓ 누르면 기존 이름 옆에 숫자 오름차순, 내림차순으로 자동반영

- Ctrl + Shift + L: 잠금, 잠금 해제

- Ctrl + Shift + H: 숨기기, 숨기기 해제

 

2. 정렬과 스마트 셀렉션

- Tidy up: 다중선택한 오브젝트 중 간격 중 가장 넓은 간격으로 배열

Tidy up으로 정렬, 동그라미로 위치 변경, 선으로 간격 변경

 

3. 컨스트레인트

- 오브젝트 누르고 Alt 누른 채로 다른 오브젝트 커서 올리면 해당 간격 볼 수 있음

상단바 같은 경우 left and right 설정하여 프레임 길이에 따라 자동 조절

- Constraints 방향 설정시 Shift 누르고 클릭하면 양쪽 전부 선택 가능

- 계속 중앙에 오게 하려면 Center

 

4. 오토레이아웃

https://fonts.google.com/icons

Material Symbols and Icons - Google Fonts

오토레이아웃 설정하면 텍스트 길이에 따라 사각형 길이도 조절됨

- 오토레이아웃 만들기: 다중선택 후 Ctrl + A

- 오토레이아웃 해제: Shift + Ctrl + A

여러 아이콘 오토레이아웃, Ctrl + D로 아이콘 반복 생성

오토레이아웃끼리 오토레이아웃 가능

 

5. 레이아웃 그리드

- Material Design 사이트 활용하기!

https://m2.material.io/

Material Design

Grid

- 시스템 아이콘: 8size로 그리드 그리는 것을 추천

Columns

- margin: 화면 좌/우 여백

- gutter: coloumn 사이에 생기는 여백

- 넓은 화면일수록 좌우에 여백을 많이 주어야 함

가이드 스타일로 설정값 저장해두기

- Shift + R: 안내선 가져오기

안내선 그리드 > 설정한 경우

- http://gridcalculator.dk/

Grid Calculator by Nicolaj Kirkgaard Nielsen

정확한 픽셀수에 맞게 분배할 수 있도록 Margin 등을 조절할 수 있음 ↓

- Shift + 1: 격자 0에 맞추어 화면 보기

- Ctrl + 0: 화면 중앙 정렬

- 레이아웃 그리드 설정 후 레이어 크기에 따라 사각형도 조절되게 하려면?

컨스트레인트 상하좌우 체크하기

 

 

06_컴포넌트와 베리언트

1. 컴포넌트와 인스턴스

- 컴포넌트 생성: Ctrl + Alt + K

컴포넌트(원본), 인스턴스(복제한 것)

- 컴포넌트와 인스턴스의 요소를 변경할 경우 더블클릭하여 레이어 활성화

- 컴포넌트의 설정값대로 인스턴스도 따라 설정됨

- 인스턴스의 설정값을 변경할 경우, 나머지 인스턴스와 컴포넌트의 설정값에는 영향을 미치지 않음

- 인스턴스를 변경한 요소는 더이상 컴포넌트의 요소가 바뀌어도 변화가 없음

- 인스턴스의 컬러, 테두리, 두께, 크기를 변경할 경우 독립적으로 배치됨

등록된 컴퍼넌트는 Assets 탭에서 확인 가능

- 컴퍼넌트는 원본을 삭제하면 Assets에서도 사라지게 되므로, 원본은 남겨두기!

여러개를 각각 컨포넌트 설정할때: Create multiple components

 

 

2. 베리언트의 활용

- 외부에서 컨퍼넌트를 가져올 때는 instance options > Detach instance 하여 해제한 뒤 새로 컨퍼넌트 등록

 

---

수강후기

피그마가 처음 배우기 시작했을 때는 제일 깔끔한 UI 제작 툴이라 생각했는데.. 심화로 갈수록 개발과 디자인 그 어딘가쯤인 것 같은 느낌이 든다... 특히 컴포넌트부터는 너무 어려워서 제대로 이해하고 있는지도 모르겠다 ㅠㅠ 일단 갈길이 머니 완강에 의의를 두려고 한다.

 

 

 

 

 

 

 

 

* 이 글은 제로베이스 강의 자료를 발췌해 작성되었습니다.