피그마 사용법 기초부터 실무까지, 2026년 최신 기능까지 한 번에 정리

피그마, 왜 다들 이걸로 넘어갔을까

포토샵이나 일러스트로 상세페이지 만들다가 “피그마로 바꿔야 하나” 고민 중이라면, 결론부터 말하면 바꾸는 게 맞습니다. 피그마는 브라우저 기반으로 작동하는 UI/UX 디자인·프로토타입 도구인데, 데스크톱 앱도 macOS·Windows용으로 제공되고 같은 계정으로 동기화됩니다. 즉 회사에서는 웹으로, 집에서는 앱으로 작업해도 파일이 그대로 이어집니다.

제품군도 생각보다 넓습니다. 디자인 작업용 Figma Design 외에 화이트보드형 협업 도구 FigJam, 슬라이드 제작용 Figma Slides, 웹사이트 빌더 Figma Sites, 이미지·텍스처 생성 도구 Figma Weave, 그리고 Design agent 같은 AI 기능까지 하나의 생태계 안에 들어와 있습니다.

이 글은 “기능 나열”보다 실제로 사람들이 어디서 막히는지에 초점을 맞췄습니다. 튜토리얼 열 개를 봐도 해결 안 되던 부분들, 여기서 정리합니다.

피그마 요금제, 무료로 어디까지 가능한가

가장 먼저 헷갈리는 부분이 플랜입니다.

플랜	핵심 특징
Free	Figma Design 파일 최대 3개 활성 보유, FigJam은 무제한, 협업 인원 제한 없음
Professional	팀 라이브러리, 공유 권한 관리 등 팀 단위 협업 기능 제공
Organization / Enterprise	Design agent 웹 검색 관리, AI 크레딧 사용량(일별·제품별·유저별) 관리 등 admin 기능

⚠️ 무료 플랜의 세부 조건은 지역과 시점에 따라 조금씩 달라질 수 있어서, 정확한 최신 조건은 공식 Figma Pricing 페이지에서 한 번 더 확인하는 걸 추천합니다.

무료 플랜에서 자주 발생하는 오해

무료 플랜을 쓰다 보면 이런 질문이 자주 나옵니다.

• “왜 컴포넌트가 팀 전체에 안 보이지?” → 팀 라이브러리 기능이 무료 플랜에서는 제한적으로 동작하기 때문입니다.
• “파일 히스토리를 특정 날짜로 되돌리고 싶은데 안 된다” → 버전 히스토리 접근 범위가 플랜별로 다릅니다.
• “링크 보냈는데 상대가 수정을 못 한다” → 협업 초대 시 이메일이 조직 도메인과 다르면 권한 구조가 꼬이는 경우가 많습니다. 초대 전에 권한(Edit/View/Comment)을 명시적으로 설정하는 습관이 필요합니다.

웹 로그인과 데스크톱 앱, 계정이 안 맞을 때

의외로 자주 나오는 질문 중 하나가 “웹에서는 파일이 보이는데 앱에서는 안 보인다”입니다. 이건 대부분 브라우저 로그인 계정과 데스크톱 앱 로그인 계정이 다르기 때문에 생기는 문제입니다. 파일뿐 아니라 폰트, 플러그인 목록까지 다르게 보일 수 있으니, 이상하다 싶으면 가장 먼저 두 곳의 로그인 계정부터 맞춰보세요.

기본 개념: 프레임, 컴포넌트, 인스턴스

프레임 vs 캔버스, 헷갈리지 않는 법

강의나 블로그마다 ‘프레임’과 ‘캔버스’라는 단어를 섞어 쓰다 보니 “프레임 안에 프레임을 또 만들라는 게 무슨 소리냐”는 질문이 많습니다. 단순하게 정리하면:

• 캔버스: 작업 파일 전체의 무한한 공간
• 프레임: 그 캔버스 안에서 실제 화면(웹페이지, 모바일 화면 등)의 경계를 정하는 박스

프레임 안에 또 프레임을 넣는 건 실제로 자주 하는 작업입니다. 예를 들어 모바일 화면(큰 프레임) 안에 카드 컴포넌트(작은 프레임)를 넣는 식으로, 중첩 구조 자체가 정상 워크플로입니다.

컴포넌트와 인스턴스, 왜 갑자기 초기화되지?

컴포넌트(원본)를 수정하면 그 컴포넌트로 만든 모든 인스턴스(복사본)에 자동 반영됩니다. 반대로 인스턴스에서 개별적으로 수정한 부분은 “오버라이드”로 남는데, 이 로직을 모르면 “왜 하위 요소만 고쳤는데 전체가 같이 바뀌냐” 또는 “왜 자꾸 초기화되냐”는 혼란이 생깁니다.

핵심은 이렇습니다: 원본 컴포넌트 수정 = 전체 반영, 인스턴스 개별 수정 = 그 인스턴스에만 적용(오버라이드). 이 둘을 구분해서 이해하면 대부분의 혼란이 풀립니다.

Auto Layout, 초보자가 가장 많이 막히는 지점

Shift+A를 눌러 Auto Layout을 적용했는데 요소가 이상하게 달라붙거나, 텍스트가 자동 줄바꿈되면서 레이아웃이 깨지는 경험, 다들 한 번씩 겪습니다. Auto Layout은 한 번에 이해하려 하지 말고 아래 요소를 하나씩 나눠서 익히는 게 훨씬 빠릅니다.

• 축 방향(Direction): 요소를 가로로 쌓을지, 세로로 쌓을지
• 패딩(Padding): 프레임 안쪽 여백
• 간격(Gap): 요소들 사이의 간격
• 정렬(Alignment): 요소들을 어디에 붙일지

Constraints와 Resizing, 화면 크기 바뀌면 왜 깨질까

화면 크기를 조절했을 때 요소가 의도와 다르게 늘어나거나 가운데 정렬이 풀리는 문제는 대부분 Constraints(제약조건) 설정을 놓쳐서 생깁니다. Auto Layout과 Constraints는 별개 개념이지만 함께 쓰이는 경우가 많으니, 반응형 레이아웃을 만들 때는 이 둘의 조합을 같이 확인하는 습관이 필요합니다.

프로토타입 만들 때 자주 하는 실수

모바일 스크롤이 안 될 때

Overflow behavior(스크롤 방향) 설정을 하지 않으면 모바일 UI에서 스크롤이 아예 안 되거나, 반대로 의도치 않은 영역까지 스크롤되는 경우가 생깁니다. 프레임 선택 후 우측 패널에서 Overflow 옵션을 꼭 확인하세요.

“실제 앱과 미리보기가 다르다”

디바이스 프리뷰 크기, Safe area, Status bar 설정을 놓치면 실제 기기와 프리뷰 화면의 상하단 여백이 다르게 보일 수 있습니다. 모바일 UI 작업 시에는 디바이스 프리셋을 정확히 선택했는지부터 체크하는 게 좋습니다.

인터랙션이 안 먹히는 이유

“클릭해도 다른 페이지로 안 넘어간다”는 문의의 대부분은 프레임이 아니라 개별 요소를 선택한 상태에서 링크를 연결했기 때문입니다. 프로토타입 연결은 원칙적으로 프레임 단위로 걸어야 안정적으로 동작합니다.

협업할 때 벌어지는 일들

Comment 모드 vs Edit 모드

“댓글만 달 수 있고 수정이 안 된다”거나 반대로 “링크 보냈더니 디자인이 자꾸 망가진다”는 이슈는 권한 설정 문제입니다. 링크 공유 시 View, Comment, Edit 권한을 명확히 구분해서 보내는 게 기본이지만, 실무에서는 이 설정을 놓치는 경우가 은근히 많습니다.

동시 편집 중 컴포넌트가 깨질 때

실시간 협업 중 여러 명이 동시에 컴포넌트 라이브러리를 수정하면 예상치 못한 스타일 변경이나 컴포넌트 깨짐이 발생할 수 있습니다. 이럴 때 대비해서 알아두면 좋은 게 Branch 기능입니다. 메인 파일을 바로 건드리지 않고 별도 브랜치에서 실험한 뒤 병합하는 방식으로, 대규모 구조 변경이나 실험적 작업을 할 때 되돌리기 어려운 상황을 방지할 수 있습니다.

에셋 내보내기(Export), 흐릿하게 나오는 이유

아이콘을 내보냈는데 흐릿하게 나온다면 대부분 배율(1x/2x/3x) 설정 문제입니다. 웹용이라면 2x, 고해상도 디스플레이 대응이 필요하다면 3x까지 함께 내보내는 걸 권장합니다. 개발자에게 전달할 SVG의 레이어 구조가 이상하다는 피드백을 받는다면, Export 전에 불필요한 그룹·레이어를 정리하는 과정이 필요합니다.

폰트가 팀원 컴퓨터에서 다르게 보인다면 이건 피그마 오류가 아니라 로컬 폰트 설치 여부 차이인 경우가 대부분입니다. 팀 전체가 동일한 폰트를 설치했는지 먼저 확인하세요.

한국어 사용자가 유독 겪는 문제

포토샵·일러스트 대비 피그마에서 한글 자간·줄간·폰트 렌더링이 “조금 다르게 보인다”는 불만은 실제로 자주 제기되는 부분입니다. 공식적으로 한국어 전용 가이드가 발표된 적은 확인되지 않지만(⚠️ 공식 출처 미확인), 실무에서는 한글 전용 텍스트 스타일과 컴포넌트를 별도로 세팅해두고 재사용하는 방식으로 많이 대응합니다.

마케터·기획자 입문 강의를 듣다 보면 툴 조작 위주로 빠르게 진도가 나가서, 정작 “실제 상세페이지·랜딩페이지를 어떻게 설계로 옮기는지” 단계에서 막히는 경우도 많습니다. 이 부분은 툴 사용법보다 레이아웃 설계 순서를 먼저 익히는 게 도움이 됩니다.

처음부터 실무까지, 전체 작업 흐름

• 계정 생성·환경 준비: 웹사이트에서 계정 생성 후 브라우저 또는 데스크톱 앱 로그인, 워크스페이스·팀 생성 및 동료 초대
• 파일 생성: Figma Design에서 새 파일 생성, 필요시 FigJam으로 아이디어 정리·와이어프레임 작업
• 프레임·컴포넌트 구조 설계: 디바이스별 프레임 생성, Auto Layout·Constraints로 반응형 레이아웃 구성, 재사용 요소는 컴포넌트로 등록
• 스타일·디자인 시스템 세팅: 컬러, 타이포그래피, 그리드, 효과를 스타일로 등록해 일관성 확보
• 프로토타입·인터랙션 설정: 프레임 간 링크·트랜지션·오버레이·스크롤 설정
• 협업·피드백: Comment로 피드백 남기기, Branch·Version history로 안정적인 버전 관리
• 개발 핸드오프: Inspect 패널에서 스타일·코드 정보 확인, 필요한 에셋을 JPG·PNG·SVG·PDF로 Export

2026년, 피그마에 새로 생긴 것들

Config 2026 행사에서 피그마는 상당히 큰 변화를 발표했습니다. Motion 타임라인, 3D transforms, Shaders, Code layers 같은 ‘재질(Material)’ 개념이 새로 추가됐고, Figma agent skills, generative plugins, Weave workflows 같은 AI 기반 기능도 함께 공개됐습니다.

최신 릴리즈 노트 기준으로는 다중 AI 이미지 편집 동시 실행, Design agent의 웹 검색 기능, 데스크톱 앱의 Tab Groups(파일 탭 그룹화) 같은 워크플로우 개선 기능도 정식 제공되고 있습니다.

다만 Design agent의 일부 기능(코드 레이어, 특정 Weave workflows 등)은 아직 베타·제한적 롤아웃 상태라서, 계정·플랜·지역에 따라 사용 가능 여부가 다를 수 있다는 점은 참고해두세요. ⚠️

자동화·API 연동은 여기까지 가능하다

Figma Developer Docs에는 플러그인, 위젯, REST API, 웹훅, MCP 서버 관련 문서가 정리돼 있습니다. 특히 MCP 서버를 활용하면 외부 에이전트가 Slides 프레젠테이션을 생성·업데이트하거나, 업로드한 폰트로 텍스트를 렌더링하거나, JPG·SVG·PDF 에셋을 다운로드하거나, Xcode와 연동하는 것까지 가능합니다. 자동화 파이프라인을 이미 운영 중이라면 이 부분을 눈여겨볼 만합니다.

참고할 만한 공식 자료

자료	링크
Figma Help Center	help.figma.com/hc/en-us
Figma Design 카테고리	help.figma.com/hc/en-us/categories/360002042553-Figma-Design
Figma Resource Library	figma.com/resource-library
Figma Pricing	figma.com/pricing
Figma Release Notes	figma.com/release-notes
Figma Developer Docs	developers.figma.com

자주 묻는 질문

함께 보면 좋은 글

• 포토샵 기초 사용법 초보자 가이드 – 처음 시작할 때 꼭 알아야 할 핵심 5가지
• 자바스크립트 입문 기초 개념 총정리 – 변수부터 DOM까지 한 번에
• 엑셀 기초 함수 10가지 완벽 정리 – 실무에 바로 쓰는 핵심 꿀팁 (2026년)