전 세계 디자이너의 83%가 Figma를 쓰거든요(UXtools 설문, 2025). 근데 이 도구, 디자이너만의 전유물이 아니에요. 마케터가 배너를 만들고, 기획자가 앱 시안을 직접 그리는 데까지 걸리는 시간은 30분이면 충분합니다. 2026년 3월 기준, 피그마 사용법을 회원가입부터 AI 기능까지 5단계로 정리해드릴게요. 무료 플랜만으로 첫 화면을 완성하는 과정을 그대로 따라 해보세요.
목차
- Step 1: 회원가입하고 첫 화면 둘러보기
- Step 2: 프레임과 레이어 이해하기
- Step 3: 도형·텍스트·이미지 배치하기
- Step 4: 컴포넌트로 재사용 가능한 요소 만들기
- Step 5: 프로토타입 연결하고 AI 기능 활용하기
- 현업에서 바로 쓰는 프로 팁 3가지
- 초보자가 자주 저지르는 실수 4가지
- 자주 묻는 질문
✔️ Step 1: 회원가입하고 첫 화면 둘러보기
피그마는 브라우저에서 바로 실행돼요. 설치 파일이 필요 없습니다. figma.com에 접속하셔서 구글 계정으로 가입하시면 30초 안에 편집기까지 도달해요.
가입 후 처음 보이는 곳이 홈 대시보드입니다. 왼쪽에 Drafts(내 파일), 오른쪽에 최근 파일 목록이 나와요. 무료 Starter 플랜은 파일 3개, 파일당 페이지 3개까지 만드실 수 있습니다(Figma 공식 가격 페이지 기준, 2026-03). 연습용이라면 이 제한으로도 넉넉해요.
새 파일을 만드시려면 오른쪽 상단 + Design file 버튼을 누르세요. 그러면 빈 캔버스가 열리는데, 이 무한 캔버스가 피그마의 작업 공간입니다.
인터페이스를 빠르게 익혀 두시면 좋아요.
- 상단 툴바: 프레임, 도형, 텍스트, 펜 도구가 모여 있어요
- 왼쪽 패널: 레이어 목록. 내가 만든 요소가 순서대로 쌓여요
- 오른쪽 패널: 선택한 요소의 속성(크기, 색상, 폰트 등)을 조정하는 곳이에요
- 가운데 캔버스: 실제 디자인 작업 영역입니다
단축키 Ctrl + / (Mac: Cmd + /)를 누르시면 Quick Actions 검색창이 떠요. 메뉴 위치를 모르실 때 여기에 영어로 기능명을 입력하시면 바로 실행됩니다.
📌 Step 2: 프레임과 레이어 이해하기
프레임은 디자인의 ‘화면 틀’이에요. 모바일 앱이면 iPhone 16 (393 x 852px), 웹이면 Desktop (1440 x 900px) 같은 프리셋을 고르시고 시작하시면 됩니다.
프레임을 만드는 방법은 간단해요. 상단 툴바에서 Frame 도구(단축키 F)를 선택하신 뒤, 오른쪽 속성 패널에서 디바이스 프리셋을 클릭하세요. iPhone 16을 고르시면 393 x 852 크기의 프레임이 캔버스에 생깁니다.
프레임 안에 요소를 넣으시면 왼쪽 레이어 패널에 트리 구조로 표시돼요. 위에 있는 레이어가 화면에서 앞에 보입니다. 포토샵의 레이어 개념과 같아요.
한 가지 헷갈리는 점이 있어요. 피그마에는 프레임(Frame)과 그룹(Group) 두 가지 묶음 방식이 있는데, 차이를 알아야 삽질을 줄이실 수 있거든요.
- 프레임: 자체 크기를 가져요. 내부 요소가 프레임 밖으로 나가면 잘립니다. Auto Layout 적용 가능
- 그룹: 내부 요소 크기에 따라 자동으로 줄고 늘어나요. 단순 묶음용
피그마 사용법에서 가장 헷갈리는 부분이 이 차이인데, 실무에서는 프레임을 기본으로 쓰시고 임시로 요소를 묶을 때만 그룹을 쓰시면 됩니다. Ctrl + Alt + G (Mac: Cmd + Option + G)가 프레임 안에 넣기, Ctrl + G가 그룹 묶기 단축키예요.
💡 Step 3: 도형·텍스트·이미지 배치하기
프레임 안에 요소를 채울 차례예요. 앱 시안 하나를 구성하는 요소는 도형(사각형·원), 텍스트, 이미지 세 가지가 전부입니다.
도형 그리기. 상단 툴바에서 Rectangle 도구(단축키 R)를 선택하시고 캔버스에 드래그하세요. 오른쪽 속성 패널에서 크기, 모서리 둥글기(Corner radius), 색상(Fill)을 조정하시면 됩니다. 버튼을 만드실 때 Corner radius를 8px로 주시면 요즘 앱에서 흔히 보는 둥근 버튼이 돼요.
텍스트 입력. 텍스트 도구(단축키 T)를 누르시고 캔버스에 클릭하시면 입력 커서가 깜빡입니다. 한글 폰트를 쓰시려면 오른쪽 패널 Text 섹션에서 폰트를 Pretendard나 Noto Sans KR로 바꾸세요. Figma에서 무료로 쓸 수 있는 한글 폰트 중 실무에서 가장 많이 쓰이는 두 가지예요.
이미지 삽입. Ctrl + Shift + K (Mac: Cmd + Shift + K)를 누르시면 파일 탐색기가 열려요. 이미지를 선택하시고 캔버스의 도형 위에 클릭하시면, 그 도형 안에 이미지가 채워집니다. 별도의 마스크 작업 없이 사각형 안에 사진을 넣을 수 있어서 편해요.
요소 정렬이 중요한데, 여러 요소를 선택하신 뒤 상단 툴바 중앙 정렬 아이콘을 누르시면 됩니다. 단축키는 Alt + H (수평 중앙), Alt + V (수직 중앙)이에요. 2개 이상 요소를 선택하시면 균등 분배(Distribute) 옵션도 떠요.
🚨 Step 4: 컴포넌트로 재사용 가능한 요소 만들기
컴포넌트는 한 번 만들어 두면 여러 곳에서 재사용하는 ‘마스터 블록’이에요. 버튼, 네비게이션 바, 카드 같은 반복 요소를 컴포넌트로 등록하시면, 원본을 수정할 때 복사본까지 일괄 변경됩니다.
만드는 법은 이렇습니다. 요소를 선택하시고 Ctrl + Alt + K (Mac: Cmd + Option + K)를 누르세요. 그게 전부예요. 왼쪽 레이어 패널에서 요소 이름 앞에 마름모(◆) 아이콘이 붙으면 컴포넌트 등록이 된 거예요.
등록된 컴포넌트를 다른 프레임에 끌어다 놓으시면 인스턴스(복사본)가 생겨요. 인스턴스에서 텍스트나 색상을 바꾸실 수 있지만, 원본 컴포넌트를 수정하면 모든 인스턴스에 반영됩니다. 예를 들어 버튼 색상을 파란색에서 초록색으로 바꾸시면, 10개 화면에 퍼져 있는 그 버튼이 한꺼번에 바뀌어요.
실전에서 컴포넌트를 잘 쓰는 요령 하나 알려드릴게요. 네이밍 규칙을 /로 구분하시면 자동으로 폴더 구조가 생깁니다.
Button/Primary
Button/Secondary
Button/Ghost이렇게 이름을 붙이시면 Assets 패널에서 Button 폴더 안에 Primary, Secondary, Ghost가 정리돼요. 나중에 파일이 복잡해져도 쉽게 찾으실 수 있습니다.
Auto Layout 기능도 이 단계에서 익혀 두세요. 컴포넌트를 선택하시고 Shift + A를 누르시면 적용됩니다. 텍스트 길이가 바뀌면 버튼 크기가 자동으로 늘어나고, 요소 사이 간격도 일정하게 유지돼요. CSS의 Flexbox와 원리가 같다고 보시면 됩니다.
Step 5: 프로토타입 연결하고 AI 기능 활용하기
정적인 시안을 클릭 가능한 시연용 프로토타입으로 바꾸는 단계예요. 디자인 모드에서 오른쪽 상단 Prototype 탭으로 전환하세요.
연결 방법은 직관적이에요. 버튼 같은 요소를 선택하시면 오른쪽에 파란 원(연결 노드)이 나타납니다. 이걸 드래그해서 이동할 다음 화면(프레임)에 놓으세요. 그러면 화살표가 생기고, 클릭 시 화면 전환이 설정됩니다.
Interaction details 패널에서 트리거(On click, On hover)와 애니메이션(Smart animate, Dissolve)을 고르세요. Smart animate는 같은 이름의 요소끼리 자동으로 모핑 애니메이션을 만들어줘요. 이름만 맞추시면 별도 설정 없이 자연스러운 전환 효과가 나옵니다.
프로토타입 미리보기는 오른쪽 상단 ▶ 버튼(단축키 Ctrl + Alt + Enter)을 누르시면 새 창에서 열려요. 실제 앱처럼 클릭하면서 흐름을 확인하시고, 링크를 복사해 동료에게 공유하시면 됩니다.
2026년 신기능: Figma Make. 프롬프트를 입력하시면 AI가 디자인을 생성해줘요. “로그인 화면 만들어줘”라고 쓰시면 입력 필드, 버튼, 로고 배치까지 자동으로 완성됩니다. Claude Sonnet/Opus 모델이 연동되어 한국어 프롬프트도 꽤 잘 알아들어요(Figma 공식 블로그, 2026-03).
크레딧 시스템도 알아 두세요. 2026년 3월 18일부터 플랜별 크레딧 제한이 본격 적용됩니다. 무료 플랜에도 월 크레딧이 제공되지만, 한도를 넘으시면 해당 기능이 멈춰요. 유료 Professional 플랜($16/월)은 크레딧이 넉넉해서, 이 기능을 자주 쓰실 계획이라면 유료 전환을 고려하실 시점이에요.
이미지 생성 도구 비교 글에서 다른 디자인 자동화 도구와의 차이점도 확인해보세요.
현업에서 바로 쓰는 프로 팁 3가지
1. 피그마 커뮤니티에서 템플릿 가져오기. figma.com/community에 무료 UI 키트가 수만 개 있어요. 처음부터 그릴 필요 없습니다. 검색창에 “dashboard”나 “mobile app”을 입력하시면 바로 쓸 수 있는 시안이 나와요. Duplicate 버튼 한 번이면 내 파일로 복사됩니다.
2. 플러그인으로 반복 작업 줄이기. 상단 메뉴 Resources → Plugins에서 검색하세요. 추천 플러그인 3개 알려드릴게요:
- Unsplash: 무료 고화질 이미지를 바로 삽입
- Iconify: 10만 개 이상의 아이콘 라이브러리
- Autoflow: 화면 간 유저 플로우를 화살표로 자동 연결
3. 개발자 핸드오프 활용하기. 디자인이 끝나시면 Dev Mode(단축키 Shift + D)를 켜세요. 개발자가 요소를 클릭하면 CSS 코드, 간격, 색상 코드가 자동으로 표시됩니다. 디자인 시안을 만들고 “이 버튼 크기가 얼마예요?”라고 묻는 과정이 사라져요.
초보자가 자주 저지르는 실수 4가지
- 프레임 대신 사각형으로 화면을 만든다. 사각형(Rectangle)은 단순 도형이라 Auto Layout이나 프로토타입 연결이 안 돼요. 화면 틀은 꼭 Frame 도구(
F)로 만드세요.
- 레이어 이름을 정리하지 않는다. “Rectangle 47”, “Group 12” 같은 기본 이름이 100개 넘게 쌓이면 나중에 수정하실 때 찾기 어렵습니다. 만드실 때마다 “header-logo”, “cta-button” 같은 이름을 붙이는 습관이 시간을 아껴줘요.
- 로컬 폰트를 설치하지 않고 작업한다. 웹 버전 피그마는 구글 폰트만 기본 지원합니다. Pretendard 같은 로컬 폰트를 쓰시려면 Figma 데스크톱 앱을 설치하시거나 Font Installer 플러그인을 쓰셔야 해요. 안 하시면 폰트가 깨져서 보입니다.
- 한 프레임에 모든 화면을 우겨넣는다. 화면 1개 = 프레임 1개가 원칙이에요. 로그인, 홈, 설정 페이지는 각각 별도 프레임으로 만드셔야 프로토타입 연결도 되고 관리도 수월합니다.
자주 묻는 질문
피그마 무료 플랜으로 어디까지 할 수 있나요?
무료 Starter 플랜은 디자인 파일 3개, 파일당 페이지 3개까지 만드실 수 있어요. 뷰어는 무제한이라 팀원에게 공유해서 피드백 받는 건 자유롭게 됩니다. 개인 프로젝트나 포트폴리오 1~2개를 작업하시기엔 부족하지 않아요. 다만 파일 히스토리가 30일까지만 보관되므로, 오래된 버전으로 되돌리시려면 유료 플랜이 필요합니다. 팀 프로젝트를 본격적으로 운영하신다면 Professional 플랜(연결제 $12/월)을 검토해보세요.
피그마와 포토샵은 뭐가 다른가요?
포토샵은 사진 보정·합성에 특화된 래스터(픽셀) 기반 도구고, 피그마는 UI/UX 디자인에 특화된 벡터 기반 도구예요. 가장 큰 차이는 협업 방식에 있어요. 포토샵은 파일을 주고받으셔야 하지만, 피그마는 구글 독스처럼 여러 사람이 동시에 한 파일에서 작업할 수 있습니다. 웹 디자인이나 앱 화면 설계에는 피그마가 표준이고, 사진 편집에는 여전히 포토샵이 낫습니다.
피그마 AI 기능(Figma Make)은 무료인가요?
2026년 3월 기준, 모든 플랜에 AI 크레딧이 포함되어 있어요. 무료 플랜에도 월별 크레딧이 제공되므로 Figma Make를 체험해보실 수 있습니다. 다만 2026년 3월 18일부터 크레딧 한도가 본격 적용되어, 자주 쓰시면 한 달 중간에 소진될 수 있어요. 크레딧이 바닥나시면 다음 달 리셋까지 기다리시거나, 유료 구독으로 추가 크레딧을 구매하시는 방식이에요.
디자인을 몰라도 피그마를 배울 수 있나요?
배우실 수 있어요. 피그마는 도구일 뿐이거든요. 색 조합이나 레이아웃 감각은 별개 문제지만, 도구 조작 자체는 파워포인트를 다룰 줄 아시면 하루면 익히실 수 있습니다. 실제로 PM, 마케터, 개발자 분들이 와이어프레임이나 간단한 배너를 직접 만드는 경우가 늘고 있어요. AI PPT 도구로 프레젠테이션을 만들어보신 경험이 있다면 피그마도 금방 손에 붙습니다.
피그마 데스크톱 앱과 웹 버전 차이가 있나요?
핵심 기능은 동일해요. 차이는 두 가지입니다. 데스크톱 앱은 로컬 폰트를 자동으로 인식하고, 오프라인에서도 마지막 작업 파일을 여실 수 있어요. 웹 버전은 별도 설치 없이 브라우저만 있으시면 되지만, 로컬 폰트 사용 시 Font Installer 플러그인이 필요합니다. 한글 커스텀 폰트를 자주 쓰신다면 데스크톱 앱 설치를 권합니다.
오늘 따라 하신 내용을 점검해 보세요.
- 피그마 가입 + 첫 파일 생성 완료
- 프레임 1개에 도형·텍스트·이미지를 배치해서 화면 1개 완성
- 컴포넌트 1개 등록하고 다른 프레임에 인스턴스로 복사
세 가지를 마치셨다면 피그마 기본기는 끝난 셈이에요. 다음은 커뮤니티 템플릿을 하나 복사해서 내 프로젝트에 맞게 고쳐 보세요. 빈 캔버스에서 시작하는 것보다 템플릿을 뜯어보시는 게 실력이 훨씬 빨리 늘어요.
작성 기준: Figma 웹 버전 (figma.com), 2026년 3월 11일 접속 기준. 무료 Starter 플랜 환경.
참고 출처:
마지막 확인 날짜: 2026-03-11
