UI/UX 디자인 작업에 피그마는 필수 도구가 됐습니다.
클라우드 기반으로 어디서나 접근 가능한 협업 플랫폼이죠.
이 가이드에서 피그마 다운로드 방법과 단축키부터 활용 꿀팁까지 다뤄보겠습니다.
처음 시작하는 분들도 쉽게 따라올 수 있도록 구성했습니다.
피그마란 무엇인가?
사진 출처 (designcompass)
피그마는 브라우저 기반 디자인 협업 툴입니다.
별도 프로그램 설치 없이 웹에서 바로 작업할 수 있죠.
실시간 협업이 가능해 팀원들과 동시 작업이 가능합니다.
파일 전송 없이 링크 하나로 모든 것을 공유할 수 있으며, 포토샵이나 일러스트와 달리 클라우드에 자동 저장됩니다.
버전 관리가 자동으로 이뤄져 작업 이력을 추적할 수 있으며, 개발자에게 디자인을 전달할 때도 매우 편리하죠.
CSS 코드를 자동으로 생성해주는 기능까지 갖췄고, 덕분에 2021년 기준 UI 디자인 툴 점유율 1위를 차지했습니다.
무료 플랜으로도 충분히 개인 작업이 가능하며, 윈도우, 맥, 리눅스 모두 지원하는 범용성이 강점입니다.
크롬, 사파리 등 모든 브라우저에서 실행 가능하니, 바로 활용해보시길 바랍니다.
피그마 다운로드 완벽 가이드 – PC 데스크톱 버전
사진 출처 (figma)
피그마 공식 사이트 figma.com에 접속한 뒤, 우측 상단의 Get started for free 버튼을 클릭합니다.
구글 혹은 메일로 로그인한 후, 상단 메뉴에서 Downloads를 찾아 클릭하십시오.
자신의 운영체제에 맞는 버전을 선택해 다운받으시면 됩니다.
윈도우는 Windows 10 이상 64비트 환경이 필요하며, 맥은 macOS 11 이상이면 문제없이 설치됩니다.
다운로드한 파일을 실행해 설치를 진행하고, 완료 후 앱을 실행하고 계정으로 로그인합니다.
피그마 에이전트가 함께 설치되어 로컬 폰트를 사용할 수 있습니다.
브라우저 버전도 있지만 앱 버전은탭 관리 스트레스 없이 독립적인 작업 환경을 갖출 수 있습니다.
단축키 사용이 더 직관적이고 속도도 빠르며, 브라우저 명령어와 충돌하는 문제도 없습니다.
피그마 앱 다운로드 – 모바일에서 확인하기
사진 출처 (figma)
iOS와 안드로이드 모두 공식 앱을 지원합니다.
앱스토어나 구글 플레이에서 설치가 가능하며, 용량도 가볍습니다.
모바일 앱은 주로 파일 확인과 댓글 작성용이며, 실제 디자인 편집은 작동하지 않습니다.
하지만 프로토타입을 실제 기기에서 테스트할 수 있죠.
미러 기능으로 데스크톱 작업을 실시간 확인 가능하며, 이동 중에도 팀원들과 소통하며 피드백을 주고받을 수 있습니다.
댓글 알림을 받아 즉시 응답할 수 있으며, 파일 링크를 공유하고 권한을 관리하는 것도 가능하죠.
디자인이 실제 화면에서 어떻게 보이는지 확인하는데 적합한 앱입니다.
피그마 폰트 다운로드 및 로컬 폰트 설정하기
사진 출처 (designcompass)
피그마는 기본적으로 구글 폰트를 제공합니다.
하지만 상업용 한글 폰트는 직접 설치해야 하며, 폰트 파일은 TTF 또는 OTF 형식만 지원합니다.
윈도우는 폰트 파일을 Fonts 폴더에 추가하면 되며, 맥은 Font Book 앱을 열어 폰트를 설치하면 됩니다.
폰트 설치 후 피그마 글꼴 도우미를 다운받아야 합니다.
공식 다운로드 페이지에서 Font Installer를 받은 뒤, 설치 후 브라우저를 새로고침하면 됩니다.
다만, 팀원과 파일을 공유할 때 상대방 컴퓨터에 같은 폰트가 없으면 대체 폰트로 출력됩니다.
그만큼, 웹폰트로 배포된 폰트를 사용하는 게 가장 안전합니다.
피그마 사용법 기초 – 인터페이스 이해하기
피그마 화면은 크게 네 영역으로 나뉩니다.
좌측은 레이어 패널로 모든 요소가 계층 구조로 보입니다.
중앙은 캔버스로 실제 작업이 이뤄지는 공간이죠.
우측은 디자인 패널로 속성을 조정하는 곳입니다.
상단 툴바에는 자주 쓰는 도구들이 배치돼 있습니다.
프레임 생성은 F 키를 누르거나 툴바에서 선택합니다.
도형 도구는 R(사각형), O(원), L(선) 단축키로 빠르게 접근하죠.
텍스트는 T 키를 눌러 바로 추가할 수 있습니다.
컴포넌트 개념을 이해하면 작업 속도가 배로 빨라집니다.
반복되는 요소를 컴포넌트로 만들어 재사용하십시오.
한 곳을 수정하면 모든 인스턴스가 자동 업데이트되며, 오토 레이아웃 기능으로 반응형 디자인도 쉽게 구현됩니다.
단축키로 작업 속도 3배 높이기
사진 출처 (티스토리)
단축키에 익숙해지면 마우스 이동이 현저히 줄어듭니다.
손에 익을 때까지 자주 사용하며 연습하십시오.
Ctrl(Cmd) + / : 좌우 패널을 숨겨 캔버스를 넓게 봅니다.
작은 화면에서 디자인을 확인할 때 매우 유용하죠.
Shift + 1 : 캔버스 내 모든 작업을 한눈에 보여줍니다.
Shift + 2 : 선택한 프레임을 화면에 꽉 차게 확대합니다.
Ctrl(Cmd) + D : 연속 복사 붙여넣기가 가능합니다.
동일한 간격으로 요소를 반복 배치할 때 편리하죠.
Ctrl(Cmd) + Alt + C/V : 속성만 복사해서 붙여넣습니다.
색상이나 폰트 스타일만 가져오고 싶을 때 사용하십시오.
V : 선택 도구로 요소를 이동하고 크기를 조절합니다.
K : 비율 조정 도구로 여러 요소를 함께 확대/축소하죠.
Ctrl(Cmd) + I : 컬러 스포이드를 즉시 불러옵니다.
숫자 키 1~9 : 선택한 요소의 투명도를 빠르게 설정합니다.
Ctrl(Cmd) + Shift + / : 전체 단축키 목록을 확인합니다.
피그마 활용 꿀팁 – 실전에서 사용하는 노하우
플러그인을 적극 활용하면 작업 효율이 극대화됩니다.
Ctrl(Cmd) + / 후 Plugins를 검색해 설치한 뒤, Unsplash 플러그인으로 무료 이미지를 바로 삽입할 수 있습니다.
Iconify는 수백만 개의 아이콘을 무료로 제공하죠.
컴포넌트 라이브러리를 관리하면 팀 전체가 사용할 디자인 시스템을 구축하기 좋습니다.
버튼, 입력창 등 공통 요소를 미리 만들어두면 일관성 있는 디자인을 유지하면서 시간도 절약됩니다.
또 프로토타입 기능으로 인터랙션을 구현할 수 있습니다.
우측 패널에서 Prototype 탭으로 전환한 뒤, 요소를 드래그해 다른 프레임과 연결하시면 됩니다.
Present 버튼으로 실제 작동하는 것처럼 테스트할 수 있죠.
버전 히스토리 기능도 중요합니다.
File 메뉴에서 Show version history를 선택하면 과거 작업 상태로 언제든 되돌릴 수 있습니다.
클라이언트가 이전 버전을 요청할 때 매우 유용한 기능이죠.
글을 마치며
영상 출처 (rddraw)
피그마는 배우기 쉽고 활용도가 높은 툴입니다.
단축키를 손에 익히고 플러그인을 탐색하다 보면, 어느새 전문가 수준에 도달할 것입니다.
커뮤니티에서 무료 템플릿을 다운받아 분석하는 것도 실력을 높이는 지름길입니다.
실제 프로젝트에 적용하며 경험을 쌓아가다 보면, 피그마와 함께 여러분의 디자인 실력이 한 단계 성장할 것입니다.
테크 관련 외, 다양한 영화/드라마에 관심이 있으신 분들은 달콤무비닷컴을 방문해보시길 바랍니다.
