[UX UI figma] 피그마 인터페이스 (1) - 툴바

안녕하세요 PNcoding입니다 :)

이번 포스팅에선 Figma의 인터페이스에 대하여 알아보도록 할게요!

 

---

 

 

우선 Figma(밑에서는 한글로 지칭하도록 하겠습니다)를 사용하기 위해서는 계정을 먼저 만들어 주셔야 합니다.

https://www.figma.com/

Figma: the collaborative interface design tool.

 

 

1. 피그마의 첫 화면

피그마에 로그인을 하시면 이런 화면을 만나게 됩니다.

 

 

 

 

 

---

 

 

 

 

2. 피그마 인터페이스

 

1) 새 파일 만들기

 

 

왼쪽 상단의 New design file을 눌러서 새 파일을 만들어 주시면 됩니다.

 

 

 

 

 

2) 기본 화면 인터페이스

 

 

기본적으로 맨 상단의 툴바, 화면의 왼쪽의 레이어 패널,

가운데 작업영역의 캔버스 영역과 마지막으로 각 툴에 따라 관련된 내용이 나오는 디자인 패널 영역으로 나누어서 볼 수 있습니다.

 

 

 

 

---

 

 

 

3. 툴바 인터페이스

 

피그마 아이콘

 

 

툴바의 가장 왼쪽 피그마 아이콘을 클릭하면 기본 메뉴들이 나옵니다.

다시 피그마 기본 페이지로 돌아가려면 Back to files를 눌러주시면 됩니다.

 

 

 

 

 

다음은 피그마에서 사용되는 툴 영역에 대하여 알아보도록 하겠습니다.

 

 

툴 영역 - Move, Scale

 

 

1-1. Move Tool [ 단축키 V ]

오브젝트를 선택하고 이동시킬 때의 툴. 오브젝트 선택 시 Ctrl(Command)을 누른 상태에서 선택을 하면 오브젝트를 쉽게 선택할 수 있음.

 

1-2. Scale Tool [ 단축키 K ]

오브젝트를 선택하고 마우스 드래그하여 크기 조절 가능.

 

 

 

반응형

 

 

툴영역 - Frame, Section, Slice

 

 

2-1. Frame Tool [ 단축키 F ]

피그마에서 많이 사용되는 툴 중 하나. 프레임 툴을 선택하면 오른쪽 디자인패널영역에서 피그마에서 제공해 주는 여러 가지 디바이스 해상도를 활용할 수 있으며, 다른 크기를 만들어 주고 싶다면 캔버스영역에서 마우스를 드래그하여 원하는 크기의 프레임을 생성해서 활용할 수 있음.

(프레임은 다른 디자인 프로그램에는 없는 개념이기에 뒤에서 좀 더 다뤄볼 것임)

 

2 -2. Section Tool  [ 단축키 Shift  + S 맥에서는 Command + s ]

새로 생긴 기능. 작업한 디자인들을 모아 관리할 때 유용.
일반적으로 프레임으로 디자인 작업을 한 뒤 관련된 디자인들을 섹션으로 묶어 디자인 파일들을 보다 효율적으로 관리할 수 있음.
즉, 이 기능을 사용하면 파일을 여러 부분으로 나누어 관리할 수 있으며, 필요한 부분만 쉽게 찾을 수 있게 됨.
필요한 부분에만 집중적으로 작업할 수 있기에 작업속도도 올라갈 수 있다는 장점이 있음.

 

2-3. Slide Tool [ 단축키 S ]

슬라이스를 사용하여 복잡하게 겹쳐진 이미지도 쉽게 내보낼 수 있음.

즉 export를 편하게 할 때 사용 가능.

 

 

 

툴 영역 - 도형 툴

 

3. Shape Tool

다양한 툴을 활용하여 피그마에서 아이콘을 제작할 수 있음.

각 툴을 단축키는 툴의 이름 옆에 알파벳으로 표현되어 있음.

 

 

 

툴 영역 - Pen, Pencil

 

 

4-1. Pen Tool [ 단축키 P ]

shape로 만들지 못하는 세밀한 아이콘을 만들 때 사용.

 

4-2. Pencil Tool [ 단축키 Shift + P ]

말 그대로 연필로 그리듯이 스케치할 때 사용.

 

 

 

툴 영역 - Text

 

 

5. Text Tool [ 단축키 T ]

글자를 넣고싶을때 사용. 피그마는 구글폰트를 기본 폰트로 활용가능하기에 추가적인 폰트체를 설치하지 않고도 많은 웹폰트를 활용할 수 있음. 구글폰트 외의 다른 폰트를 사용하기 원한다면 개인컴퓨터(로컬)에 설치해서 피그마 폰트 도우미에서 사용 가능.

 

 

 

툴 영역 - Resources

 

 

6. Resources [ 단축키 Shift+I ]

디자인을 할 때 유용한 여러 플러그인을 관리하고 실행할 때 사용.

 

 

 

툴 영역 - Hand

 

 

7. Hand Tool [ 단축키 H or 스페이스바 누른 상태에서 마우스 클릭 드래그 ]

화면을 이동할때 사용.

 

 

 

툴 영역 - Add Comments

 

 

8. Add Comments [ 단축키 C ]

디자인에 대한 피드백을 주고받을 때 사용. 코멘트를 남기면 해당 영역에 코멘트가 표시가 되고 가입한 메일로 관련 코멘트가 보내짐. 작성된 코멘트 아래에 답글도 남겨둘 수 있으며, 코멘트 이동 및 제거도 가능.

 

 

 

 

 

---

 

 

 

 

 

 

여기까지에서 피그마의 기본적인 툴바에 대하여 알아보았습니다.

다음 포스팅에서는 추가적인 툴바 내용을 알아보도록 합시다 :)