실무에서 바로 쓰는 피그마 - 1. Figma 시작하기 : 인터페이스 탐색 및 기본 설정

Figma는 오늘날 디지털 제품 디자이너들에게 선택이 아닌 필수가 된 강력한 디자인 협업 도구입니다. 복잡한 UI/UX 디자인부터 간단한 그래픽 작업까지, Figma는 웹 기반의 접근성과 실시간 협업이라는 독보적인 장점으로 수많은 팀의 사랑을 받고 있습니다. 하지만 처음 Figma를 접하는 분들이라면 방대한 기능과 낯선 인터페이스에 다소 압도될 수도 있습니다. 이 첫번째 글에서는 Figma의 기본을 탄탄히 다지기 위해 인터페이스의 주요 요소들을 자세히 살펴보고, 개인의 작업 스타일에 맞게 Figma설정하는 방법을 알아보겠습니다. 막막했던 첫걸음이 이 글을 통해 훨씬 가볍고 자신감 있게 느껴지도록 도와드리겠습니다.

 

1.1 Figma, 왜 배워야 할까요? 웹 기반 협업의 힘

 

Figma를 처음 시작하기 전에, 왜 이도구가 현대 디자인 워크플로우의 중심이 되었는지 이해하는 것이 중요합니다. 전통적인 디자인 도구들이 개별 설치와 파일 공유의 번거로움을 안고 있었던 반면, Figma는 이 모든 것을 웹 브라우저 안으로 가져왔습니다.

• 웹 기반 접근성 : 별도의 설치 없이 인터넷만 연결되어 있다면 어떤 OS, 어떤 기기에서도 Figma에 접속하여 작업할 수 있습니다. 이는 팀원들이 각기 다른 환경에서 작업하더라도 호환성 문제로 시간을 낭비할 필요가 없다는 의미입니다.
• 실시간 협업 : Figma의 가장 큰 강점 중 하나는 여러 명의 사용자가 동일한 파일에서 동시에 작업할 수 있다는 점입니다. 마치 구글 문서처럼, 각 팀원이 작업하는 커서가 실시간으로 보이며, 변경 사항이 즉시 반영됩니다. 덕분에 디자인검토와 피드백 과정이 훨씬 빠르고 효율적으로 진행됩니다.
• 클라우드 기반 저장 : 작업 내용은 자동으로 클라우드에 저장됩니다. 갑작스러운 컴퓨터 종료나 파일 유실 걱정 없이 언제든 마지막 작업 상태로 돌아갈 수 있습니다. 또한, 버전 히스토리 기능을 통해 과거 작업 상태로 쉽게 되돌리거나 비교할 수 있습니다.
• 올인원 디자인 플랫폼 : UI/UX 디자인은 물론, 프로토타이핑, 디자인 시스템 구축, 개발자 핸드오프까지 한 도구 안에서 모든 과정을 처리할 수 있습니다. 이 덕분에 여러 도구를 오갈 필요 없이 작업의 연속성이 유지됩니다.

이러한 장점들 덕분에 Figma는 단순한 디자인 도구를 넘어, 디자인 팀의 커뮤니케이션과 생산성을 혁신하는 협업 플랫폼으로 자리매김했습니다. 이제 본격적으로 Figma의 인터페이스를 탐험해 볼까요?

 

1.2 Figma 인터페이스 깊이 탐색하기 : 내비게이션 바부터 속성 패널까지

Figma 에디터에 접속하면 크게 다섯 가지 주요 영역으로 나뉜 화면을 볼 수 있습니다. 각 영역의 역할과 기능을 이해하는 것이 Figma를 효율적으로 사용하는 첫걸음입니다.

 

1.2.1 상단 내비게이션 바 (Top Navigation Bar)

가장 상단에 위치한 바이며, Figma의 핵심 기능들에 빠르게 접근할 수 있도록 도와줍니다.

• 메인 메뉴(Figma 아이콘) : 좌측 상단의 Figma 로고를 클릭하면 나타나는 드롭다운 메뉴입니다. 파일을 생성하거나 열고, 편집 설정을 변경하며, 플러그인을 관리하는 등 Figma의 전반적인 설정을 조절 할 수 있습니다. 특히 File메뉴에서는 새로운 파일을 만들거나, 파일을 복제하고, 로컬로 저장하거나 이미지로 보낼 수 있습니다 .Edit메뉴에서는 기본적인 편집 기능(복사, 붙여넣기 등)을 사용할 수 있고, Plugins메뉴에서는 설치된 플러그인을 실행하거나 새로운 플러그인을 찾아 설치할 수 있습니다.

• 툴바(Toolbar) : 메인 메뉴 옆에 위치하며, 현재 선택된 도구와 작업에 필요한 주요 도구 아이콘들이 모여 있습니다.
  Move Tool (V) : 가장 기본적인 도구로, 오브젝트를 선택하고 이동하거나 크기를 조절하는 데 사용됩니다.
  Frame Tool (F) : 디자인 작업의 기본이 되는 프레임을 생성합니다. 웹, 모바일, 태블릿 등 다양한 디바이스별 프리셋을 제공합니다.
  Shape Tools (R, O, T 등) : 사각형(R), 선(L), 원(O), 다각형(P), 별 모양 등 기본적인 도형을 그리는 도구 모음입니다. 화살표를 클릭하여 다른 도형 도구를 선택할 수 있습니다.
  Pen Tool (P) & Pencil Tool (Shift + P) : 백터 그래픽을 자유롭게 그리거나 편집할 때 사용합니다. 펜 도구는 정교한 패스를 그리는 데 유용하고, 연필 도구는 자유로운 스케치에 적합합니다.
  Text Tool (T) : 텍스트 상자를 만들어 글자를 입력하고 편집합니다.
  Hand Tool (H) :  캔버스를 이동할 때 사용합니다. 스페이스 바를 누른 채 마우스를 드래그하는 것과 동일한 기능을 합니다.
  Comment Tool (C) : 특정 영역에 주석을 달아 팀원들과 피드백을 주고받을 때 사용합니다.

• 에셋 패널 & 컴포넌트 & 프로토타입 : 툴바 우측에는 현재 파일에서 사용 가능한 컴포넌트 스타일을 관리하는 Assets탭, 그리고 프로토타이핑 모드를 전환하는 Prototype탭이 있습니다. Develop탭은 개발자 핸드오프를 위한 기능들을 제공합니다.

• 파일 이름 & 버전 히스토리 : 현재 작업 중인 파일의 이름이 표시됩니다. 클릭하면 파일 이름을 변경하거나, 버전 히스토리를 확인하고 관리할 수 있습니다. (나중에 자세히 다룰 매우 종요한 기능입니다.)

• 공유 및 협업 기능 : 우측 상단에는 현재 파일에 접속해 있는 다른 사용자들의 프로필 사진이 표시됩니다. Share 버튼을 클릭하여 다른 사람들을 파일에 초대하고, Present 버튼으로 프로토타입을 미리 보거나 공유할 수 있습니다.

1.2.2 좌측 사이드바 (Left Sidebar)

이곳은 작업 중인 파일의 구조와 요소를 한눈에 파악할 수 있는 중요한 영역입니다. 크게 두가지 탭으로 구성됩니다.

• 레이어 패널(Layer Panel) : 현재 페이지에 있는 모든 오브젝트(프레임, 도형, 텍스트, 이미지 등)가 계층 구조로 표시됩니다. 포토샵이나 일러스트레이터의 레이어 패널과 유사하게, 상위에 있는 레이어가 화면상에서 더 위에 표시됩니다. 레이어 순서를 변경하거나, 레이어를 잠그거나(Lock), 숨기거나(Hide)할 수 있습니다. 오브젝트를 선택하거나 그룹화하는 데 유용하며, 특히 복잡한 디자인에서 특정 요소를 찾거나 관리할 때 필수적입니다.

• 에셋 패널(Assets Panel) : 현재 파일 또는 팀 라이브러리에 저장된 컴포넌트와 스타일(컬러, 텍스트 스타일 등)을 보여줍니다. 컴포넌트 인스턴스를 캔버스로 드래그하여 쉽게 배치할 수 있으며, 디자인 시스템을 구축할 때 핵심적인 역할을 합니다.

1.2.3 캔버스 (Canvas)

Figma 작업의 중심이 되는 공간입니다. 모든 디자인 작업은 이 캔버스 위에서 이루어집니다.

• 무한한 작업 공간 :  캔버스는 사실상 무한한 크기를 가지고 있어, 여러개의 프레임이나 아이디어 스케치 등을 자유롭게 배치하고 작업할 수 있습니다.
• 줌 인/아웃 및 이동 : 마우스 휠을 사용하여 줌 인/아웃할 수 있으며, 스페이스 바를 누른 채 드래그하여 캔버스를 이동할 수 있습니다.(Hand Tool과 동일한 기능)
• 오브젝트 선택 및 조작 : 캔버스 위에 있는 모든 디자인 요소(프레임, 도형, 텍스트 등)는 캔버스에서 직접 선택하고 크기를 조절하거나 이동할 수 있습니다.

1.2.4 우측 사이드바 (Right Sidebar)

선택된 오브젝트의 속성과 디자인 옵션을 제어하는 중요한 패널입니다. 선택된 오브젝트의 종류나 모드(Design, Prototype, Inspect)에 따라 표시되는 내용이 달라집니다.

• 디자인 패널(Design Panel) : 가장 많이 사용되는 패널입니다.
  레이어 :선택된 오브젝트의 위치(X, Y), 크기(W,H), 회전(Angle) 등을 정밀하게 조절합니다.
  제약조건 (Constraints) : 오토 레이아웃과 함께 반응형 디자인의 핵심 기능입니다. 부모 프레임의 크기 변화에 따라 자식 오브젝트가 어떻게 반응할지 설정합니다. (나중에 심화해서 다룰 예정입니다.)
  오토 레이아웃(Auto Layout) : 선택된 오브젝트에 오토 레이아웃을 적용하여 자동으로 간격과 정렬을 조절하고 반응형 UI를 만듭니다.(가장 많이 사용하는 기능)
  채우기 (Fill) : 오브젝트의 배경색, 그라데이션, 이미지 등을 설정합니다. 여러 개의 Fill을 추가하여 다양한 효과를 줄 수 있습니다.
  선 (Stroke) : 오브젝트의 테두리 선 색상, 두께, 스타일(점선 등)을 설정합니다.
  효과 (Effects) : 그림자(Drop Shadow), 내부 그림자(Inner Shadow), 레이어 블러(Layer Blur), 배경 블러(Background Blur) 등 시각적 효과를 추가합니다.
  내보내기 (Export) : 선택된 오브젝트를 PNG, JPG, SVG, PDF 등 다양한 형식으로 내보낼 수 있습니다. 여러배율(예 : 1x, 2x, 3x)로 동시에 내보내는 것도 가능합니다.

• 프로토타입 패널(Prototype Panel) : 캔버스에서 연결된 흐름선(Flow)을 통해 인터랙션을 정의합니다.
  플로우 시작점 (Flow Starting Point) : 프로토타입의 시작점을 설정합니다. 
  상호작용 (Interactions) : 클릭, 드래그, 호버 등 다양한 트리거(Trigger)와 내비게이트(Navigate), 스왑 오버레이(Swap Overlay) 등의 액션(Action)을 정의하여 사용자 경험을 시뮬레이션합니다.
  애니메이션 (Animation) : 인터랙션 발생 시 화면 전환 효과(Dissolve, Smart Animate 등)를 설정합니다.

• 검사 패널(Inspcet Panel) : 개발자 핸드오프를 위한 패널입니다.
  선택된 디자인 요소의 CSS, IOS, Android 코드 스니펫을 자동으로 생성하여 개발자들이 디자인을 쉽게 구현할 수 있도록 돕습니다.
  색상 값, 폰트 정보, 간격 등 디자인 스펙을 한눈에 확인할 수 있습니다.

1.2.5 페이지 패널 (Page Panel)

캔버스 좌측 하단에 위치하며, 여러 개의 페이지를 생성하고 관리할 수 있습니다. 복잡한 프로젝트에서는 각 기능이나 흐름별로 페이지를 나누어 작업하면 훨씬 체계적이고 효율적으로 파일을 관리할 수 있습니다. +버튼을 클릭하여 새 페이지를 추가하고, 페이지 이름을 변경하거나 삭제할 수 있습니다.

1.3 Figma 개인 설정 : 나만의 작업 환경 구축하기

Figma는 사용자 개개인의 작업 스타일에 맞춰 다양한 설정을 커스터마이징할 수 있는 기능을 제공합니다. 기본적인 설정을 통해 더욱 쾌적하고 효율적인 작업 환경을 구축해 보세요.

 

1.3.1 계정 설정 및 프로필 관리

Figma 메인 메뉴(좌측 상단 Figma 아이콘)  > Help and Account > Account Settings로 이동하면 웹 브라우저에서 계정 설정 페이지가 열립니다.

• 프로필 사진 및 이름 : 협업 시 다른 팀원들이 나를 쉽게 알아볼 수 있도록 프로필 사진과 이름을 설정합니다.
• 이메일 주소 및 비밀번호 : 계정 보안을 위해 이메일 주소를 확인하고 필요시 비밀번호를 변경합니다.
• 알림 설정 : 댓글, 초대 등 Figma 활동에 대한 알림 방식을 설정할 수 있습니다.

1.3.2 Figma 에디터 기본 설정

Figma 메인 메뉴 (좌측 상단 Figma 아이콘) > Perferences에서 다양한 에디터 설정을 조절할 수 있습니다.

• Nudge Amount(미세 이동 단위) : 키보드 방향키를 눌렀을 때 오브젝트가 이동하는 기본 단위를 설정합니다. 기본값은 1px이지만, Gird 시스템을 사용하는 경우 Grid단위에 맞춰 4px, 8px 등으로 설정하면 정렬에 매우 유용합니다. Small Nudge(Shift + 방향키)는 Nudge Amount의 1/10로 설정됩니다.
• Snap to Object / Pixel Grid : 
  Snap to Object Geometry  : 오브젝트를 이동하거나 크기를 조절할 때 다른 오브젝트의 경계선이나 중심점에 자동으로 스냅되도록 설정합니다. 정확한 정렬에 필수적입니다.
  Snap to Pixel Gird : 픽셀 그리드에 맞춰 오브젝트가 정렬되도록 합니다. 정밀한 픽셀 단위 작업에 유용합니다. (단, 줌 레벨이 낮을 때는 작동하지 않을 수 있습니다.)
• Show Pixel Grid : 캔버스에 픽셀 그리드를 표시할지 여부를 설정합니다. 작은 단위의 디자인 작업 시 유용합니다.
• Keyboard Shortcuts : Figma의 수많은 단축키들을 확인하고, 필요하다면 개인의 작업 스타일에 맞게 커스터마이징할 수 있습니다. Quick Actions(윈도우 : Ctrl + / 또는 맥 : Cmd + /)를 통해 검색하거나 실행할 수도 있습니다.  
• Font Settings : 로컬 폰트를 사용할 수 있도록 Figma Font Helper를 설치할 수 있습니다. 이는 웹 기반 Figma의 한계를 보완하여 로컬 시스템에 설치된 폰트를 사용할 수 있게 해줍니다.
• Theme : Figma 인터페이스의 테마를 Light 또는 Dark 모드로 변경할 수 있습니다. 개인의 시각적 선호도에 따라 선택하세요.

1.3.3 플러그인 설치 및 관리

Figma의 가장 강력한 확장 기능 중 하나인 플러그인입니다. 메인메뉴 > Plugins > Browse Plugin in Community를 통해 Figma 커뮤니티에서 다양한 플러그인을 탐색하고 설치할 수 있습니다.

• 플러그인 검색 : 특정 기능을 가진 플러그인을 검색합니다. 예를 들어, 아이콘을 삽입하고 싶다면 "Icon"으로 검색하여 Iconify나 Phosphor Icons와 같은 플러그인을 찾을 수 있습니다.
• 플러그인 설치 : 원하는 플러그인을 찾으면 Install버튼을 클릭하여 쉽게 설치할 수 있습니다.
• 설치된 플러그인 관리 : 메인메뉴 > Plugins > manage Plugins에서 설치된 플러그인 목록을 확인하고 활성화/비활성화하거나 제거할 수 있습니다.

초보자에게 추천하는 필수 플러그인(향후 심화 학습 예정) 

• Unsplash : 고품질 이미지를 손쉽게 삽입할 수 있습니다.
• Iconify / Phosphor Icons :  수많은 아이콘 라이브러리에서 필요한 아이콘을 찾아 바로 사용할 수 있습니다.
• Content Reel : 더미 텍스트, 아바타, 이미지 등을 빠르게 채워 넣어 디자인 목업을 완성하는 데 도움을 줍니다.

1.4 파일 생성 및 저장 : 걱정 없이 시작하기

Figma는 클라우드 기반 도구이기 때문에 별도로 저장 버튼을 누를 필요가 없습니다. 모든 변경 사항은 실시간으로 자동 저장됩니다. 하지만 파일을 생성하고 관리하는 방법은 알아두어야 합니다.

1.4.1 새 파일 생성하기

Figma 대시보드(Figma 메인 화면)에서 Design File버튼을 클릭하거나, Figma 에디터 내에서 메인메뉴 > File > New design file을 선택하여 새 파일을 만들 수 있습니다.

 

1.4.2 파일 이름 변경하기

새로 생성된 파일의 기본 이름은 Untitled입니다. 상단 내비게이션 바의 파일 이름을 클릭하여 원하는 이름으로 변경할 수 있습니다. 프로젝트명과 파일의 목적을 명확히 담는 것이 좋습니다. (예 : 프로젝트X - 로그인 흐름, 서비스Y - 컴포넌트 라이브러리)

 

1.4.3 파일 관리 및 이동

Figma 대시보드에서는 생성된 파일들을 프로젝트, 팀 등으로 폴더링하여 관리할 수 있습니다. 파일을 드래그 앱 드롭하여 폴더 간에 이동하거나, 팀 내에서 공유할 수 있습니다. 깔끔한 파일 관리는 협업의 효율성을 높이는 데 중요한 요소입니다.

 

1.5 마치며 : Figma, 이제 시작입니다.

지금까지 Figma의 인터페이스를 면밀히 살펴보고, 개인 설정을 통해 작업 환경을 최적화하는 방법, 그리고 파일 생성 및 관리에 대한 기본적인 내용을 다루었습니다. 이 모든 것은 Figma를 능숙하게 다루기 위한 첫걸음에 불과합니다.

 

가장 중요한 것은 직접 만져보고 경험하는 것입니다. Figma를 열고 각 버튼을 클릭해보세요. 도형을 그려보고, 텍스트를 입력하고, 레이어 패널에서 요소를 이동시켜 보세요. 당장은 모든 기능이 완벽하게 이해되지 않아도 괜찮습니다. 반복적인 실습을 통해 손에 익히는 것이 중요합니다.

 

다음 글에서는 Figma 디자인의 기본 단위이자 핵심 요소인 프레임과 페이지의 개념을 더 깊이 있게 탐구하고, 효율적인 작업 공간을 관리하는 노하우에 대해 알아보겠습니다. 프레임을 제대로 이해하면 Figma를 활용한 디자인 작업의 생산성을 비약적으로 높일 수 있을 것입니다. 계속해서 Figma 마스터의 여정을 함께 하시죠!