피그마 설치 없이 시작해서 첫 파일 만드는 방법

피그마(Figma)는 브라우저에서 바로 열리는 UI/UX 디자인 도구예요. UI는 눈에 보이는 화면 디자인, UX는 그 화면을 쓰는 흐름이라고 보시면 돼요. 설치하려고 검색하셨다면 궁금한 건 두 가지일 거예요. 어디서 받는지, 그리고 무료로 어디까지 되는지. 받는 곳부터 첫 파일을 여는 순서까지 차례대로 짚어볼게요.

피그마는 설치 파일 없이 브라우저에서 열려요

피그마는 프로그램을 내려받아 까는 방식이 아니에요. 브라우저 주소창에 주소를 넣으면 편집 화면이 바로 뜹니다. 작업한 내용은 클라우드에 자동으로 저장되고, 여러 사람이 같은 파일을 동시에 열어서 고칠 수 있어요.

2016년에 나온 뒤로 디자인 툴 순위에서 1위 자리를 지키고 있어요. 2022 Design Tools Survey에는 프로덕트 디자이너, UX/UI 디자이너, UX 리서처 등 4,260명이 참여했는데, UI 디자인과 프로토타이핑(누르면 화면이 넘어가는 시연) 항목에서 피그마가 1위를 차지했어요. 2025년 UXtools 설문에서는 전 세계 디자이너의 **83%**가 피그마를 쓴다고 나왔고요.

디자이너만 쓰는 도구도 아니에요. 마케터가 배너 시안을 만들고, 기획자가 앱 화면을 직접 그리는 데까지 쓰여요. 그래서 "설치"를 검색하게 되는데, 여기서 한 번 헷갈리는 지점이 생겨요. 피그마는 받는 경로가 세 갈래로 나뉘거든요. 브라우저, 데스크톱 앱, 모바일 앱이 각각 하는 일이 달라서 이걸 먼저 갈라놓고 가는 게 편해요.

받는 곳은 플랫폼마다 달라요

세 갈래를 표로 먼저 정리해볼게요. 이걸 모르고 데스크톱 앱부터 찾으면 시간이 좀 걸려요. 저도 처음엔 어디서 뭘 받아야 하는지 한참 헤맸어요.

핵심은 이거예요. 편집은 웹과 데스크톱에서, 모바일은 보는 용도예요. 모바일 앱은 디자인을 그리는 도구가 아니라, 만들어 둔 시안을 폰에서 실제처럼 눌러보는 미리보기 앱이에요.

그럼 데스크톱 앱은 왜 있을까요. 차이가 두 가지 있어요. 첫째, 데스크톱 앱은 컴퓨터에 설치된 로컬 폰트를 자동으로 인식해요. 둘째, 오프라인 상태에서도 마지막으로 작업하던 파일을 열 수 있어요. 웹 버전은 이 둘이 안 돼서, 한글 커스텀 폰트를 자주 쓰는 사람은 데스크톱 앱을 같이 깔아두는 게 편해요.

피그마를 받는 세 가지 경로

계정 만들고 첫 파일 열기까지

여기서부터가 실제 순서예요. 메뉴 경로를 그대로 적어둘게요.

1. 브라우저 주소창에 피그마 주소를 넣어요.
2. 회원가입 화면에서 구글 계정으로 가입을 고르면 30초 안에 끝나요. 이메일로 가입해도 되는데, 구글 계정 쪽이 로그인이 제일 빨라요.
3. 가입을 마치면 홈 대시보드가 열려요. 왼쪽에는 Drafts(내 파일), 오른쪽에는 최근에 연 파일 목록이 나와요.
4. 오른쪽 상단의 + Design file 버튼을 누르면 빈 캔버스가 열려요. 이 무한 캔버스가 피그마의 작업 공간이에요.

여기서 대부분 한 번 멈추더군요. 로그인은 됐는데 그다음에 뭘 눌러야 새 파일이 만들어지는지 모르는 자리예요. 순서를 기억 못 하시겠으면 + Design file 버튼 하나만 기억하시면 돼요. 왼쪽 Drafts 안에서도 새 파일을 만들 수 있지만, 화면 오른쪽 위 버튼이 제일 눈에 잘 띄어요.

무료로 시작하면 자동으로 Starter 플랜이 적용돼요. 결제 정보를 넣으라는 요구는 가입 단계에서 나오지 않아요.

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

https://www.figma.com

무료로 어디까지 되고, 어디서 유료가 필요해요

이게 초보자가 제일 궁금해하는 지점이에요. 결론부터 말하면 배우는 동안에는 무료로 충분해요. 다만 무료에도 선이 그어져 있고, 그 선이 어디인지는 알고 시작하는 게 좋아요.

무료 Starter 플랜은 디자인 파일 3개, 파일당 페이지 3개까지 만들 수 있어요. 연습용이나 포트폴리오 한두 개에는 부족하지 않은 숫자예요. 뷰어는 무제한이라, 링크를 공유해서 팀원에게 피드백을 받는 건 자유롭게 돼요.

선이 걸리는 지점은 세 가지예요. 파일 3개를 넘길 때, 오래된 버전으로 되돌리고 싶을 때(무료는 버전 기록이 30일까지만 보관돼요), 팀 라이브러리를 쓰고 싶을 때요. 프리랜서로 클라이언트 프로젝트를 여러 개 동시에 굴리면 파일 3개 제한이 금방 걸려요.

유료는 Professional 플랜이 기준이고, 월 $16, 1년 단위로 결제하면 월 $12예요. 학생이나 교사라면 학생 인증을 거쳐 Professional 요금제를 무료로 쓸 수 있어요.

AI 기능 쪽도 알아두면 좋아요. Figma Make는 프롬프트를 넣으면 AI가 디자인을 만들어주는 기능인데, 2026년 3월 18일부터 플랜별 크레딧 제한이 적용됐어요. 무료 플랜에도 월별 크레딧이 주어지지만 한도를 넘으면 그 기능이 멈춰요. 이 기능을 자주 쓸 계획이면 유료 전환을 고민할 시점이 되는 거고요.

무료 플랜에서 되는 것과, 그 이상이 필요해지는 지점

이렇게 입력하면 바로 열려요

피그마는 메뉴가 영어로 되어 있어요. 처음엔 이게 제일 부담스러운데, 다행히 영어 기능명을 몰라도 되는 검색 창이 있어요. 아래 세 가지는 그대로 입력해서 쓰는 것들이에요.

첫 번째는 접속 주소예요. 계정을 만들고 편집기까지 들어가는 입구 하나만 기억하면 돼요.

두 번째는 Quick Actions예요. Ctrl + / (Mac은 Cmd + /) 를 누르면 검색창이 떠요. 메뉴가 어디 있는지 몰라도, 영어 기능명을 넣으면 바로 실행돼요. 예를 들어 프레임을 만들고 싶으면 frame, 컴포넌트로 등록하고 싶으면 create component를 넣는 식이에요. 메뉴 위치를 외우는 것보다 이게 훨씬 빨라요.

세 번째는 커뮤니티 검색이에요. figma.com/community에 들어가면 전 세계 디자이너가 공유한 무료 UI 키트와 템플릿이 쌓여 있어요. 빈 캔버스에서 처음부터 그릴 필요가 없어요. 검색창에 dashboard나 mobile app을 넣으면 바로 쓸 수 있는 시안이 나오고, Duplicate 버튼 한 번이면 내 파일로 복사돼요.

Quick Actions 검색창에 넣는 말 (Ctrl + / , Mac은 Cmd + /)

프레임을 만들고 싶을 때  →  frame
컴포넌트로 등록하고 싶을 때  →  create component
프로토타입 탭을 열고 싶을 때  →  prototype
오토 레이아웃을 적용하고 싶을 때  →  auto layout

처음 켜면 이 순서로 눌러보세요

빈 캔버스가 열렸으면 이 다섯 단계를 그대로 따라 해보세요. 앱 화면 하나를 끝까지 만들어보는 흐름이에요.

1단계 — 새 파일 만들기. 오른쪽 위 + Design file 버튼을 눌러요. 빈 캔버스가 열리고, 이 상태에서 작업이 시작돼요.

2단계 — 화면 틀(프레임) 만들기. 상단 툴바에서 Frame 도구(단축키 F) 를 고르고, 오른쪽 속성 패널에서 기기 프리셋을 클릭해요. 모바일 앱이면 iPhone 16 (393 x 852), 웹이면 Desktop 1440px을 고르면 돼요. 클릭하면 그 크기의 프레임이 캔버스에 생기고, 왼쪽 레이어 패널에도 한 줄로 표시돼요. 웹이라면 1440 x 1024, 1440 x 900 같은 값도 흔히 써요.

3단계 — 안을 채우기. 상단 툴바에서 Rectangle 도구(단축키 R) 를 골라 캔버스에 드래그해요. 오른쪽 패널에서 모서리 둥글기(Corner radius)를 8px로 주면 요즘 앱에서 보는 둥근 버튼이 돼요. 텍스트 도구(단축키 T) 로 글자를 넣고, 한글이 필요하면 오른쪽 Text 섹션에서 폰트를 Pretendard나 Noto Sans KR로 바꿔요. 이미지는 Ctrl + Shift + K (Mac은 Cmd + Shift + K) 로 파일을 고른 뒤 도형 위를 클릭하면 그 도형 안에 사진이 채워져요. 마스크 작업 없이 되니까 편해요.

4단계 — 반복되는 요소 묶기. 버튼 같은 걸 여러 화면에 쓸 거라면 컴포넌트로 만들어요. 요소를 선택하고 Shift + A 로 오토 레이아웃을 적용한 다음, Ctrl + Alt + K (Mac은 Cmd + Option + K) 를 누르면 컴포넌트로 등록돼요. 레이어 이름 앞에 마름모(◆) 아이콘이 붙으면 성공이에요. 이름을 Button/Primary 처럼 슬래시(/)로 구분해서 붙이면 Assets 패널에서 폴더로 정리돼요.

5단계 — 눌러보는 시안으로 만들기. 오른쪽 패널에서 Prototype 탭으로 전환해요. 버튼 같은 요소를 선택하면 오른쪽에 파란 원(연결 노드)이 나타나는데, 이걸 끌어서 이동할 다음 화면에 놓으면 화살표가 생기고 클릭 시 화면 전환이 설정돼요. 트리거는 On click, 애니메이션은 Smart animate를 고르면 이름이 같은 요소끼리 자동으로 이어져요. 오른쪽 위 ▶ 버튼(단축키 Ctrl + Alt + Enter) 을 누르면 새 창에서 미리보기가 열려요. 폰에서 확인하고 싶으면 Figma Mirror 앱을 열면 실시간으로 보여요.

따라 하면서 쓸 단축키만 모아둔 것

F            프레임 만들기 (화면 틀)
R            사각형 그리기
T            텍스트 입력
Shift + A    오토 레이아웃 적용
Ctrl + Alt + K  컴포넌트로 등록 (Mac: Cmd + Option + K)
Ctrl + Shift + K  이미지 넣기 (Mac: Cmd + Shift + K)
Ctrl + Alt + Enter  프로토타입 미리보기 (Mac: Cmd + Option + Enter)
Ctrl + /     Quick Actions 검색창 (Mac: Cmd + /)

잘 되는 것과 안 되는 것

설치 전에 기대하는 것과 실제로 벌어지는 일이 갈리는 지점이 몇 개 있어요. 미리 알고 시작하면 중간에 멈추지 않아요.

가장 많이 갈리는 건 폰트예요. "설치 없이 브라우저에서 다 된다"는 말만 보고 시작하면, 예쁜 한글 폰트를 넣는 순간 글자가 깨져 보여요. 웹 버전은 구글 폰트만 기본 지원하기 때문이에요. 이건 피그마가 고장 난 게 아니라 원래 그런 거라서, 데스크톱 앱을 깔거나 Font Installer 플러그인을 쓰면 해결돼요.

두 번째는 모바일이에요. 폰에서도 디자인을 그릴 수 있다고 생각하고 Mirror 앱을 깔면, 편집 도구가 없어서 당황하게 돼요. Mirror는 시안을 눌러보는 용도고, 그리는 건 웹이나 데스크톱이에요.

세 번째는 "무료니까 계속 무료"라는 기대예요. 학습과 포트폴리오에는 충분하지만, 파일 3개라는 숫자는 프로젝트를 여러 개 굴리기 시작하면 금방 걸려요.

기대와 실제를 나란히 놓으면

다른 도구와 설치 방식이 어떻게 달라요

설치라는 관점에서만 비교해볼게요. 어떤 게 더 낫다고 말할 수 있는 부분이 아니고, 상황에 따라 갈려요.

포토샵은 컴퓨터에 프로그램을 깔아서 쓰는 방식이에요. 파일을 주고받아야 협업이 되고, 사진 보정이나 합성에 강해요. 피그마는 브라우저가 기본이고, 같은 파일을 여러 명이 동시에 열어서 고칠 수 있어요. 구글 독스처럼요. 그래서 UI 화면 설계에는 피그마가, 사진 편집에는 포토샵이 맞는 식으로 갈리는 거예요.

Pixso는 피그마와 사용 경험이 비슷한 브라우저 기반 도구예요. 눈에 띄는 차이는 메뉴와 도구 이름이 한국어로 되어 있다는 점이고, 가격 구조도 다르고 D2C(디자인을 코드로 바꿔주는 기능)를 무료로 제공해요. 피그마를 쓰다가 한국어 UI와 가격이 아쉬웠던 사람들이 대안으로 이야기하는 도구예요.

정리하면 이렇게 갈려요. 설치 없이 시작하고 싶고 협업이 중요하면 피그마, 사진 작업이 중심이면 포토샵, 한국어 인터페이스와 가격을 우선 보면 Pixso 쪽이 맞아요.

설치와 시작 방식으로 본 비교

써본 사람들은 이렇게 말해요

입문 가이드 4편을 기준으로 보면, 가장 많이 나오는 이야기는 "설치가 없어서 시작이 가볍다" 예요. 4편 중 3편이 이걸 첫 장점으로 꼽았어요. 회원가입만 하면 편집기까지 도달하는 시간이 짧다는 점, 링크 하나로 파일을 열람할 수 있다는 점이 같이 언급돼요.

반대쪽 이야기도 있어요. 4편 중 2편은 무료 플랜의 한도를 짚었어요. 파일 3개 제한 때문에 프리랜서가 클라이언트 프로젝트를 여러 개 동시에 진행하면 금방 부딪히고, 버전 기록이 30일까지만 남아서 예전 상태로 되돌리기 어렵다는 거예요. 팀 단위로 굴리려면 결국 유료로 넘어가는 게 현실적이라는 반응이에요.

일각에서는 이런 반응도 있어요. "피그마로 시작하면 홈페이지가 완성된다"는 기대는 오해라는 지적이에요. 피그마는 시안을 만드는 도구이고, 그 시안이 실제로 배포되는 홈페이지가 되려면 별도의 구현 단계를 거쳐야 한다는 거예요. 그래서 배포까지 생각하고 시작한 사람은 중간에 방향을 바꾸기도 해요.

또 한 편에서는 한국어 인터페이스와 가격을 이유로 Pixso를 대안으로 권하는 흐름도 있었어요. 다만 이건 취향과 예산에 따라 갈리는 부분이라, 피그마가 더 낫다거나 그 반대라고 단정하기는 어려워요.

설치 전에 알아두면 좋은 것과 맞는 사람

설치 자체는 어렵지 않아요. 대신 시작한 뒤에 걸리는 것들이 몇 가지 있어요. 돈, 공유 범위, 계정 이 세 가지는 미리 알고 가는 게 편해요.

공유는 특히요. 파일을 만들고 오른쪽 위 파란색 공유 버튼을 누르면 다른 사람을 초대할 수 있어요. 이메일 주소를 넣는 방식과 링크를 복사해서 보내는 방식 두 가지가 있는데, 링크로 공유하면 그 링크를 아는 사람은 파일을 열람할 수 있어요. 외부에 보이면 안 되는 작업 파일은 이메일로 상대를 지정해서 초대하는 쪽이 안전해요.

돈도 마찬가지예요. 무료로 시작했는데 AI 크레딧이 떨어지거나 파일 3개를 넘기면서 유료 전환을 고민하게 돼요. 급하지 않으면 필요한 시점까지 기다렸다가 전환해도 늦지 않아요.

계정은 구글 계정으로 가입하는 게 제일 빨라요. 다만 개인 계정과 회사 계정이 섞이면 나중에 파일이 어디 있는지 헷갈리기 쉬워서, 팀 작업용은 따로 두는 편이 나아요.

이런 사람에게 맞아요. 설치나 프로그램 업데이트에 시간을 쓰기 싫은 사람, 팀원과 같은 파일에서 동시에 작업해야 하는 사람, 무료로 먼저 익혀보고 싶은 사람이에요. 반대로 사진 보정과 합성이 주 목적인 사람, 폰 하나로만 디자인을 끝내고 싶은 사람, 오프라인에서만 작업해야 하는 사람은 다른 도구가 더 편할 수 있어요.

오늘 해볼 건 하나예요. 브라우저 주소창에 figma.com을 넣고 구글 계정으로 가입한 다음, 오른쪽 위 + Design file 버튼을 눌러 빈 캔버스를 열어보세요.

시작 전에 챙겨둘 것

시작 전 확인할 것

• figma.com에 접속해서 계정을 만들었나요 (구글 계정이 가장 빨라요)
• 오른쪽 위 + Design file 버튼으로 빈 캔버스를 열었나요
• 왼쪽 Drafts와 오른쪽 최근 파일 목록 위치를 확인했나요
• 무료 플랜의 파일 3개·페이지 3개·버전 기록 30일 제한을 알고 시작했나요
• 한글 폰트가 필요하면 데스크톱 앱이나 Font Installer 플러그인을 준비했나요
• 공유할 때 이메일 초대와 링크 공유 중 어느 쪽을 쓸지 정했나요

참고 링크

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