처음 만나는 피그마 - 설계부터 협업까지 올인원 UX/UI 제작 툴 -

디자인 유튜버 Ami Design TV가 선택한

무료 올인원 디자인 툴, 피그마!

디자인 업계의 업무 프로세스는 애자일(최소한의 기능을 짧은 주기로 반복하는 개발로, 서로 긴밀하게 협업하는 방식) 형태로 진화했다. 그러면서 올인원 툴 피그마가 주목을 받게 된다. 피그마는 설계부터 디자인, 버전 관리까지 하나의 툴에서 모든 게 가능하다. 협업이 쉽고, 웹 기반이라 디자이너가 아닌 직군에서도 쉽게 접근할 수 있다.

이 책은 기존의 디자인 툴을 사용해 본 적이 없는 사람도 볼 수 있도록 기초부터 시작한다. 책의 예제를 직접 따라 하며 작은 프로젝트를 완성하는 방식으로 진행되기 때문에 지루하지 않게 피그마의 다양한 기능을 익힐 수 있다. 쿠킹 클래스, 쇼핑몰, 뉴스 앱 등 실무에서 활용할 수 있는 감각적인 예제를 사용했으며, 실습에 필요한 리소스는 모두 피그마 파일로 제공한다.

유용한 플러그인, 효율적인 커뮤니티 활용법도 함께 다뤄 실무에서 당장 필요한 내용을 한번에 익힐 수 있다. 또한 실제 글쓰기 앱을 설계하고 프로토타입 화면을 디자인할 때의 고민과 결정 과정을 담아 초보 디자이너에게도 큰 도움이 될 것이다.

송아미

스타트업에서 웹디자인, 코딩, 모바일 앱 디자인, 브랜딩, 그래픽 디자인 등 다양한 분야를 경험하고 팀을 이끌었으며, 현재는 콘텐츠 큐레이션 서비스인 서핏(Surfit)에서 제품 총괄을 맡고 있다. 새로운 것을 배우는 데 흥미를 느끼고, 배운 것을 다른 사람과 공유하길 좋아한다. 운영 중인 유튜브 채널 Ami Design TV(youtube.com/SongAmi)에서는 디자인 지식, 스타트업, 피그마 튜토리얼 등 다양한 소재를 다룬다.

1부 피그마 기초

1장 피그마는 어떤 툴인가

1.1 디자인, 프로토타이핑, 협업까지 모든 프로세스를 한곳에서

1.2 피그마 무료로 사용하기

1.3 피그마 기능 업그레이드하기

1.4 지금 피그마를 써야 하는 이유

2장 피그마 시작하기

2.1 웹으로 시작하기

2.2 데스크톱 앱으로 시작하기

2.3 미러 앱 시작하기

3장 파일 브라우저 살펴보기

3.1 파일 브라우저

3.2 팀 만들기

3.3 팀 프로젝트 시작하기

3.4 커뮤니티 이용하기

4장 에디터 살펴보기

4.1 에디터 구성

4.2 툴바 알아보기

4.3 레이어 패널

4.4 속성 패널

5장 에디터 사용하기

5.1 카드 UI 만들기

5.2 효과 추가하기

2부 작업 속도를 두 배 높이는 피그마 활용

6장 컴포넌트 사용하기

6.1 컴포넌트 알아보기

6.2 마스터 컴포넌트와 인스턴스

6.3 컴포넌트로 리스트 디자인하기

7장 오토 레이아웃 사용하기

7.1 오토 레이아웃 알아보기

7.2 오토 레이아웃으로 뉴스피드 헤더 디자인하기

8장 컨스트레인트 사용하기

8.1 컨스트레인트 알아보기

8.2 컨스트레인트 로그인 화면에 적용하기

9장 레이아웃 그리드 사용하기

9.1 레이아웃 그리드 알아보기

9.2 그리드 시스템 용어 이해하기

9.3 레이아웃 그리드로 스케줄러 디자인하기

10장 플러그인 사용하기

10.1 플러그인 알아보기

10.2 플러그인으로 연락처 디자인하기

10.3 추천하는 플러그인

11장 스타일 사용하기

11.1 스타일 알아보기

11.2 스타일로 디자인 시스템 만들기

3부 피그마에서 디자인하기

12장 반응형 랜딩 페이지 디자인하기

12.1 반응형 웹 알아보기

12.2 랜딩 페이지 디자인 준비하기

12.3 그리드 설정하기

12.4 글로벌 내비게이션 바 디자인하기

12.5 인트로 배너 영역 디자인하기

12.6 소개 영역 디자인하기

12.7 클로징 배너 영역 디자인하기

12.8 태블릿, 모바일 화면 크기 대응하기

13장 뉴스 앱 디자인하기

13.1 모바일 운영체제 이해하기

13.2 뉴스 앱 디자인 준비하기

13.3 상태 바, 홈 인디케이터 넣기

13.4 하단 탭바 디자인하기

13.5 타이틀 영역 디자인하기

13.6 가로 스와이프 뉴스 디자인하기

13.7 세로 스크롤 뉴스 디자인하기

13.8 안드로이드 대응하기

4부 피그마에서 협업하기

14장 와이어프레임과 프로토타입으로 화면 설계하기

14.1 와이어프레임과 프로토타입이 필요한 이유

14.2 스케치하며 화면 기획하기

14.3 화면 와이어프레임 그리기

14.4 프로토타입으로 동적인 화면 만들기

14.5 프레젠테이션 뷰 활용하기

15장 팀 라이브러리로 디자인 리소스 관리하기

15.1 팀 라이브러리에 파일 퍼블리싱하기

15.2 팀 라이브러리 파일 다루기

15.3 디자인 시스템과 아토믹 디자인

16장 실시간 협업하기

16.1 파일 공유로 실시간 협업 시작하기

16.2 코멘트 남기기

16.3 옵저베이션 모드

17장 개발자가 피그마 활용하기

17.1 피그마 한곳에서 해결하기

17.2 디자인 에셋 추출하기

17.3 코드 탭 활용하기

부록 A 피그마 커뮤니티 활용하기

부록 B 피그마 템플릿 사용하기

부록 C 어떤 디자이너로 성장하고 싶은가