[학습일지] 221122 피그마 chapter 1~ 5-1 강의 정리

chapter2. 인터페이스

1)브라우저모드
- 무료판은 팀하나에 3개의 프로젝트까지지만 팀을 하나 더 만들어서 사용하는 식으로 할 수 있다.
- 커뮤니티에 여러 유용한 자료들이 공유되어있다.
- 드래그앤드랍으로 옮길 수 있다.

2)데스크탑모드
- 인터넷이 연결된 경우 브라우저와 동일하게 연동됨. 상단에 데스크탑,브라우저 공동 작업표시가 있음

 

3)에디트모드
툴바, 레이어패널, 속성패널
* Quick Action (Ctrl+/) : 검색기능. 많이 씀. 기능검색이 가능하다.

 

- 기본 툴
1. Move(V) Scale(K)  스케일은 같은 비율로만 움직인다. (Shift+move로 가능)

2. Frame(F) Slice(S) 

Slice : 작업영역 특정부분 자르기

+ Section(Shift+S) : 최근에 업데이트된 기능. 여러 프레임을 섹션으로 묶을 수 있다고 함

3. 도형툴
4. 펜툴 - Pen(P) Pencil(Shift+P)
5. 텍스트(T)
6. 손바닥(Space)
7. 코멘트(C) 코멘트를 남길 수 있다

오브젝트 선택 시 상단 메뉴.

컴포넌트 생성(Ctrl+Alt+K)/마스크(Ctrl+Alt+M)/불리언/레이어병합(ctrl+E)

도형 선택 시 상단 메뉴

 

- 왼쪽
1. 레이어 - 커서 대면 표시됨. 잠그기, 안보이기

2. Asset
컴포넌트. 드래그 앤 드롭으로 복붙가능 
팀 라이브러리 - 공유/협업에서 자세히

 

- 우측위
Share(유료) - 링크 공유 /  옆 삼각형 - 프로토타입 미리보기 (신기하다)

줌(%)

 

- 우측 속성패널
Design
Prototype
Inspect - 스케치,XD와의 가장 큰 차이점! CSS소스가 표기되어 개발자들과의 공유가 용이하다

- 아래쪽 물음표
단축키들을 한눈에 볼 수 있다 (홈화면의 물음표에선 나오지않음)

 

Chapter3. 형태 만들기

3-1 기본도형

background - 배경색을 바꿀 수 있다.
* 실행 되돌리기 : Ctrl+Shift+Z (Ctrl+Y아닙니다)

Frame - 화면에 드래그도 가능.

프레임 속성
- Auto layout/Layout grid - 추후 자세히
- Layer - 아트보드 눈감기 할 수 있음

사각형툴(R)
- 사각형을 그리고나면 자동으로 Move툴로 전환된다.
이 기능을 끄고싶으면 Preferences - Keep tool selected after use
- 오른쪽 속성 - 비율잠금기능
- 모서리 : Alt키를 누르고 점을 움직이면 한쪽만 조절가능
* 피그마에서는 Ctrl+A누르면 아트보드까지 선택이 된다.
도형만 지우고싶을땐 프레임을 잠구고 전체선택해서 지우기

원(O)
원 누르면 나오는 점으로 팩맨마냥 조절 가능. 
회전해서 돌릴 수도 있겠지만 점으로 조절하면  위치 유지가 가능함.
중앙부분 누르면 안에서부터 사라짐.

 

3-2 다각형,별,화살표

다각형은 단축키 없음.
폴리곤 - 점으로 Radius조절.
Count - 다각형으로 만들수 있다 3,4,5,6..각형 최대 60각형
속성의 Count에서 수치입력으로도 가능하다. 위에다 드래그해도 ok

별툴 - Count, Ratio, Radius
뾰족뾰족, 톱니바퀴모양 만들기가 가능
화살표 - 끝부분모양, 화살표모양 등등 조절 가능.

3-3 선
선 속성(outside,center,inside), 대쉬

펜툴(P)

-Blend(Ctrl): 컨트롤+클릭 시 곡선>직선,직선>곡선

처음에 앵커점을 찍고 드래그해서 핸들러 만들 수 있음. Alt+핸들러조절 시 한쪽만 (XD와 같음)

- Paint bucket(B): 면채우기

- 종료: ESC

- 더블클릭, 에딧모드로 들어옴

- 패스 위 +, 앵커 찍고 esc로 나오면 앵커만 추가

- Delete: 패스 전체가 사라짐. 앵커포인트 제거: Alt+앵커클

 

3-4 불리언,마스크

(1)불리언

두 개 이상 오브젝트가 복수선택 되어 있을 때 작동. Ctrl+Shift+G로 그룹 해제

활용하면 이런 도형 만들기가 가능

 

(2)마스크 (Ctrl+Alt+M)

- 이미지 위에 도형 올리고 Ctrl+Alt+M(또는 오른쪽마우스)

- 마스크해제: 레이어의 도형 클릭 - 상단 옵션으로 해제

피그마에서 마스크 해제기능은 숏컷으로는 없다. 

 

 

 

 

 

Chapter4. 그래픽 스타일의 활용

 

4-1 컬러와 그레이디언트

색상 혼합

스포이드(I)로 혼합한 부분 추출 시 단색으로 추출된다.

컬러 스타일 등록. 등록해둔 스타일을 바꾸면 한번에 다바뀜

오브젝트 클릭해서 detach style로 뺄 수 있다.

 

 

4-2 도형과 이펙트

 

Effect

오른쪽 패널의 Effect에서 설정

3.도형이 블러 4.도형 뒤 배경이 블러

 

여러개의 스타일을 등록해둘 수 있음.

 

 

스타일 복사/붙여넣기

 

- 오른쪽 마우스 - Copy/Paste as - Copy/Paste Properties 

- 스타일 복붙 단축키: Ctrl+Alt+C, Ctrl+Alt+V

- 텍스트 속성 복붙도 가능하다.

여러 개를 한번에 잡고는 안된다. 위에서 도형은 도형대로, 텍스트는 텍스트대로 스타일 복붙을 해줘야함

 

 

4-3 이미지와 플러그인

1)이미지

이미지 불러오기: 폴더에서 드래그 앤 드랍, 도구상자-Place image/video(Ctrl+Shift+K) 여러개 이미지도 가능

Ctrl+Shift+K - 도형 안에 클릭하면 도형 안으로 들어간다. (XD에서는 드래그앤 드랍으로도 가능, 피그마에서는 Place로만 가능함)

 

 

Crop - XD에선 더블클릭해서 이미지 위치조정 가능, 피그마는 Fill > crop으로 변경

파란 영역은 도형, 이미지쪽에 대보면 회전,이동 등 커서가 바뀐다

Fit - 이미지를 딱 맞춤

Tile - 타일 형태로 이미지를 여러개 표시, %로 그 정도 조정

*투명도(Opacity) 단축키: 오브젝트 선택 상태에서 숫자. 1 - 10%, 2 - 20%... 0 - 100%, 00 - 0%

*Ctrl+D: 이미지 복붙

 

그거 (곱하기/소프트라이트...)

 

2)플러그인

마우스 오른쪽 - Plugins - browse..(이 메뉴 없지만.. Find more plugin으로 봐도 됨)

UI Face, Unsplash 설치!

UI Face - 조건에 맞는 사람 이미지를 불러옴(아바타)

Unsplash - 이미지 검색, 넣기  *대체로 원본이 크기 때문에 도형을 그려두고 그 안으로 불러오는게 좋다. 

 

4-4 스타일의 정리

컬러, 이펙트 등 스타일 그룹 설정 가능

- [common] 그룹을 만든다

- 새로 만든 스타일은 드래그해서 해당 그룹에 넣을 수 있음

-  스타일 이름 설정에서 /(그룹이름)으로 바로 넣을 수도 있음. name: yellow/common 

텍스트 스타일도 동일하게 가능함(text style)

ex) #666666 : text, #333333 : title

 

Chapter5. 

 

5-1 프레임과 레이어

Page, Frame

왼쪽 패널의 Page. 프레임 묶는 카테고리 같은 개념

Ex) Intro, member, tutorial ...

- 페이지 복붙, 페이지 내 프레임 복붙

 

* Ctrl+(+/-): 확대,축소

* Ctrl+0: 100%줌

* Shift+1: 전체 프레임 한 눈에, 줌아웃 (XD에서는 Ctrl+1)

- 프레임은 오브젝트처럼 인식되어 프레임 안 프레임 생성 가능, radius값 등 설정 가능

 

- Clip content: 프레임 밖으로 삐져나간 도형 숨기기 보이기 on/off (체크상태를 권장함!!)

레이어

Ctrl+(Shift)+[,] : 정렬 - 앞뒤로 가져오기, 맨앞뒤로 가져오기

Ctrl+(Shift)+G: 그룹 설정, 그룹 해제

Ctrl+R: 이름 바꾸기 (복수선택도 가능함)

Rectangle > 사각으로 바꾸겠다

Name칸에 \d+

d(숫자 변경) +(여러개) -> Number위/아래

Ctrl+Shift+L: 잠금 (복수선택 가능)

Ctrl+Shift+H: 보이기/안보이기