콘텐츠 마케팅스쿨 스터디노트 - 13일차 피그마 4

오늘은 피그마 프레임 관리와 오브젝트 정렬 등에 대해 공부했다.

 

 

피그마의 프레임

• 컨트롤 키와 0번을 눌러서 100% 화면에서 어떻게 보여지는지를 확인
• 피그마에서는 프레임을 오브젝트처럼 인식
• 프레임 안에 프레임을 생성할 수도 있고 프레임과 프레임을 전체 선택을 해서 그룹으로 만들어 줄 수도 있음
• 오브젝트 안에 들어가 있을 때는 바탕 화면을 클릭을 했을 때 프레임이 선택이 되지 않음
• 프레임을 선택을 할 때는 이름을 선택을 해야 프레임의 옵션들을 볼 수 있음

 

아트보드 내에 형태 귀속하기

• 클릭 콘텐츠 기능이 체크하는 것을 더 권장
• 아트보드 내에 형태를 그리면 아트보드 내의 형태가 귀속됨. 아트보드 밖에서부터 오브젝트를 그렸을 때는 아트 보드 안에 오브젝트가 귀속되지 않고 아트보드 밖에 만들어짐
• 움직이는 프로토타입을 만들기 위해서 형태들이 조금 밖으로 나가게 되는 경우들이 있는데 이때 잘못하게 되면 들어왔다 나갔다 하다가 덜 퍼지는 경우들도 있음
• 항상 이게 체킹 되었는지 반드시 확인할 것

 

그룹 만들기

• 그룹 생성 단축키 ctrl g
• 그룹 해제 단축키 ctrl shift g
• 컨트롤 키를 누르고 대괄호 왼쪽 순서가 한 칸씩 뒤로 내려가게 됨
• ctrl shift 대괄호 - 맨 뒤로 보내기

 

오브젝트 잠금

• ctrl shift i
• ctrl h 레이어 켰다 끄기

 

오브젝트 정렬

• 오브젝트 다중 선택 후 얼라인 레프트를 누르면 가장 왼쪽 오브젝트의 왼쪽 기준으로 정렬
• 중앙은 가장 긴 오브젝트 중심으로 중앙 정렬/ 우측은 가장 긴 쪽에 가장 오른쪽에 있는 오브젝트의 오른쪽 기준으로 정렬
• tidy up을 눌러주면 가장 넓은 간격을 기준으로 동일한 간격으로 정렬

 

오브젝트 간격

• 오브젝트 선택 후 tidy up을 누르면 간격이 바뀜
• 오브젝트 선택 후 tidy up 선택 후 안쪽 원을 선택하면 같은 간격으로 배치
• 오브젝트가 두 개 있을 때는 간격과 상관없이 동그라미 생김 / 두개 이상 같은 간격일때만 동그라미 생

 

스마트 셀렉션

• 크기를 늘리거나 줄일 수 있음
• Constraint 적용하기 위해서는 프레임 설정해야 함 - 캔버스 자체는 무한한 공간이라 넓이나 높이가 지정되어 있지 않기 때문

반응형 Constraint

• 반응형 화면을 위해 적용

 

오토 레이아웃

• 마우스 우클릭 후 add auto layout 입력
• 단축키 shift a
• 내부에 포함된 아이템을 감싼 크기를 자동으로 조정하는 기능
• 마우스 우클릭 후 리무브 오토 레이아웃 우측 마이너스로 오토 레이아웃 기능 삭제 가능
• 오토 레이아웃 해제 단축키 shift alt a

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

 

---

그룹 생성은 ctrl g인건 알고 있었는데 해제 단축키는 몰라서 맨날 마우스로 해제 하고있었는데...이제 마우스를 비교적 덜 쓰고 편하게 작업할 수 있게 됐다!

 

다음 시간에는 피그마 파트 마무리 후 실전 포토샵 파트까지 나갈 예정이다