1. 피그마란
클라우드 기반 디자인 툴 피그마의 개요, 프로토타입 툴 비교, 요금제, 공식 매뉴얼 링크를 알아봅니다
클라우드 기반 디자인 툴 피그마의 개요, 프로토타입 툴 비교, 요금제, 공식 매뉴얼 링크를 알아봅니다
피그마(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를 위한 브라우저 구성
단축키 및 Quick actions 사용
오프라인에서 Figma 작업하기
브라우저의 다운로드 폴더 선택
공유 및 사용 권한 안내
팀에서의 역할 및 권한
파일 및 프로토타입을 공유하거나 임베드(embed)하기
프로젝트, 파일 및 프로토타입에 초대하기
Figma 데스크톱 앱 다운로드
Figma 모바일 앱 안내
iOS 및 안드로이드(Android)에 대한 Figma 미러(Mirror) 다운로드
데스크톱 앱에서 색상 관리
데스크톱 앱에서 UI 크기 조정
레이어(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/ 에서 확인할 수 있습니다.