Figma - 인터페이스

Menu Bar

---

파일 저장, 불러오기, 내보내기, 편집과 같은 기본 명령어들이 모여 있습니다. 여기서 프로젝트 관리와 설정도 할 수 있습니다.

---

이동 도구 (Move Tool)
선택한 오브젝트를 자유롭게 이동시킬 수 있는 기본 도구입니다. 

디자인 작업 중 가장 자주 사용하는 기능입니다.

프레임 도구 (Frame Tool)
캔버스에 프레임을 만들어 아트보드처럼 활용할 수 있습니다. 

웹이나 모바일 화면 크기에 맞는 작업 영역을 설정할 때 매우 유용합니다.

도형 도구 (Shape Tools)
사각형, 원, 선 등 다양한 기본 도형을 그릴 수 있습니다. 

디자인의 기본 요소를 만드는 데 필수적인 도구입니다.

펜 도구 (Pen Tool)
자유로운 곡선 및 벡터 경로를 그릴 수 있어서 복잡한 모양의 아이콘이나 일러스트를 만들 때 사용합니다.

텍스트 도구 (Text Tool)
텍스트를 입력하고 편집할 수 있는 도구입니다. 

디자인에 글자를 추가할 때 사용하며, 폰트와 크기를 자유롭게 조절할 수 있습니다.

손 도구 (Hand Tool)
캔버스 전체를 드래그하여 이동할 수 있는 도구로, 작업 중 화면 위치를 빠르게 조정할 때 편리합니다.

확대/축소 도구 (Zoom Tool)
원하는 부분을 확대하거나 축소해 세밀한 작업을 할 수 있는 도구입니다.

자르기 도구 (Slice Tool)
디자인 일부 영역을 선택하여 별도로 내보내거나 저장할 때 사용하는 도구입니다.

---

---

Toolbar

---

디자인에 필요한 주요 도구들이 위치해 있습니다. 

예를 들어, 이동 도구, 프레임 도구, 도형 도구, 펜 도구, 텍스트 도구 등이 있어 필요한 작업을 바로바로 선택하여 사용할 수 있습니다.

---

---

Canvas

---

실제 디자인 작업이 이루어지는 중앙 공간입니다. 

여기에 프레임을 추가하고, 오브젝트를 배치하며 디자인을 완성합니다.

---

---

Properties Panel

---

선택한 오브젝트의 상세 속성들을 수정할 수 있는 곳입니다. 

크기, 위치, 색상, 불투명도, 그림자, 테두리 등 세밀한 조절이 가능합니다.

---

---

Layers Panel

---

좌측 툴바 아래나 캔버스 가까이에 위치하며, 디자인에 사용된 모든 객체와 그룹들의 계층을 한눈에 볼 수 있습니다. 

객체들의 순서 변경이나 그룹 설정 시 유용합니다.

---

---

레이어의 종류

---

각 레이어에는 레이어 유형의 이름과 아이콘이 있습니다. 

이러한 아이콘 중 일부가 도구 모음에 표시되는 것을 눈치채셨을 것입니다. 

도구 모음에서 해당 도구를 선택하거나 키보드 바로가기를 사용하면 해당 유형의 레이어를 더 만들 수 있습니다

---

 

---

Status Bar

---

화면 하단에 위치해 있으며 좌표 위치, 캔버스 확대율 등을 확인할 수 있습니다.

---

---

Plugins and Widgets

---

추가 기능을 설치하거나 활용할 수 있는 공간으로, 디자인 작업을 더욱 풍부하고 편리하게 만들어 줍니다.

---

---

피그마 인터페이스는 이렇게 여러 영역으로 나뉘어 있어 각 부분이 조화롭게 디자인 작업을 지원합니다.

---

처음 사용하실 때는 익숙하지 않을 수 있으나, 차근차근 익히시면 훨씬 편리하게 다룰 수 있습니다.

 

 

Reference

---

https://help.figma.com/hc/ko/articles/15297425105303-%EB%94%94%EC%9E%90%EC%9D%B8-%ED%8C%8C%EC%9D%BC-%ED%83%90%EC%83%89

디자인 파일 탐색

 

 

---

https://help.figma.com/hc/ko/articles/23954856027159-UI3-%ED%83%90%EC%83%89%ED%95%98%EA%B8%B0-Figma%EC%9D%98-%EC%83%88%EB%A1%9C%EC%9A%B4-UI

UI3 탐색하기: Figma의 새로운 UI

 

 

---

https://help.figma.com/hc/ko/articles/360039832014-%EC%98%A4%EB%A5%B8%EC%AA%BD-%EC%82%AC%EC%9D%B4%EB%93%9C%EB%B0%94%EC%97%90%EC%84%9C-%EB%A0%88%EC%9D%B4%EC%96%B4-%EC%86%8D%EC%84%B1-%EB%94%94%EC%9E%90%EC%9D%B8-%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85-%EC%A0%9C%EC%9E%91-%ED%83%90%EC%83%89%ED%95%98%EA%B8%B0

오른쪽 사이드바에서 레이어 속성 디자인, 프로토타입 제작, 탐색하기

 

 

---

https://uxplat.com/figma-%ED%94%BC%EA%B7%B8%EB%A7%88-%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4-%EC%9E%91%EC%97%85-%ED%99%94%EB%A9%B4-ui/

Figma 피그마 인터페이스 - 작업 화면 UI(Figma Interface 2025)

 

 

---

https://uxplat.com/figma-%ED%94%BC%EA%B7%B8%EB%A7%88-%EB%A9%94%EC%9D%B8-%EB%A9%94%EB%89%B4-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0-%ED%94%BC%EA%B7%B8%EB%A7%88-%EC%82%AC%EC%9A%A9%EB%B2%95/

Figma 피그마 메인 메뉴 살펴보기 - 피그마 사용법 2025

 

 

---

https://uxplat.com/figma-%ED%94%BC%EA%B7%B8%EB%A7%88-%ED%8C%8C%EC%9D%BC-%EC%95%84%EC%9D%B4%EC%BD%98-%EC%A2%85%EB%A5%98-%EC%9E%91%EC%97%85-%ED%8C%8C%EC%9D%BC-%EA%B5%AC%EB%B6%84%ED%95%98%EA%B8%B0/

Figma 피그마 파일 아이콘 종류 - 작업 파일 구분하기 2025

 

 

---

https://uxplat.com/figma-toolbar-design-tools-%ED%94%BC%EA%B7%B8%EB%A7%88-%ED%88%B4%EB%B0%94-%EB%A9%94%EB%89%B4-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0/

Figma 피그마 툴바 메뉴 살펴보기 - 피그마 디자인 툴 2025