yooonicode
프로덕트 디자인 입문 - ch 3-3, 3-4 본문
- 피그마의 왼쪽 사이드바 : layers 패널, Alt+1로 빠른 실행 가능
> 대부분의 디자인 툴에서 요소들의 순서, 종류, 계층을 관리하는 개념 : 레이어
만드는 모든 오브젝트의 질서를 관리하며 만들면
구조적으로 디자인 애셋을 관리할 수 있음
프레임, 그룹, 인스턴스 등의 다양한 속성의 에셋들이 레이어 안에 포함됨
ctrl+\를 누르면 좌우 패널을 숨길 수 있는데, 프레젠테이션 시 사용한다.
- 레이어 패널에서 레이어를 클릭하면 묶인 레이어를 한꺼번에 선택할 수 있음
- Ctrl + 클릭 ; 맨 안쪽의 오브젝트 선택 가능
- Ctrl + Alt + [ or ] ; 레이어 순서 바꾸기
- 컴포넌트나 인스턴스처럼 복제 가능하면 보라색으로 표시됨
✔️ 하나의 피그마 파일에서 캔버스를 여러 개 쓰고 싶다면? 페이지 이용해 디자인 분리
communication, drafts, components, UI, prototyping과 같이 분류하는 것을 추천
⭐ 애셋 패널로 컴포넌트 관리하기
프로페셔널 플랜부터는 라이브러리 기능을 가지고 있는데, 다른 피그마 파일의 컴포넌트를 사용할 수 있는 라이브러리 창을 열 수 있게 해줌(스타터 플랜은 제한적)
✔️ 콘텍스추얼 툴 - 사용자의 행동에 따라 맥락에 맞는 기능을 보여줌
- 폴더명, 파일명 : 파일 이름을 변경할 수 있음, 폴더 파일로 이동 가능, 드롭다운 UI로 주요 기능 확인
- 도형을 합치거나 나누기, Boolean groups - [패스파인더] ; 합치거나, 빼거나, 겹치거나, 제외하는 식으로 조합 가능
+ 단, 일러스트레이터처럼 병합(flatten)되는 것이 아닌, 원본 도형을 편집할 수 있게 됨 ➡️ flatten selection 선택하여 완전한 병합이 가능하다
- Use as Mask ; 레이어 2개 이상 묶일 때, 필요한 부분만 보여주려면 마스크 기능을 확인해야 함, 여러 개 겹치므로 순서 주의, 마스크 영역으로 사용할 레이어는 맨 아래에 배치하여 모두 선택한 상태에서 기능 적용하기(마스크 레이어에 fill, stroke 등이 들어있어야 함)
- Edit object ; 도형이나 텍스트 선택 시에 편집 모드로 세밀하게 수정 가능, 복잡한 디자인 그래픽에 주로 사용함
- Crop Image ; 이미지를 잘라내는 기능, 원하는 부분을 테두리부터 잘라낼 수 있음, 엔터를 눌러 작업 완료
- Create Link ; 글자상자를 클릭하면 링크 삽입 가능, 클릭해 연결해둔 외부 사이트로 이동하기
'피그마 | UI,UX' 카테고리의 다른 글
| 프로덕트 디자인 입문 - ch 4-4, 4-5, 4-6 (0) | 2023.09.30 |
|---|---|
| 프로덕트 디자인 입문 - ch 3-1, 3-2 (0) | 2023.09.11 |
| 프로덕트 디자인 입문 - ch1, 2 (0) | 2023.09.05 |
