[제로베이스 콘텐츠 마케팅 스쿨 스터디 노트] 7/9 _ 피그마 기초①

1. Figma 소개와 설치

• 모바일 중심의 UX/UI 디자인, 웹 사이트 등 다양한 디자인 작업을 지원
• 피그마는 하나의 파일에 여러 명의 협업자가 모여서 파일 수정 가능

 

2. Figma 인터페이스

• Quick actions : 무언가를 검색할 때 사용함 (단축키 : Ctrl+/)
• 기본툴 

- Move : 원하는 대로 크기 조절 가능
- Scale : 같은 비율로만 조절 가능

• 프레임툴

- Frame : 원하는 아트보드 크기 지정
- Slice : 작업한 화면의 일부분을 잘라서 특정 영역을 이미지로 추출 가능

• 모형툴 (Shape Tool)

- Place Image : 이미지 불러오기

• 펜툴 : 아이콘이나 도형툴로 만들기 어려운 비정형화된 형태를 정교하게 그리기 가능
• 텍스트툴 : 텍스트 삽입 기능
• 손바닥툴 : 캔버스를 드래그해서 작업을 살펴보는 기능
• 코멘트툴 : 특정 부분 클릭 후 코멘트 남기기 가능

 

3. 형태 만들기

• 전 단계로 되돌리기 단축키 : Ctrl+Z
• 한 단계씩 앞으로 : Ctrl+Shift+Z
• 사각형 : 드래그한 방향, 드래그한 크기, 마우스에서 손을 뗐을 때 사각형 크기가 정해짐
• 정사각형 : Shift+사각형쿨 드래그
• 한쪽 모서리만 둥글기 : Alt+모서리 하나만 안으로 드래그

모서리 둥글게 하기

 

• 다각형은 둥글기를 따로 조절하지 않음

카운트를 위로 드래그 하면 사각형, 오각형 최고 60각형까지 만들 수 있음

• Stroke alignment가 어디에 있느냐에 따라 아이콘의 크기, 형태가 달라짐

👉가장 best는 inside stroke를 사용할 때 가장 명확한 아이콘 만들 수 있음

• 펜툴 종료 단축키 : Esc
• 펜툴로 앵커 생성하는 방법 : 패스 어느 지점에 가져다대도 펜툴 옆에 +모양 생성됨
• but, 이 지점을 패스와 연결된 시작 지점이라 인식해 패스가 따라다님 >> esc 버튼 누르기
• 앵커 제거하는 방법 : 펜 툴 누르기 >> Alt+앵커에 갖다 대면 -표시 나옴
• 블랜드툴 : 앵커 포인트 옆에 갖다 대면... 표시 나오고 클릭 >> 곡선 형태로 바뀜 >> 다시 한번 클릭하면 직선 형태로 바뀜 >> 또 클릭하면 다시 곡선형태로 바뀜 >> 양 옆으로 핸들러 나타남 >> 곡선의 방향으로 조절 가능

• 그룹 해제 단축키 : Ctrl+Shift+G

4. 그래픽 스타일의 적용

• 투명도를 조절하는 알피 값
• Hex : 6가지 숫자와 영문의 조합

ex) FF(Red) 66(Green) CB(Blue)

• Background Blur : 레이어 자체에 효과가 있는 것이 아니라 형태 뒤에 무엇인가 있을 때 흐릿한 효과가 나타남

👉공개하고 싶지 않은 요소, 마우스 올렸을 때 선명해지는 효과에 많이 사용

• Layer Blur : 레이어 자체의 블러 효과

• 속성 복사/붙여 넣기 : Ctrl+Alt+C / Ctrl+Alt+V

5. 정렬과 레이아웃

• 프레임 단축키 : F (A 눌러도 가능)
• 화면 확대 : Ctrl+ + / 화면 축소 : Ctrl+ -
• 100% 비율로 조정 : Ctrl+0
• 화면이 꽉 찬 아트보드 : Shift+1
• 그룹묶기 : Ctrl+G / 그룹해제 : Ctrl+Shift+G
• Clip content 체크해야 작업 용이

• 여러 오브젝트가 쌓여 있을 때 단축키

- 한 칸씩 뒤로 : Ctrl+[
- 한 칸씩 앞으로 : Ctrl+ ]
- 제일 뒤로 : Ctrl+Shift+[
- 제일 앞으로 : Ctrl+Shift+]

• 레이어 이름 바꾸기 : Ctrl+R
• 레이어 순서 변경 : \d+

6. 컴포넌트와 베리언트

• Create Component : Ctrl+Alt+K
• 원본을 복제한 것 : Instance
• component 색상 변경은 component 내부에 있는 모형을 클릭 후 색상 변경 가능
• 크기 조절을 하지 않은 요소는 움직임

👉component 속성을 가지고 있는 instance 요소만 반응

• 어떠한 작업을 할 때 component의 원본의 요소는 남겨있어야 함

---

이전 일러스트레이터는 많이 들어봐서 낯선감은 없었는데 피그마는 처음 듣고 처음 접해봤기 때문에 바로 바로 이해하기에 어려웠다. 하지만 단축키는 겹치는 부분들이 많아 다행이라고 생각했다. 강사님의 강의를 들으면서 예제들을 열심히 따라해봐야 할 것 같다!

---

이 글은 제로베이스 콘텐츠마케팅 스쿨의 강의자료 일부를 발췌하여 작성되었습니다