피그마(Figma) 사용법 | 기본 단축키부터 유용한 기능까지

피그마(Figma)는 현재 UX/UI 분야에서 가장 인기 있는 디자인 툴 중 하나입니다.

실제로 2022 Design Tools Survey 결과, 현업에서 UI 디자인과 프로토타이핑에 가장 많이 사용하는 툴로 피그마가 선정됐습니다. 이 설문에는 4,260명에 달하는 프로덕트 디자이너, UX/UI 디자이너, UX 리서처 등이 참여했는데요. 아래와 같이 피그마가 압도적으로 1위를 차지했습니다.

UX/UI 분야에서 커리어를 쌓고 싶다면 피그마는 필수로 알아야 할 툴이 되었는데요. 이번 글에서는 피그마 소개와 피그마를 많은 사람들이 사용하는 이유, 그리고 피그마 단축키와 유용한 기능 등 기본적인 사용 방법에 대해서도 알아보도록 하겠습니다.

피그마(Figma)란

피그마는 온라인에서 사용할 수 있는 디자인 툴로, UX/UI 디자인 및 프로토타입 제작을 위한 기능들을 제공합니다. 웹・앱・인터페이스 디자인 등 다양한 분야에서 사용되며, 디자인과 개발 과정에서 필요한 여러 협업 기능을 지원합니다.

피그마가 주목받는 이유

피그마의 장점은 다른 디자인 툴과 비교해 ‘협업 기능’이 특히 강화되어 있다는 점입니다. 피그마를 사용하면 디자이너, 마케터, 개발자 간에 더욱 원활한 소통이 가능합니다. 따라서 디자인 작업을 더욱 빠르고 효율적으로 수행할 수 있죠. 피그마가 주목받는 이유, 주요 협업 기능 4가지를 소개해 드릴게요.

개발자 핸드오프(Hand-off) 기능

피그마는 개발자 핸드오프 기능을 강화했습니다. 디자인 단계에서 개발 단계로 전달하는 과정을 핸드오프라고 하는데요. 기존 디자인 툴은 핸드오프 과정에서 많은 파일과 내용, 정보 등을 별도로 준비하고 공유해야 했습니다.

하지만 피그마는 피그마 하나로 디자인, 이미지 파일, 폰트, 간격, 사용자 인터렉션 등 모든 것을 전달할 수 있습니다. 디자이너도, 개발자도 디자인 외에 추가로 정보를 전달하고 수집할 필요가 없게 된 것이죠. 이런 장점 덕분에 디자이너와 개발자 간의 소통 시간이 단축되고, 오류도 줄어 더욱 빠르게 웹사이트 또는 앱을 출시할 수 있습니다.

실시간 공동 편집(Collaboration) 기능

피그마는 멀티 플랫폼을 지원합니다. 동시에 여러 사용자가 협업하여 디자인 작업을 할 수 있죠. 디자이너와 클라이언트, 또는 디자이너와 개발자가 함께 작업할 때 유용하며, 실시간 채팅과 주석 기능을 통해 실시간 피드백을 주고받을 수 있습니다.

디자인 시스템(Design System) 구축 기능

피그마는 디자인 시스템을 쉽게 구축할 수 있게 도와줍니다. 디자인 시스템을 구축하면, 일관된 디자인 및 브랜드 이미지를 유지할 수 있으며, 재사용 가능한 디자인 요소와 UI 컴포넌트를 제작할 수 있습니다.

편리한 라이브러리(Library) 관리 기능

피그마는 라이브러리 관리 기능을 제공하기 때문에 자주 쓰는 디자인 요소를 쉽게 관리할 수 있습니다. 팀 라이브러리에 다른 멤버가 새로운 디자인 요소를 업데이트하면 자동으로 동기화하여 사용할 수 있기 때문에 팀 라이브러리 관리도 쉽고 빠르게 가능합니다.

이외에도 피그마는 누구나 무료로 사용할 수 있다는 특징을 갖고 있습니다. 무료 버전에서 제공하는 기본적인 기능만으로도 대부분의 디자인 작업이 가능합니다. 또한, 웹 브라우저에서 작동하기 때문에 별도의 프로그램 설치없이 공유 링크 URL 하나로 어디서든 파일을 열람하고 작업할 수 있죠.

이러한 독보적인 장점과 여러 편리한 특징 덕분에, 피그마는 현재 UX/UI 분야에서 가장 많이 사용하는 필수 디자인 툴 중 하나가 됐습니다.

피그마 사용법

피그마를 사용하는 방법은 매우 간단합니다. 공식 사이트(https://www.figma.com/)에서 계정을 만들고 로그인 해주세요.

로그인 후, 새로운 파일을 만들거나 기존 파일을 열 수 있습니다.

피그마 단축키

본격적으로 피그마를 사용하기 앞서, 기본적으로 알아두면 좋을 단축키를 몇 가지 소개해 드릴게요. 단축키를 활용하면 빠르고 효율적인 작업이 가능합니다.

• V 선택 도구 : 객체를 선택하거나 이동할 때 사용됩니다.

• A 직선 도구 : 선, 화살표, 사각형 등 직선을 그릴 때 사용됩니다.

• T 텍스트 도구 : 텍스트를 입력하거나 수정할 때 사용됩니다.

• Space + 드래그 화면 이동 : 마우스 커서에 따라 원하는 영역으로 이동합니다.

• Ctrl +R 레이어 이름 변경 : 선택한 객체의 레이어 이름을 변경합니다.

• Ctrl + G 그룹화 : 여러 객체를 그룹화하여 관리하기 쉽게 만듭니다.

• Ctrl + Shift + G 그룹 해제 : 그룹화된 객체를 해제합니다.

• Ctrl + D 객체 복제 : 선택한 객체를 복제합니다.

• Ctrl + [ 뒤로 보내기 : 선택한 객체를 뒤로 보냅니다.

• Ctrl + ] 앞으로 가져오기 : 선택한 객체를 앞으로 가져옵니다.

파일 생성

Figma에서 새로운 프로젝트 파일을 만들려면 ‘New design file’ 버튼을 클릭하면 됩니다.

파일 생성 후, ‘# 모양의 아이콘’을 누르면 디바이스 옵션(예: 모바일, 태블릿, 데스크탑)을 선택할 수 있습니다. 원하는 디바이스 해상도를 선택하면 작업할 수 있는 프레임이 자동 생성됩니다.

파일 내보내기

작업을 완료했다면 저장할 레이어를 선택하고 ‘Export’를 클릭해 주세요.

원하는 파일 형식(PNG, JPG, SVG, PDF)을 지정하고, ‘Export’ 버튼을 눌러 파일을 저장합니다.

코멘트 달기

Figma는 팀원들 간의 소통을 원활하게 할 수 있도록, 파일에 댓글을 추가할 수 있는 기능을 제공합니다. 이를 통해 팀원들과 의견을 공유하고, 작업에 대한 피드백을 주고받을 수 있습니다.

파일에 댓글을 추가하려면, ‘말풍선 모양의 아이콘’을 클릭한 후 원하는 위치에 댓글을 입력하면 됩니다.

유용한 기능

오토 레이아웃 (Auto Layout)

피그마는 디자인 요소의 크기와 위치를 자동으로 조절해 주는 오토 레이아웃 기능을 제공합니다. 이 기능으로 디자인의 일관성과 효율성을 높일 수 있습니다.

오토 레이아웃을 사용할 레이어를 선택하고 Shift+A 단축키를 눌러주세요. 그러면 우측에 Auto layout 패널이 생성되며 해당 기능을 사용할 수 있게 됩니다.

플러그인 (Plugin)

피그마는 다양한 플러그인을 지원하여 디자인 작업을 보다 효율적으로 수행할 수 있습니다. 예를 들어, 자동 레이아웃 플러그인을 사용하여 레이아웃 작업을 자동화하거나, 아이콘 라이브러리 플러그인을 사용하여 아이콘 작업을 쉽게 수행할 수 있습니다.

새로운 플러그인을 추가하고 싶다면 상단의 ‘리소스 툴’을 선택하세요. 원하는 플러그인을 검색하고 설치할 수 있습니다.

UX/UI 필수 업무 툴 피그마,
PM이 꼭 알아야 하나요? 🎨

디자인인데, PM이 알아야하는 이유가 궁금했죠? PM은 협업이 핵심입니다. 기획한 내용을 디자이너/개발자/동료들에게 효과적으로 전달하고 협업을 원활하게 해야하는데요, 피그마는 시각적으로 전달하고 업무 관리가 유용한 툴로, 다양한 면에서 효율적으로 업무를 수행할 수 있습니다.

코드스테이츠 PM 부트캠프에서는 피그마를 학습하고 다양한 실습을 진행하며 실제 현업에서 필요한 기술과 지식을 습득할 수 있도록 합니다.

피그마를 학습하고 PM 취업 시장에서 경쟁력을 갖추고 싶다면, 코드스테이츠 PM 부트캠프에 합류하세요. 탄탄한 기초부터 현장에서 요구하는 필수 역량까지 모두 갖춘 서비스 기획자 커리어를 시작할 수 있습니다.

_{글 민지영 Growth Manager
편집 최인성 Content Manager, 김민정 Marketer}

---