피그마 사용법 처음 켰다면 이 순서대로 해보세요

피그마(Figma)는 브라우저에서 바로 열리는 UI·UX 디자인 도구예요. 프로그램을 깔지 않아도 되고, 링크 하나로 여러 사람이 같은 파일에서 동시에 작업할 수 있어서 앱 화면이나 웹페이지 시안을 만들 때 가장 많이 쓰여요. 계정은 만들었는데 빈 화면 앞에서 손이 멈췄다면, 첫 성공까지 가는 순서만 짧게 따라와 보세요.

피그마는 뭘 하는 도구예요

피그마는 화면을 그림으로 그려서 확인하는 도구예요. UI는 앱이나 웹에서 눈에 보이는 화면이고, UX는 그 화면을 쓰는 사람이 지나가는 흐름이에요. 피그마는 이 둘을 한 파일 안에서 그려보고, 여러 사람이 함께 보면서 고치는 데 씁니다.

가장 큰 차이는 파일을 주고받지 않는다는 점이에요. 포토샵은 파일을 저장해서 상대에게 보내고, 상대가 고쳐서 다시 보내는 방식이죠. 피그마는 클라우드에 파일이 있고 여러 사람이 같은 파일을 동시에 열어서 각자 커서를 움직일 수 있어요. 구글 독스에서 여러 명이 한 문서를 같이 고치는 것과 같은 원리예요. 저장 버튼을 따로 누르지 않아도 버전이 자동으로 쌓입니다.

2016년에 나온 뒤로 자리가 꽤 굳었어요. 2022 Design Tools Survey에는 프로덕트 디자이너, UX/UI 디자이너, UX 리서처 등 4,260명이 참여했는데, UI 디자인과 프로토타이핑에 가장 많이 쓰는 툴로 피그마가 1위로 뽑혔어요. UXtools 2025 설문에서는 전 세계 디자이너의 83%가 쓴다고 나오고요.

디자이너만 쓰는 물건도 아니에요. 마케터가 배너 시안을 만들고, 기획자가 앱 화면을 직접 그려서 개발자에게 넘기는 일이 늘었어요. 파워포인트를 다룰 줄 알면 도구 조작 자체는 하루면 손에 붙는다는 이야기도 있어요.

한 가지만 미리 알아두면 좋아요. 피그마는 디자인 도구지, 홈페이지를 배포하는 도구가 아니에요. 아무리 잘 그려도 그건 시안이고, 실제로 브라우저에서 열리는 페이지가 되려면 구현 단계가 따로 필요해요. 이 지점에서 많이들 한 번 헷갈려 하더군요.

기본 정보 한눈에 보기

시작하기 전에 조건부터 확인하고 가면 마음이 편해요. 특히 무료로 어디까지 되는지가 제일 궁금하실 거예요.

무료 Starter 플랜으로도 프레임, 컴포넌트, 프로토타입, 내보내기 같은 핵심 기능은 다 쓸 수 있어요. 다만 디자인 파일 3개, 파일당 페이지 3개까지라는 제한이 걸려요. 뷰어는 무제한이라 팀원에게 링크를 공유해서 피드백을 받는 건 자유롭게 됩니다. 개인 연습이나 포트폴리오 한두 개에는 부족하지 않은 양이에요.

피그마 기본 정보

시작하기 계정 만들고 빈 캔버스까지

브라우저만 있으면 돼요. 설치 파일을 받을 필요가 없어서 주소만 치면 바로 시작입니다.

1. figma.com에 접속해요.
2. 구글 계정으로 가입하면 30초 안에 편집기까지 도달해요.
3. 가입 후 처음 보이는 곳이 홈 대시보드예요. 왼쪽에 Drafts(내 파일), 오른쪽에 최근 파일 목록이 나와요.
4. 오른쪽 상단의 + Design file 버튼을 누르면 빈 캔버스가 열려요. 이 무한 캔버스가 작업 공간입니다.

캔버스를 열면 화면이 네 덩어리로 나뉘어 있어요. 처음엔 어디가 뭔지 몰라서 헤매게 되더라고요.

• 상단 툴바 — 프레임(F), 도형(R·O), 펜(P), 텍스트(T) 같은 주요 도구가 모여 있어요. Actions 버튼에서 AI 기능에도 접근할 수 있어요.
• 왼쪽 레이어 패널 — 캔버스에 놓인 프레임, 텍스트, 도형이 순서대로 트리 구조로 표시돼요. 위에 있는 레이어가 화면에서 앞에 보여요.
• 가운데 캔버스 — 실제 작업 영역이에요. Ctrl(맥은 Cmd) + 스크롤로 확대·축소합니다.
• 오른쪽 속성 패널 — 선택한 요소의 크기, 색상, 폰트, 효과를 조정해요. Design, Prototype, Variables 탭으로 전환됩니다.

브라우저 주소창에 입력하세요

figma.com

이렇게 말하면 돼요

피그마에는 메뉴를 뒤지지 않고 바로 시킬 수 있는 입력창이 있어요. 하나는 **Quick Actions(빠른 실행)**이고, 다른 하나는 AI 프롬프트예요.

Quick Actions는 명령 검색창이에요. Ctrl + /(맥은 Cmd + /)를 누르면 뜨는데, 메뉴가 어디 있는지 모를 때 여기에 영어로 기능 이름을 입력하면 바로 실행돼요. 메뉴 위치를 한참 찾는 일이 확 줄어요.

AI 쪽은 프롬프트를 그대로 써넣는 방식이에요. 2026년에 들어온 Figma Make는 한국어 프롬프트도 꽤 잘 알아들어요. "로그인 화면 만들어줘"라고 쓰면 입력 필드, 버튼, 로고 배치까지 자동으로 잡아줍니다. 빈 캔버스에서 첫 선을 긋는 게 제일 어려운데, 이걸로 시작점을 받아두면 훨씬 편해요.

커뮤니티 검색창도 자주 쓰게 돼요. figma.com/community에 무료 UI 키트가 수만 개 올라와 있어서, 처음부터 직접 그릴 필요가 없어요. 마음에 드는 걸 찾으면 Duplicate 버튼 한 번으로 내 파일에 복사됩니다.

컴포넌트에 이름을 붙일 때는 슬래시(/)를 넣어보세요. Assets 패널에서 자동으로 폴더 구조가 생겨서, 나중에 파일이 복잡해져도 찾기 쉬워요.

메뉴가 어디 있는지 모를 때, Quick Actions에 입력 (Ctrl + /)

frame

따라 해보기 첫 5분에 로그인 화면 한 장

잘 되는 것과 안 되는 것

처음 며칠 사이에 갈리는 지점이 있어요. 같은 걸 만들려고 해도 어떤 도구로 시작했느냐에 따라 뒤에서 할 수 있는 일이 완전히 달라져요. 아래는 실제로 해보면 바로 체감되는 차이예요.

특히 첫 번째 줄이 중요해요. 화면을 사각형으로 그려두면 예쁘게는 보이지만, 나중에 오토 레이아웃을 걸거나 프로토타입을 연결하려는 순간 막혀요. 그때 처음부터 다시 그리는 게 제일 힘들더라고요.

이렇게 하면 이렇게 나와요

프레임과 그룹, 그리고 포토샵과 뭐가 다른가요

초보자가 가장 많이 넘어지는 지점이 프레임(Frame)과 그룹(Group)의 차이예요. 이름만 보면 둘 다 '묶는 것' 같죠. 결론부터 말하면 실무에서는 프레임을 기본으로 쓰고, 그룹은 잠깐 요소를 묶어둘 때만 씁니다.

프레임은 자체 크기를 가져요. 안에 있는 요소가 프레임 밖으로 나가면 잘려요. 그래서 '화면 한 장'을 표현하기에 맞아요. 오토 레이아웃도 프레임에만 걸 수 있어요. 그룹은 요소를 임시로 묶는 용도예요.

프레임을 다른 프레임 안에 넣고 싶으면 Ctrl + Alt + G, 그냥 묶고 싶으면 Ctrl + G예요. 맥은 각각 Cmd + Option + G, Cmd + G고요.

포토샵과 비교하면 목적 자체가 달라요. 어느 쪽이 낫다고 할 문제는 아니고, 하려는 일이 다르면 도구도 달라지는 거예요.

화면 틀을 만들 때, 프레임과 사각형

묶을 때 쓰는 단축키

Ctrl + G              그룹으로 묶기
Ctrl + Alt + G        프레임 안에 넣기

(Mac은 Cmd + G, Cmd + Option + G)

일각에서는 이런 반응도 있어요

좋다고 하는 쪽부터 볼게요. 4,260명이 참여한 2022 Design Tools Survey에서 UI 디자인과 프로토타이핑에 가장 많이 쓰는 툴 1위로 뽑혔고, UXtools 2025 설문에서는 전 세계 디자이너의 83%가 쓴다고 나와요. 실제로 써본 사람들이 꼽는 이유는 협업이에요. 디자인, 이미지 파일, 폰트, 간격, 인터랙션까지 한 파일 안에 들어 있어서, 개발자에게 넘길 때 스펙 문서를 따로 만들지 않아도 돼요. 실시간 채팅과 댓글로 피드백을 주고받는 것도 같은 이유고요.

아쉬워하는 쪽은 대부분 무료 플랜 조건에서 나와요. 파일 3개, 페이지 3개 제한이 붙어 있어서 클라이언트와 여러 프로젝트를 동시에 굴리는 프리랜서라면 금방 채워져요. 팀 라이브러리도 무료에서는 못 쓰고, 버전 기록도 30일까지만 남아요. AI 기능도 무료 플랜에 월 크레딧이 있긴 한데, 자주 쓰면 한 달 중간에 소진될 수 있어요.

의견이 갈리는 지점은 **'무료로 충분한가'**예요. 개인 학습이나 단발성 프로젝트라면 무료로도 핵심 기능을 다 경험할 수 있다는 쪽이고, 팀 단위 협업이나 지속적인 프로젝트 관리까지 가면 유료 전환이 현실적이라는 쪽이에요. 위에 적은 긍정 쪽 숫자는 설문 두 건에서 나온 거고, 아쉬운 이야기는 조건에서 비롯된 것들이라 성격이 좀 달라요.

조심할 점

돈이 들거나 되돌리기 번거로워지는 지점은 미리 알아두는 게 좋아요. 아래는 처음 한두 주에 실제로 자주 걸리는 것들이에요.

AI 크레딧은 2026년 3월 18일부터 플랜별 한도가 본격 적용됐어요. 무료 플랜에도 월 크레딧이 들어오지만, 넘기면 다음 달 리셋까지 해당 기능이 멈춰요. 크레딧이 바닥나면 남은 기간 동안 다른 작업으로 돌리는 게 편해요.

폰트 문제도 은근히 발목을 잡아요. 웹 버전 피그마는 구글 폰트만 기본 지원해서, Pretendard 같은 로컬 폰트를 쓰면 글자가 깨져 보여요. 데스크톱 앱을 설치하거나 Font Installer 플러그인을 써야 제대로 나옵니다.

이런 상황을 조심하세요

누구에게 맞나요

잘 맞는 사람

• 앱이나 웹 화면 시안을 처음 그려보려는 사람
• 팀원과 같은 파일에서 동시에 작업해야 하는 사람
• 만든 시안을 개발자에게 넘겨야 하는 기획자, 마케터
• 무료로 시작해서 쓸 만한지 먼저 확인하고 싶은 학생

안 맞는 사람

• 사진 보정이나 합성이 주 목적인 사람 — 픽셀 기반인 포토샵이 더 맞아요
• 코드 없이 바로 배포되는 홈페이지를 원하는 사람 — 피그마는 시안까지고, 구현 단계가 따로 필요해요
• 오프라인 환경에서만 작업해야 하는 사람 — 데스크톱 앱으로 마지막 작업 파일을 여는 정도는 되지만, 협업의 핵심은 웹에 있어요

도구를 익히는 데 걸리는 시간은 집중하면 1~2일이면 핵심까지 갑니다. 처음부터 완벽하게 그리려고 하지 마세요. 어차피 첫 파일은 연습용이에요.

오늘 해볼 건 하나예요. figma.com을 열어서 구글 계정으로 들어가고, 새 파일을 만든 다음 F를 눌러 프레임 하나를 놓아보세요. 그거면 첫 번째 성공이에요.

시작 전 확인할 것

• 화면 틀을 프레임(F)으로 만들었는지 확인했어요
• 한글 폰트를 Pretendard나 Noto Sans KR로 바꿨어요
• 버튼 같은 반복 요소에 이름을 붙였어요
• 레이어 이름이 Rectangle 12처럼 남아 있지 않아요
• 메뉴가 안 보이면 Ctrl + / 로 검색해봤어요
• 무료 플랜 파일 3개 중 몇 개를 썼는지 확인했어요

참고 링크

• 공식 Figma Learn - Help Center — help.figma.com
• 처음 시작하는 사람을 위한 피그마 사용법 완벽 정리! | 기술정보 블로그 | 디자인키트 — designkits.co.kr
• 2026년 초보자를 위한 피그마 사용법 소개 — pixso.net
• 피그마(Figma) 사용법 | 기본 단축키부터 유용한 기능까지 - 코드스테이츠 공식 블로그 — codestates.com
• 피그마 사용법 — 비전공자도 따라 하는 5단계 입문 가이드 (2026) — 똑똑한 테크 노트 — smarttechnote.com
• 피그마 사용법 핵심 총정리 — 기초·웹사이트 만들기·무료 유료 차이·UI 디자인·개발자 활용 한눈에 : 전문 칼럼 | 홈페이지 템플릿 | 웹… — temkit.kr