[Figma] 피그마 화면 구성과 도구 툴 이해하기

처음 피그마를 열면 낯선 화면에 잠시 멈칫하게 된다.
하얀 캔버스를 둘러싼 여러 패널과 아이콘들이 복잡하게 느껴지지만, 기획자가 자주 쓰는 핵심 도구는 생각보다 단순하다.
지난번에는 전체 화면의 구도에 대해 간략하게 포스팅 했었는데, 이번 글에서는 피그마 화면의 구조와 자주 쓰는 도구들을 하나씩 살펴본다.
이해하고 나면, 이후 실습이 훨씬 편안해진다.

 

🖥️ 피그마의 화면 구성

피그마의 기본 화면은 네 개의 영역으로 나뉜다.

구역	설명
①하단 툴바	도형, 텍스트, 이동 도구 등 주요 작업 도구들이 모여 있다. (원래 이 툴바가 상단에 있었는데 2025년 1분기에 업데이트 되면서 하단으로 내려갔다)
②좌측 패널	레이어와 컴포넌트 등 구조를 보여주는 공간이다.
③중앙 캔버스	실제로 디자인을 만드는 작업 공간이다.
④우측 속성창	선택한 요소의 속성을 수정하는 공간이다.

 

🔧 하단 툴바 – 가장 자주 쓰는 도구들

피그마 하단에는 작업에 필요한 기본 도구들이 나열되어 있다.
기존 상단에 있던 도구 툴바가 2025년 1분기에 업데이트 되면서 하단으로 내려갔다. 일정 기간동안은 '이전 UI로 돌아가기' 기능이 있었는데 이제는 그 기능도 없어졌다. (개인적으로는 기존 UI가 더 좋다.)
어쨌거나 기획자가 자주 사용하는 주요 도구는 다음과 같다.

• Move tool (V) : 오브젝트를 선택하고 이동할 때 쓴다.
• Frame tool (F) : 화면 단위를 만들거나 프레임을 구성할 때 사용한다. 
• Rectangle (R) : 프레임이나 사각, 원형 등의 도형을 표현할 때 사용한다.
• Line (L) : 펜을 활용해 '선'을 그릴 때 사용한다. 
• Text (T) : 텍스트를 삽입한다.
• Comment tool (C) : 협업 시 코멘트를 남길 수 있다.

그림 속 아이콘들의 순서대로 '말풍선' 표시까지 기능을 설명해보았다. 
마우스를 아이콘 위에 올리면 단축키가 함께 표시되므로, 자주 눌러보면 익숙해진다.

※ 특히 도구 툴바에서 아래 기능을 가장 많이 쓰게 될 것이다. 알아두자!! 

프레임, 섹션을 구분짓는 기능이다. 나중에 좀더 설명할 기회가 있겠지만 작업을 하는 단위로 구분할 때 주로 사용된다. 그룹핑이라 하는게 더 이해하기 쉬울라나?

프레임을 그린 뒤, 그 다음 그 프레임 안에 이 각양각색의 도구들을 활용해서 도형을 그린다. 네모, 원, 삼각형, 별, 선 등등 작업을 할때 정말 '없어서는 안될' 기능의 툴이다.

아마도 이건 피그마를 사용하지 않는 사람이라도 직관적으로 이해할 듯. 맞다! 텍스트 입력툴이다. 클릭 후 중앙의 캔버스에 마우스를 클릭하면 텍스트를 입력할 수 있는 상태가 된다.

 

---

📚 좌측 패널 – 화면 구조를 한눈에

좌측 패널은 디자인의 ‘구성 목록’을 보여주는 공간이다.
Layers 탭에서는 현재 화면에 있는 모든 요소가 계층 구조로 나열된다.
이름을 바꾸거나 순서를 조정할 수 있으며, 그룹화하거나 숨길 수도 있다.

또한 Assets 탭에서는 자신이 만든 컴포넌트나 팀에서 공유한 자산을 불러올 수 있다.

---

🎛️ 우측 속성창 – 선택한 것에 따라 달라지는 공간

피그마에서 어떤 오브젝트를 클릭하면, 그에 따라 우측 속성창의 내용이 자동으로 바뀐다.
(이것이 정말 중요하다. 초반에 독학으로 학습할 때 이 개념을 이해하지 못해 헤맸다. 유튜브 등 동영상에서는 우측 속성창에 대해 이야기하고있는데 나는 그 화면이 나오지 않았던터라..)
기획자가 가장 자주 활용하게 될 부분이기도 하다.

• 위치 및 크기 (X, Y / W, H)
• Fill (채우기 색상), Stroke (테두리)
• Corner radius (모서리 둥글기)
• Alignment / Spacing (정렬과 간격)
• Auto layout / Constraints (고급 기능, 추후 설명)

우측 속성창은 ‘선택한 것’에 따라 변한다는 점만 기억하면 된다.

 

🍃 마무리하며

피그마는 전문가만 다루는 복잡한 툴처럼 보이지만,
기획자가 자주 사용하는 영역은 그중 일부에 불과하다.
오늘은 화면을 구성하는 기본 영역과 주요 도구들에 대해 살펴보았다.
도구가 낯설지 않아야 본격적인 실습에 편하게 들어갈 수 있다.

다음 글에서는,
사각형, 텍스트, 선 같은 기본 요소를 직접 그려보며 피그마의 감각을 익혀볼 예정이다.
차근차근, 한 걸음씩 함께 가보자.