UI 디자인 툴을 처음 배우려고 검색하면 빠지지 않고 등장하는 이름이 있다. 바로 피그마(Figma)다. 디자이너뿐 아니라 기획자, 개발자까지 함께 쓰는 경우가 많아졌고, 채용 공고에서도 ‘피그마 활용 가능’이라는 문구를 어렵지 않게 볼 수 있다. 그런데 막상 피그마를 처음 열어보면 화면 구성부터 낯설어서 어디서부터 손을 대야 할지 막막하기도 하다.
이 글에서는 피그마가 어떤 도구인지 큰 그림을 먼저 잡고, 핵심 기능의 작동 방식을 훑은 뒤, 실무에서 자주 쓰이는 워크플로까지 단계적으로 정리한다. 피그마는 브라우저에서 바로 실행할 수 있는 클라우드 기반 UI 디자인·프로토타이핑 도구로, 별도 설치 없이 협업이 가능하다는 점이 가장 큰 특징이다.
피그마란 무엇이고 왜 많이 쓰일까
피그마는 인터페이스 디자인에 특화된 그래픽 편집 도구다. 포토샵이나 일러스트레이터 같은 전통적인 그래픽 툴과 다른 점은 명확하다. 웹 브라우저만 있으면 접속할 수 있고, 같은 파일을 여러 사람이 동시에 열어 실시간으로 편집할 수 있다. 구글 독스에서 문서를 함께 수정하는 것과 비슷한 방식이라고 생각하면 이해가 빠르다.
이 실시간 협업 구조 덕분에 디자이너가 작업한 화면을 기획자가 바로 확인하고, 개발자가 해당 요소의 크기·색상·간격 정보를 직접 추출해 가는 흐름이 자연스럽게 이뤄진다. 별도의 파일 전달이나 버전 관리 스트레스가 줄어드는 셈이다.
데스크톱 앱도 있지만 핵심 엔진은 웹 기술 기반이라 맥이든 윈도우든 크게 가리지 않는다. 무료 플랜으로도 기본적인 디자인 작업이 가능하니, 처음 배울 때 비용 부담이 적다는 점도 진입 장벽을 낮춰준다. 다만 플랜별 기능 범위나 가격 정책은 수시로 바뀔 수 있으므로, 정확한 요금은 피그마 공식 홈페이지에서 직접 확인하는 것이 좋다.
피그마 화면 구성과 핵심 기능 이해하기
처음 피그마를 열면 크게 세 영역이 눈에 들어온다.
- 왼쪽 패널(레이어 패널) — 현재 페이지에 있는 모든 요소가 트리 구조로 나열된다. 포토샵의 레이어 창과 비슷하지만, 프레임·그룹·컴포넌트 같은 피그마 고유 개념이 추가된다.
- 가운데 캔버스 — 실제 디자인 작업이 이뤄지는 무한 스크롤 공간이다. 여러 화면을 한 캔버스 위에 나란히 배치할 수 있어 흐름을 한눈에 파악하기 편하다.
- 오른쪽 패널(속성 패널) — 선택한 요소의 크기, 색상, 타이포그래피, 정렬 등 세부 속성을 조정하는 곳이다.
이 기본 레이아웃만 파악해도 절반은 온 거다.
꼭 알아야 할 개념 네 가지
| 개념 | 쉽게 말하면 | 실무에서 왜 중요한가 |
|---|---|---|
| 프레임(Frame) | 화면 하나, 또는 특정 영역을 감싸는 ‘틀’ | 반응형 레이아웃의 기준 단위가 된다 |
| 컴포넌트(Component) | 반복 사용할 UI 조각의 ‘원본’ | 버튼·카드 등을 원본 하나로 관리해 수정 시 일괄 반영 |
| 오토 레이아웃(Auto Layout) | 요소 간 간격·정렬을 자동으로 잡아주는 규칙 | 내용물 길이가 바뀌어도 레이아웃이 깨지지 않는다 |
| 스타일 & 변수(Variables) | 색상·폰트·간격 등을 이름 붙여 저장하는 것 | 디자인 시스템 구축의 출발점, 다크모드 전환 등에 활용 |
이 네 가지를 얼마나 익숙하게 다루느냐가 ‘피그마를 쓸 줄 아는 사람’과 ‘피그마로 그림만 그리는 사람’의 차이를 만든다.
실무에서 자주 쓰이는 피그마 활용 흐름
실제 프로젝트에서 피그마가 사용되는 흐름은 대략 이렇다.
- 와이어프레임 단계 — 사각형과 텍스트만으로 화면 구조를 잡는다. 이때 프레임과 오토 레이아웃을 적극 활용하면 나중에 디자인을 입힐 때 구조를 다시 잡을 필요가 없다.
- 비주얼 디자인 단계 — 색상, 아이콘, 이미지 등을 채워 넣는다. 컴포넌트로 만들어 둔 버튼이나 입력 필드를 가져다 쓰면 화면 간 일관성이 유지된다.
- 프로토타이핑 — 화면과 화면을 연결해 클릭·스와이프 같은 인터랙션(사용자 조작에 대한 반응)을 시뮬레이션한다. 피그마 자체 프로토타입 기능으로 간단한 전환 효과까지 구현할 수 있다.
- 개발 핸드오프 — 개발자가 ‘Dev Mode'(개발자 모드)를 통해 요소별 CSS 속성, 간격, 에셋(이미지·아이콘 파일)을 직접 확인하고 추출한다.
이 과정이 하나의 파일 안에서 끊김 없이 이어진다는 게 피그마의 강점이다. 예전에는 디자인 파일 → 별도 프로토타입 도구 → 스펙 문서 작성으로 단계마다 도구가 바뀌었는데, 그 과정이 상당 부분 통합된 셈이다.
피그마 초보가 흔히 겪는 실수와 주의할 점
처음 피그마를 다룰 때 자주 빠지는 함정이 몇 가지 있다.
프레임 대신 그룹만 쓰는 실수. 그룹(Group)은 단순히 요소를 묶어주는 역할이고, 프레임은 자체 크기와 클리핑(영역 밖 잘라내기), 오토 레이아웃 적용이 가능하다. 모바일 화면 하나를 만들 때 반드시 프레임으로 시작해야 나중에 반응형 조절이 수월하다.
컴포넌트를 안 만들고 복사·붙여넣기만 하는 것도 흔하다. 파일이 작을 때는 상관없어 보이지만, 화면이 20~30개 넘어가면 버튼 색상 하나 바꾸는 데 모든 화면을 일일이 수정해야 하는 상황이 온다. 귀찮더라도 반복되는 요소는 일찍 컴포넌트로 등록해 두는 습관이 중요하다.
또 하나, 네이밍. 레이어 이름을 ‘Rectangle 47’ 같은 기본값 그대로 두면 나중에 본인도 못 알아본다. 협업 상황에서는 더 심각해진다. ‘btn_primary’, ‘card_product’ 같은 식으로 역할을 알 수 있는 이름을 붙이자.
피그마를 더 잘 쓰기 위해 알아두면 좋은 것들
피그마는 플러그인 생태계가 꽤 활발하다. 아이콘 라이브러리를 불러오거나, 더미 텍스트·이미지를 자동 채워주거나, 색상 접근성(색약·색맹 사용자 고려)을 체크해주는 플러그인 등이 커뮤니티에 공유되어 있다. 작업 효율이 눈에 띄게 올라가니 자주 쓰는 유형을 두세 개 정도 설치해 두면 좋다.
피그마 커뮤니티 파일도 적극 활용할 만하다. 다른 사용자가 공개한 디자인 시스템, UI 키트, 템플릿을 무료로 복제해서 구조를 뜯어볼 수 있다. 잘 만들어진 파일의 레이어 구조와 컴포넌트 설계를 살펴보는 것만으로도 실력이 는다.
최근에는 피그마 내에서 AI 기반 기능이 점차 추가되고 있다는 소식도 들린다. 다만 이런 신규 기능은 업데이트 주기에 따라 범위가 달라질 수 있으니, 피그마 공식 블로그나 릴리스 노트를 가끔 확인하는 것을 추천한다.
자주 묻는 질문 (FAQ)
Q: 피그마는 무료로 쓸 수 있나요?
A: 무료 플랜이 존재하며 기본적인 디자인 작업은 가능하다. 다만 프로젝트 수나 협업 기능에 제한이 있을 수 있으므로 공식 홈페이지에서 최신 플랜 정보를 확인하는 것이 정확하다.
Q: 피그마와 Adobe XD는 어떤 차이가 있나요?
A: 둘 다 UI 디자인 도구지만, 피그마는 브라우저 기반 실시간 협업에 강점이 있고, Adobe XD는 어도비 생태계와의 연동이 특징이었다. 다만 Adobe가 XD의 개발 방향을 변경한 바 있으므로 현재 상황은 별도로 확인이 필요하다.
Q: 비디자이너(기획자·개발자)도 피그마를 배워야 하나요?
A: 필수는 아니지만 기본 조작과 Dev Mode 사용법 정도를 익혀두면 커뮤니케이션 비용이 크게 줄어든다. 디자인을 직접 하지 않더라도 파일을 읽을 줄 아는 것만으로 충분히 도움이 된다.
Q: 피그마 학습에 추천할 만한 리소스가 있나요?
A: 피그마 공식 유튜브 채널과 Help Center 문서가 체계적으로 잘 정리되어 있다. 한국어 강의는 인프런, 유튜브 등에서 ‘피그마 기초’로 검색하면 다양한 무료·유료 콘텐츠를 찾을 수 있다.
Q: 피그마 파일을 오프라인에서도 편집할 수 있나요?
A: 데스크톱 앱 사용 시 최근 열었던 파일에 한해 제한적으로 오프라인 편집이 가능한 것으로 알려져 있다. 다만 핵심 기능인 실시간 동기화와 클라우드 저장은 인터넷 연결이 필요하다.
이 글은 일반적인 정보 제공 목적이며, 실제 제품의 사양·가격·기능은 시점에 따라 달라질 수 있습니다. 구매 결정 전 공식 정보를 확인하시기 바랍니다.
※ 작성일: 2026년 07월 20일 기준