피그마란?

피그마(Figma)는 클라우드 기반의 디자인 툴입니다. 협업 기능이 강화되어 있어 디자이너, 개발자, 프로젝트 매니저 등의 팀원들과 함께 작업할 때 효율적으로 작업을 진행할 수 있습니다. 또한, 디자인 시안을 실제 앱과 같은 환경에서 테스트할 수 있는 프로토타이핑(prototyping) 기능도 제공합니다.

---

공식사이트

피그마 공식사이트

---

프로토타입 툴 비교

프로그램	운영체제	설치 방식
XD	win, mac	설치형
Sketch	mac	설치형
Figma	win, mac, linux	브라우저, 설치형

---

피그마 요금제

요금제	가격	기능
Starter	무료	3개의 Figma 팀 및 3개의 FigJam 파일, 무제한 개인 파일, 무제한 공동 작업자, 플러그인 및 템플릿, 모바일 앱
Professional	$12/월/사용자당	무제한 Figma 파일, 무제한 버전 기록, 공유 권한, 공유 및 비공개 프로젝트, 팀 라이브러리, 오디오 대화
Organization	사용자 수, 기간, 기능에 따라 가격 다름	기업용 고급 기능

---

피그마 공식 매뉴얼

시작하기

Figma 설정

• Figma 계정 만들기
• Figma 브라우저 요구 사항
• Figma를 위한 브라우저 구성
• 단축키 및 Quick actions 사용
• 오프라인에서 Figma 작업하기
• 브라우저의 다운로드 폴더 선택

공유 및 사용 권한

• 공유 및 사용 권한 안내
• 팀에서의 역할 및 권한
• 파일 및 프로토타입을 공유하거나 임베드(embed)하기
• 프로젝트, 파일 및 프로토타입에 초대하기

데스크톱 및 모바일 Figma

• Figma 데스크톱 앱 다운로드
• Figma 모바일 앱 안내
• iOS 및 안드로이드(Android)에 대한 Figma 미러(Mirror) 다운로드
• 데스크톱 앱에서 색상 관리
• 데스크톱 앱에서 UI 크기 조정

---

Figma Design

Figma Design 시작하기

• 레이어(View layers), 페이지 및 구성 요소(Components) 보기 (왼쪽 사이드바)
• 디자인, 프로토타입 및 검사(Inspect) (오른쪽 사이드바)
• 도구 모음에서 디자인 툴 접근
• 캔버스(Canvas) 탐색
• 레이어와 객체 선택
• 레이어 간 거리 측정

가져오기 및 내보내기

• Figma로 파일 가져오기
• Figma의 내보내기 가이드
• Sketch에서 파일 가져오기
• 디자인 툴 사이의 자산(assets) 복사

이미지, 모양 및 도구

• Figma의 프레임(Frame)
• 디자인에 이미지 추가
• 프레임 및 그룹
• 모양 도구(Shape Tools) 사용
• 벡터 네트워크(Vector Networks)
• 객체 편집
• 이미지 자르기
• 부울 연산(Boolean Operations)
• 마스크(Masks)

텍스트 입력 및 글꼴

• 텍스트 시작하기
• 컴퓨터의 로컬 글꼴에 액세스
• 텍스트 도구로 문자 레이어 만들기
• 텍스트 속성 탐색
• 텍스트 스타일 생성 및 적용

레이어 속성 및 설정

• 모서리 반경 및 부드럽게(smoothing) 조정
• 스트로크(stroke) 속성 적용 및 조정
• 정렬, 치수, 회전 및 위치 조정
• 채우기(fills) 추가
• 그림자 또는 흐림 효과 적용
• 자동 레이아웃(Auto Layout)으로 역동적인 디자인 만들기
• 레이아웃 그리드(Layout Grid) 생성

구성 요소 및 스타일

• Figma의 구성 요소(Components) 안내
• Figma의 스타일(Styles)
• 컴포넌트 이름 지정 및 구성
• 디자인에 재사용할 컴포넌트 생성
• 컴포넌트의 인스턴스(Instance) 만들기
• 변형(Variants) 생성 및 사용

라이브러리 및 설계 시스템

• Figma 라이브러리(Library) 가이드
• 스타일과 컴포넌트 게시(Publish)
• 라이브러리의 업데이트 검토 및 수락

프로토타입 및 애니메이션

• Figma의 프로토타이핑 가이드
• 프로토타입 장치 및 시작 프레임 설정
• 프로토타입의 트리거(Trigger)
• 프로토타입의 액션(Action)
• 프로토타입의 애니메이션(Animation)
• Smart Animate로 고급 애니메이션 만들기
• 프로토타입에서 오버레이(Overlay) 만들기

협업 도구

• 검사(Inspect) 패널 사용
• 파일에 대한 주석 추가
• 댓글 보기 및 관리
• 관찰 모드로 팔로우(Follow)
• 개발자 인도를 위한 디자인 파일 최적화