Figma 가이드북

UI/UX 디자이너를 위한 프로토타이핑 완전 정복

김수재 지음

비제이퍼블릭 2020년 11월 23일 출간 종이책 : 2020년 11월 30일 출간

작품소개

책소개

새롭게 등장한 디자인 툴 Figma를
이 책 한 권으로 정리한다!

Figma는 지금까지의 프로토타이핑 툴과 달리 실시간 협업을 제공하고 브라우저 기반의 벡터 디자인 작업이 가능합니다. 온ㆍ오프라인에 무관하게 작업이 가능하고 무제한 클라우드를 제공해서 UI, UX 디자이너의 작업 환경을 간결하게 만들어줍니다.

컴포넌트 기반으로 구동하는 개발 환경에 맞추어 디자인 시스템을 구축하는 기업과 개인 프로젝트가 증가하는 추세에 따라 Figma도 디자인 컴포넌트를 쉽게 관리할 수 있도록 다양한 기능들을 제공하고 있습니다. 여러분도 이 책을 통해 누구보다 빠르게 최신 프로토타이핑 툴을 접하는 경험을 해보시기 바랍니다.

이 책의 특징
- 기본적인 Figma의 사용 방법부터 컴포넌트 관리까지 다룬다.
- 불필요한 내용은 배제하고 꼭 필요한 기능만 정리했다.
- 실전 디자인 예제를 하나씩 만들어가며 기능을 자세히 알아볼 수 있다.

이 책이 필요한 독자
- 모바일, 웹 디자이너로 활동하고자 하는 UI, UX 디자이너
- 디자인 실력과 더불어 프로토타이핑까지 완성해보고 싶은 디자이너
- 모바일, 웹 서비스를 기획하는 기획자

독자대상
초중급

소스코드 다운로드
https://github.com/bjpublic/figma

목차

Chapter 01 새로운 디자인 툴 Figma의 등장
1.1 Figma 사용 준비하기
1.2 Figma 단축키 미리보기
1.3 Figma와 오프라인에서 작업하기
1.4 Figma 설치
1.5 Figma 둘러보기
1.6 Figma에서 새로운 디자인 파일을 생성하는 방법

Chapter 02 Figma 메뉴
2.1 이동 도구/스케일 도구
2.2 Figma 단축키 미리보기
2.3 모양 도구
2.4 펜 도구
2.5 텍스트 도구
2.6 핸드 툴
2.7 코멘트
2.8 객체 편집
2.9 컴포넌트 생성
2.10 마스크
2.11 Boolean
2.12 멀티 플레이어 및 관찰 모드
2.13 공유
2.14 프레젠테이션
2.15 보기 모드와 줌(Zoom)
2.16 레이아웃 그리드
2.17 멀티 플레이어 커서
2.18 캔버스 둘러보기
2.19 이미지를 Figma로 가져오는 방법

Chapter 03 Figma 이해하기
3.1 프레임
3.2 Figma 기본, 도형에 대한 이해

Chapter 04 Figma를 활용한 UI 디자인
4.1 UI 디자인 참고 사이트
4.2 컴포넌트를 사용하는 이유
4.3 기본 컴포넌트 만들기
4.4 컴포넌트를 그룹으로 만들기
4.5 연관된 컴포넌트를 활용하는 방법
4.6 연관 컴포넌트를 만드는 또 다른 방법
4.7 내비게이션 컴포넌트 디자인
4.8 외부 UI KIT를 UI에 적용하기
4.9 탭바 만들기
4.10 반응형 UI 구성

Chapter 05 컴포넌트 기반 디자인 시스템 구축
5.1 디자인(UI, UX) 가이드라인
5.2 디자인 시스템
5.3 디자인 시스템을 구축하면서 배우는 Figma

Chapter 06 프로토타이핑
6.1 프로토타이핑
6.2 프로토타이핑의 필요성
6.3 프로토타이핑과 사용자 테스트
6.4 프로토타이핑 구현하기

Chapter 07 Figma 전환 효과
7.1 Navigate to
7.2 프로토타이핑의 꽃 ‘Smart Animate’
7.3 Smart Animate 기능을 활용해서 도형을 이동시키기
7.4 스크롤 기능
7.5 키보드 프로토타이핑 효과
7.6 오버레이를 활용한 키보드 프로토타이핑 효과

Chapter 08 완성된 내용을 확인하는 또 다른 방법 Mirror 앱

Chapter 09 공유 및 공동 작업
9.1 개발자와의 공유
9.2 초대된 사용자가 할 수 있는 것

Chapter 10 실전 UI 작업 핀테크 앱 디자인
Chapter 11 팀 라이브러리 만들기
Chapter 12 파일 브라우징과 버전 관리
Chapter 13 직접 Figma 파일 관리 방법
Chapter 14 스케치 파일을 Figma에서 열기

Chapter 15 TIPS & TRICKS
15.1 컴포넌트 디스크립션을 활용한 검색
15.2 단일 속성 복사
15.3 사이드 바 인스턴스 교체
15.4 동일 속성 탐색 기능
15.5 프레임 크기 조정
15.6 프레임 또는 페이지 이름을 작업 상태 표시하기

출판사 서평

디자인 툴의 새로운 등장은 디자이너에게 새로운 길이 되기도 하고 또 하나의 일거리를 만들기도 합니다. 이미 익숙한 툴에서 새로운 툴로 전환하는 것은 쉬운 일은 아닙니다. 마치 이사를 바로 옆 동네가 아닌 다른 지역으로 하는 것처럼 생각보다 많은 부분을 고려해야 합니다. 그러나 일의 효율을 높일 수 있다면 불편한 과정을 거치더라도 우리는 이 과정 자체를 더욱 신경 써서 해야 할 것입니다.

이 책만으로 Figma가 앞으로 더 어떻게 발전할 것인지 모두 담아내는 것은 어려운 일입니다. 하지만 Figma는 이런 기능을 가지고 있다고 하기보다는 Figma와 디자인이 어떠한 연결 고리를 가지고 있고, 필자의 모바일 디자인이 이러한 기능으로 효율성을 높일 수 있겠구나 하는 부분에 더 집중된 책이라고 생각합니다. Figma를 시작하기 위한 첫 발자국을 이 책과 함께 내딛으시길 바랍니다.

작가정보

저자(글) 김수재

메디어즈 대표와 옐로모바일 헬스케어사업부 총괄본부장을 거쳐 현재 바이앤어스 대표를 맡고 있으며, 리메인, 인프런, 웨런 등 온라인 강의 사이트에서 스케치 디자인 강의를 꾸준히 진행하고 있다. 베리뷰티, 찾았닥, 벤자민무어 페인트, JARVIS, 그레이스 성형외과 등 다수의 기업에서 홈페이지 및 앱 서비스의 UI를 디자인했다. 저서로 '맛있는 스케치'가 있다.