프로덕트 디자인 입문 - ch 3-1, 3-2

피그마에서 새 파일, 프레임 생성하기

⬆️ Drafts, New design file	⬆️ Frame 선택 후 1) 드래그 or 2) 규격 선택

 

✔️ 툴

	Move : constraints 규칙 따라 요소 자동 배치, 선택 툴, 단축키 V (shift 누르고 확대하면 비율 유지 가능) Scale : [constraints] 무시, 하위 레이어도 비율대로 확대됨
✔️메인메뉴 ➡️ ctrl + P로 quick actions	✔️ Frame : 컴포넌트 안의 영역 분할을 나누는 틀, nested frame, auto layout mode ✔️ Move와 Scale	✔️ 도형 툴 / 사진 삽입 ✔️ 펜 - 점과 커브(패스) 기준의 도형 그리기, 펜슬	⭐ 컴포넌트, 플러그인, 위젯 유저들이 만든 플러그인, 위젯으로 간편하게 디자인 가능

+  root frame vs nested frame

root frame : 피그마 화면 가장 바깥쪽 프레임

nested frame : 루트 프레임 안의 하위 프레임, 상위 프레임 움직이면 하위 프레임도 영향 받으며 auto layout 변형, 그룹 해제로 없앨 수 있음

 

⭐ Frame selection : 오브젝트 만든 이후 감싸는 방식의 프레임 만들기, 오브젝트 선택 후 마우스 오른쪽 누르고 frame selection, ctrl+alt+g

 

- Slice : 원하는 영역 선택 후 스크린샷처럼 계층 무시하고 이미지 추출 가능, 상위 프레임으로 감싸고 clip content 눌러 내보내도 동일한 결과물

 

---

 ➡️ 누끼 따기

포토샵 해봤으면 무난하게 가능할 것 같다

+ 상단 우측 snap to pixel grid 해제하면 그리드 스냅 없앨 수 있다

펜툴로 아웃라인 따기 ➡️ 도형 생성 후 fill(shift+X) ➡️ 클리핑 마스크

---

 ⭐ Resources (shift + I)

 

 

 

 제일 중요한 기능, Component에서는 직접 설정한 디자인 애셋의 확인 가능

Plugin에는 업무 효율화 툴

Widgets에는 상호작용에 유용한 여러 기능

 

 

 

 

 

💫 Hand : 캔버스 이동 시 (H, + or -)

Move에서 스페이스바 누른 후에 드래그해도 같은 효과, 트랙패드 제스쳐로도 가능함

✔️ Add comment(맨 마지막 아이콘)

코멘트 기능으로 타인과 의사소통 가능, 계정을 태그하여 코멘트 달기(C)

---

프리텐다드 사용했습니다

---

⭐ 컴포넌트 component : 오브젝트를 복제해 활용할 수 있는 피그마의 핵심 기능, 애셋을 컴포넌트로 지정하고 해당 애셋 복제하여 인스턴스로 만드는 방식, 컴포넌트를 수정하면 모든 인스턴스를 한 번에 바꿀 수 있음

⭐ 컴포넌트 : 본체 ➡️ 인스턴스 : 컴포넌트의 영향을 받는 각각의 복제본

+ 특히 카드 형태의 UI의 재사용시에 편리함, 상단의 다이아몬드 버튼을 누르면 오브젝트 ➡️ 컴포넌트로 변화함(보라색)

✔️ 2개 이상의 오브젝트를 한 번에 컴포넌트로 바꿀 수 있음

➡️ 드롭다운 메뉴에 create multiple components 이용하기

---

1. 메인 컴포넌트는 관리하기 쉽게 따로 빼기 2. 반복적인 애셋은 동일한 컴포넌트로 만들기 3. 캐러셀 UI에 [Auto layout] 적용해보기 ➡️ 나중에 해보기

✔️ 컴포넌트 오버라이드 초기화

오버라이드 : 인스턴스의 큰 틀 유지하며 세부 요소 수정하는 것

- 컴포넌트의 일부 초기화 혹은 전체 초기화 가능

lightest 옆쪽의 연결끊기 누르면 인스턴스 자유롭게 변경 가능 / 오버라이드 초기화 상단 맨 왼쪽 버튼