핵심 기능으로 빠르게, 피그마 실무 50강사전(1)

 

피그마 기본 공부하자~

 

 

1. 피그마 썸네일 만들기

피그마는 따로 썸네일을 지정하기 않으면 작업 화면이 기본적으로 보인다.

썸네일은 1920x600 크기 안에 1600x960의 safe zone안에서 작업한다.

먼저 썸네일을 제작할 프레임을 만든다. 프레임 선택 후 오른쪽에서 프리셋을 선택할 수 있다.

Plugin/file cover 선택

이 위에 도형으로 썸네일 제작 공간을 설정한다.

*shift+R 로 룰러북 설정 가능

도형을 이용해 크기 설정 후 룰러불을 좌우에 드래그하여 설정하면 위와 같이 빨간 줄이 생성된다. 이제 이 안에서 작업!

set as thumbnail

우클릭 후 썸네일 지정하면

완성~

 

 

---

2. 피그마 인터페이스

Design 영역

• Appearance : 모드, 투명도 설정
• Fill : 도형의 색상
• Stroke : 도형의 선
• Effect : 도형 효과
• Export : 작업물 내보내기

---

3. 피그마 툴 바

Figma

 

• Move
  • Scale : 개체의 크기를 비율에 따라 조절할 수 있다.
• Frame : 작업의 기본 단위. Frame안에 Frame을 넣는 것 가능. Frame 단위로 묶어서 작업하기
  • Slice : 영역 잘라서 내보내기
• 도형 : 
  • Image : 이미지나 동영상 불러오기 가능
    • alt, option 키를 누르고 이미지 위치를 조정 가능
    • 여러 이미지 선택 후 삽입 가능
  • 도형의 각 핸들을 통해 도형 편집 가능
    • pen tool : 고형 꼭짓점 추가/삭제, 곡선화 가능(command 키)
    • paint bucket : 색 채우기
  • 패스 파인더 : 두 도형을 함께 선택시 노출. Union, Subtract 등 가능
• Pen tool : Stroke와 함께 사용
  • Pen : 선 긋기. 선을 합쳐서 도형으로 만들 수 있음.
  • Pencil : 자유 선 긋기. 
• Text
  • 리사이징 메뉴 : 텍스트에 따른 텍스트 박스 크기 조절
• Widget : 피그마에서 지원하는 컴포넌트 검색
  • Component : 피그마 내에서 사용한 요소 재사용
  • Plugin : 외부 요소 가져오기. 바로 사용할 수도 있고 다운받을 수도 있음
  • Widgets : 기존에 생성된 widget 가져오기

 

---

3. 레이어

요소들이 순서를 가지고 나열되는 것.

프레임을 레이어로 정리하면 편하다.

Layers

 

왼쪽의 아이콘으로 레이어를 구분할 수 있다.

Find

레이어의 돋보기 혹은 Ctrl+F 를 통해 레이어를 검색할 수 있다.

또한 replace를 통해 특정 단어를 바꿀 수 있다.

 

---

4. 검색 기능

다중 레이어명 바꾸기

전체 선택

Cuurent name - Number 클릭

여러 레이어명을 수정하면서 각 개체에 숫자를 부여할 수 있다.

숫자 뿐만 아니라 여러 수식을 이용하여 이름을 지정할 수 있다.

• $1, $2 : 첫 번째, 두 번째 항목
• $& : 일치하는 전체 항목
• $nn : 숫자 자리수(오름차순)
• $NN : 숫자 자리수(내림차순)

---

5. 피그마 파일 공유

우측 상단 share 버튼을 통해 공유 가능

파일 공유

권한을 설정할 수 있다.

Prototype link를 통해 내 prototype만 전달할 수 있다.

프레임 공유

프레임 단위로 공유도 가능하다. 

링크를 통해 들어온 사람은 바로 프레임을 볼 수 있다.

 

---

6. 커뮤니티 올리기

 

해야하는 것

• 썸네일 제작
• 파일 정리 정돈(레이아웃, 레이어 명, 파일명 등)

Publish

Share - Publish to Community 선택 후 정보 입력 후 올린다.

---

7. 프레젠테이션

1. 작업장에서 프레젠테이션 하기

프로필 클릭

*스페이스바를 누르면 핸드바를 활성화할 수 있다.

 

2. Present 모드

Present 모드를 눌러서 활성화 한다.

특정 프레임을 누르지 않고 실행하면 프레임명 순으로 실행된다.

Flow를 설정할 수 있다.

프레젠테이션 시 Flow에 따라 보여진다.

---

8. 피그마 소통

1. 커서챗 활용

커서챗

/ 를 누르면 커서챗을 작성할 수 있다. 금방 사라지므로 history가 필요없는 아이스 브레이킹 등에 사용

 

2. 코멘트 활용

history를 남길 수 있고, 다른 사람에게 댓글을 남길 수도 있다.

확인 완료, 숨김 등의 설정이 가능하다.

 

---

# 참고

 

강의가 내려갔나...? 안보이네

피그마부터 간단하게 공부한 후 vue.js로 넘어갈 예정이다.

강의를 들으면서 간단하게 미감을 키우는 것을 목표로 한다.