Figma 소개와 시작하기 — 실무 디자인 툴의 표준

Figma란?

Figma는 2016년 출시된 브라우저 기반 UI/UX 디자인 툴입니다. 현재 Google, Microsoft, Airbnb, Netflix 등 전 세계 주요 IT 기업이 채택한 업계 사실상 표준(de facto standard) 입니다. 2022년 Adobe가 약 25조 원에 인수를 시도했을 만큼 그 가치가 입증된 도구입니다.

Figma가 표준이 된 3가지 이유

이유	내용	실무 의미
브라우저 기반	설치 없이 URL로 바로 접속	OS 상관없이 디자이너+개발자 동시 접근
실시간 협업	Google Docs처럼 여러 명이 동시 편집	원격 팀 피드백을 즉시 반영
개발자 핸드오프	CSS 코드, 수치 자동 추출	디자인-개발 간 오해 없는 전달

경쟁 툴 비교

항목	Figma	Sketch	Adobe XD
운영체제	브라우저 + Mac/Win	Mac 전용	Mac/Win
협업	실시간 다인 동시 편집	제한적	제한적
무료 플랜	있음 (충분히 실용적)	없음 (유료만)	지원 종료
플러그인	방대한 생태계	많음	적음
현업 채택률	압도적 1위	Mac 디자이너 일부	감소 추세

2024년 기준 국내외 채용공고에서 "Figma 사용 가능자 우대"가 표준이 되었습니다. UI/UX 디자이너를 목표로 한다면 Figma는 필수입니다.

무료 플랜(Starter)으로 할 수 있는 것

Figma 무료 플랜:
- 무제한 파일 (Drafts 영역)
- 팀 프로젝트 3개 (각 파일 수 제한 없음)
- 실시간 협업 (최대 2명 동시 편집)
- 프로토타이핑 기능 전체 사용
- 커뮤니티 리소스 무료 사용

이 시리즈 전체를 무료 플랜으로 실습할 수 있습니다.

가입 및 시작하기

Step 1: figma.com 접속 → "Get started for free" 클릭
Step 2: Google 계정 또는 이메일로 가입
Step 3: 직업 선택 (Student / Designer / Developer 등)
Step 4: 팀 이름 입력 → 팀 생성
Step 5: 대시보드 진입 완료

데스크탑 앱 설치 (선택):
figma.com/downloads → Figma Desktop 다운로드
브라우저와 동일한 기능, 오프라인 작업 가능

핵심 계층 구조: 파일 → 페이지 → 프레임

Figma의 모든 작업은 이 3단계 구조 안에서 이루어집니다.

파일 (File)
  └── 페이지 1 (Page)
        └── 프레임 A (Frame) — 화면 1개
        └── 프레임 B (Frame) — 화면 2개
  └── 페이지 2 (Page)
        └── 컴포넌트 라이브러리

파일 = 프로젝트 단위 (예: "쇼핑몰 앱 리디자인")
페이지 = 작업 분류 (예: 메인 화면, 마이페이지, 공통 컴포넌트)
프레임 = 실제 화면 1개 (예: 홈 화면, 로그인 화면)

첫 파일 만들기

대시보드 → "New design file" 버튼 클릭
→ 빈 편집 화면 진입

페이지 추가:
왼쪽 상단 레이어 패널 → "Pages" 영역 → "+" 버튼
→ 페이지 이름 더블클릭으로 변경 ("홈 화면", "컴포넌트" 등)

파일 이름 변경:
상단 중앙 파일명 클릭 → 수정

12강 로드맵

구간	강의	배울 것
기초 (1~3강)	소개, 인터페이스, 프레임/도형	Figma 구조 완전 이해
디자인 (4~6강)	텍스트, 색상/스타일, 오토 레이아웃	실무 디자인 핵심 기술
시스템 (7~8강)	컴포넌트, 베리언트	재사용 가능한 디자인 시스템
프로토타입 (9~10강)	프로토타이핑, 인터랙션	움직이는 목업 완성
협업 (11~12강)	협업/코멘트, 핸드오프	팀 워크플로우, 개발자 전달

관련 검색어  ·  Figma 입문, 피그마 시작하기, 피그마 무료, Figma vs Sketch, 피그마 가입, UI 디자인 툴