피그마란
클라우드 기반 디자인 툴 피그마의 개요, 프로토타입 툴 비교, 요금제, 공식 매뉴얼 링크를 알아봅니다
코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.
구문
피그마란?
피그마(Figma)는 클라우드 기반의 디자인 툴입니다. 협업 기능이 강화되어 있어 디자이너, 개발자, 프로젝트 매니저 등의 팀원들과 함께 작업할 때 효율적으로 작업을 진행할 수 있습니다. 또한, 디자인 시안을 실제 앱과 같은 환경에서 테스트할 수 있는 프로토타이핑(prototyping) 기능도 제공합니다.
공식사이트
프로토타입 툴 비교
| 프로그램 | 운영체제 | 설치 방식 |
|---|---|---|
| XD | win, mac | 설치형 |
| Sketch | mac | 설치형 |
| Figma | win, mac, linux | 브라우저, 설치형 |
Tip: 피그마는 브라우저에서 바로 사용할 수 있어 운영체제에 관계없이 작업이 가능합니다. 별도 설치 없이도 사용할 수 있다는 것이 큰 장점입니다.
피그마 요금제
| 요금제 | 가격 | 기능 |
|---|---|---|
| Starter | 무료 | 3개의 Figma 팀 및 3개의 FigJam 파일, 무제한 개인 파일, 무제한 공동 작업자, 플러그인 및 템플릿, 모바일 앱 |
| Professional | $12/월/사용자당 | 무제한 Figma 파일, 무제한 버전 기록, 공유 권한, 공유 및 비공개 프로젝트, 팀 라이브러리, 오디오 대화 |
| Organization | 사용자 수, 기간, 기능에 따라 가격 다름 | 기업용 고급 기능 |
Info: 학습 목적이라면 무료 Starter 요금제로 충분합니다.
피그마 공식 매뉴얼
시작하기
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)
- 개발자 인도를 위한 디자인 파일 최적화
Info: Figma 도움말 전체 문서는 https://help.figma.com/ 에서 확인할 수 있습니다.