『Figma 가이드북 : UI/UX 디자이너를 위한 프로토타이핑 완전 정복』

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 프레임 또는 페이지 이름을 작업 상태 표시하기

『웹 디자인 & 웹 퍼블리싱을 위한 피그마 완벽 활용서 : 웹 트렌드를 반영한 반응형 쇼핑몰 따라 만들기』

[PART 1] Figma 100% 활용하기 - 웹 디자인

A. Figma 시작하기
i. Figma 설치 및 실행
ii. Figma UI
iii. Frame · Shape · Text
iv. Page
v. Pen 툴: 사각형 만들기
vi. Vector 편집: 면 추가하기
vii. Fill · Stroke
viii. SVG 추출 및 코드 복사
ix. Component
x. Grid

B. 디자이너의 Figma 사용하기
i. Figma 디자인
____로그인 헤더 만들기
____로그인 폼 디자인하기
____Forgot Password 추가하기
____Footer 설정하기
____제약 조건 설정하기
ii. 프로토타이핑
____대시보드 페이지 디자인
____회원가입 페이지 디자인
____비밀번호 찾기 페이지 디자인
____프로토타이핑 설정하기
iii. 피드백

[PART 2] Figma 실전 - 프로젝트 디자인

A. Figma 고급 활용
i. 레이어 제약 조건
ii. 버전 관리
iii. 스타일
____Color 스타일
____Text 스타일
____Drop Shadow 스타일
____Grid 스타일
iv. 팀 라이브러리
v. 프로토타이핑
____디바이스 프레임
____외부 웹사이트 URL
____이전 프레임으로의 Hotspots
____고정 오브젝트
____스크롤 영역
____인터랙션 · 트랜지션
vi. Figma에서 Illustrator 파일 사용하기
vii. 협업
____Figma로 협업하기
____팀 생성과 관리
____팀 멤버 권한 관리
____컴포넌트 스타일 공유하기
____공유
____코멘트
____버전 관리
____기타 툴로 통합

B. [실전 프로젝트] 모바일 쇼핑몰과 반응형 랜딩페이지 완성하기
i. 최신 웹 디자인 트렌드
____UI/UX
____Micro-Interaction
____Minimalism
____Typography
ii. 모바일 쇼핑몰 디자인
____메인 화면
____로그인
____회원가입
____상품 목록
____카테고리 목록
____상품 상세페이지
____장바구니
____주문 페이지
____네비게이션 메뉴
iii. 반응형 포트폴리오 페이지 디자인
____PC 화면
____태블릿 화면
____모바일 화면

[PART 3] Figma 업그레이드 - 스마트한 활용법

A. Figma 플러그인
i. Unsplash
ii. Content Reel
iii. Image Palette
iv. Super Tidy
v. Able

B. Figma 유용한 팁
i. 레이어 패널 팁
____모든 오브젝트 잠금 풀기 및 숨김 해제
____레이어 이름 빠르게 변경하기
____다중 레이어를 한꺼번에 열고 닫기
____레이어의 표시를 빠르게 전환하기
ii. 오브젝트 선택 팁
____같은 속성의 오브젝트 빠르게 선택 편집하기
____상/하위 요소 선택하기
iii. 레이어 쌓기 팁
____레이어 순서 변경하기
____레이어 빠르게 선택하기
iv. 캔버스 팁
____디자인 화면에서 레이어 선택하기
____좀 더 정확하게 확대 축소하기
____오브젝트 중심으로 바로 확대하기
v. 프레임 팁
____내용을 포함하여 새 프레임 생성하기
____내용에 맞춰 프레임 크기 조절하기
____프레임 크기 확대 축소하기
vi. 프로젝트 · 페이지 · 아트보드 팁
____프로젝트 썸네일 만들기
____페이지 전환
____아트보드 간 이동하기
____프레임 가독성 올리기
vii. 속성 팁
____오브젝트의 속성 복사하기
____텍스트 속성 변경하기
____속성값의 수치 변경하기
____방향키로 색상 조절하기
viii. 이미지 팁
____이미지 채우기 세팅
____폴더의 이미지를 통째로 Place Image하기
____다중 이미지 로드하기
ix. 벡터 그래픽 팁
____복잡한 벡터 그래픽 구현하기
____오브젝트에서 바로 svg 태그 생성하기
____svg 태그 복사하기
x. 컴포넌트 팁
____컴포넌트 플립하기
____반복 패턴 만들기
xi. 레이아웃 팁
____등척성(Isometric) 쉽게 비틀기(Skew)
____아이템 간의 간격 제거하기
____좀 더 정확하게 정렬하기
xii. 핸드오프 테스트 팁
____인스펙트 탭을 통한 출력
____붙여넣기할 코드 생성하기
____모바일 기기에서 Figma 미러 앱으로 테스트하기
____브라우저에서 Figma 미러 앱으로 테스트하기
xiii. 기타 팁
____아웃라인 모드 전환
____단축키표 접속하기
____넛지 양 조절하기

C. Figma 단축키

[PART 4] Figma 200% 활용하기 - 웹 퍼블리싱

A. Figma 활용 웹 퍼블리싱

B. [Figma to HTML 실전] 모바일 쇼핑몰 완성하기
i. 모바일 쇼핑몰 디자인 HTML
ii. 모바일 쇼핑몰 디자인 CSS
iii. 모바일 쇼핑몰 SCRIPT

C. [Figma to HTML 실전] 반응형 포트폴리오 페이지 디자인하기
i. 포트폴리오 페이지HTML
ii. 포트폴리오 페이지CSS - PC 화면
iii. 포트폴리오 페이지 CSS - 태블릿 · 모바일 화면

[PART 5] 부록 - Figma와 Adobe XD의 비교

A. Figma와 Adobe XD 비교
i. 지원 플랫폼
ii. 협업 · 공유 · 미리보기
iii. 디자인
iv. 디자인 시스템
v. 프로토타이핑
vi. 핸드오프
vii. 기타 사항
viii. 가격
ix. 최종 비교