AI 시대의 UI/UX 표준,
클로드·제미나이부터 바이브코딩까지 한번에 배우는 피그마 책!

'피그마(Figma)'는 IT업계와 디자이너들 사이에서 가장 핫한 UX/UI 디자인과 프로토타이핑 협업 툴입니다. 웹 브라우저와 데스크톱 등 사용자의 가장 편리한 환경에서 작업할 수 있고 여러 인원이 동시에 디자인 프로젝트에 참여할 수 있습니다. 또한 디자인 시스템 구축부터 개발(Hand-off)까지 전 과정을 하나로 통합해 현대 IT 제품 개발 환경의 필수적인 표준으로 자리 잡았습니다.

이 책은 어려운 전문 용어나 기능 나열에서 벗어나, 초보자도 31일 동안 하루 한 레슨씩 차근차근 따라 하며 실력을 키울 수 있도록 만든 가장 쉬운 안내서입니다. 특히 기존 피그마 책들과 달리 클로드(Claude)나 제미나이(Gemini) 같은 최신 AI 툴을 피그마와 연결하고 글로 명령어를 입력해 결과물을 만드는 '바이브코딩'까지 담아내어 최신 트렌드를 빠르게 경험할 수 있습니다.

화면 크기에 따라 디자인이 자연스럽게 변하는 '반응형 디자인'이나 클릭 한 번으로 수십 개의 화면 요소를 한꺼번에 바꾸는 '컴포넌트'처럼 어렵게 느껴질 수 있는 핵심 원리도 풍부한 그림과 직관적인 그래픽으로 친절하게 설명합니다. 책 속의 예제를 차례대로 따라 하다 보면, 디자인을 처음 접하는 입문자나 비전공자라도 한 달 만에 혼자서 멋진 웹·앱 화면을 완성하는 자신감을 얻게 될 것입니다.

[목 차]

Chapter 01 피그마(Figma) 첫걸음 - 탄탄한 기초 다지기

Lesson 01 | 피그마(Figma) 알아보기
01 피그마 인터페이스 만나기
02 피그마에서 계정 생성하고 로그인하기
[1]계정 생성하기
| 따라 하기 | 차근차근 따라하며 계정 생성하기
Special 피그마 요금제 알아보기
Special [도움말] 기능 알아보기

03 다운로드 프로그램 가이드
[1] 데스크톱 앱 알아 보기
[2] 모바일 앱 알아보기
[3] 폰트 인스톨러 알아보기

04 사용자 프로필 및 통합 검색
Lesson 02 | 파일 브라우저와 커뮤니티 살펴보기
01 사용자 프로필 및 통합 검색 알아보기
02 파일 탐색 및 커뮤니티 알아보기
[1] 저장됨
| 따라 하기 | 리소스 저장하기
[2] 디자인 리소스
| 따라 하기 | 디자인 리소스 사용하기
[3] Figma Make
| 따라 하기 | Figma Make에서 카드 불러오기
[4] 플러그인+위젯
| 따라 하기 | 플러그인+위젯 들여다보기
[5] 프레젠테이션
| 따라 하기 | 프레젠테이션 들여다보기
[6] 화이트보딩
| 따라 하기 | 화이트보딩에서 다이어그램 사용하기
[7] 웹사이트
| 따라 하기 | 웹사이트 사용하기
Lesson 03 | 새로운 팀과 새로운 파일 만들기
| 따라 하기 | 새로운 팀 만들기
Lesson 04 | 즐겨찾기와 리소스로 프로젝트와 파일 관리하기

Chapter 02 [디자인(Design)] 파일 마스터하기

Lesson 05 | [디자인(Design)] 파일 화면 구성 알아보기
| 따라 하기 | 디자인 파일 만들기

Lesson 06 | 피그마의 위계를 설정하기 위해 프레임, 섹션, 그룹 이해하기
01 프레임(Frame) 알아보기
| 따라 하기 | 프레임 만들기
[1] 프레임의 속성을 조절하는 [레이아웃], [외형], [채우기] 패널 알아보기
02 섹션(Section) 알아보기
03 그룹(Group) 알아보기
| 따라 하기 | [레이아웃] 패널을 이용해 프레임의 위치와 크기 조절하기

Lesson 07 | 피그마 만능 일꾼, 멀티 에딧(Multi-edit) 알아보기
01 멀티 에딧의 주요 기능 알아보기
| 따라 하기 | 멀티 에딧 사용하기

Lesson 08 | 피그마 기능의 집약체, 메인 메뉴 알아보기
01 액션 기능 알아보기
[1] 에셋(Asset) 알아보기
| 따라 하기 | 에셋 사용하기
[2] 플러그인(Plugins) 및 위젯(Widgets)
| 따라 하기 | 플러그인 및 위젯 둘러보기

02 파일 메뉴 알아보기
| 따라 하기 | 이미지 파일 불러와 크기 조절하기
| 따라 하기 | 템플릿 불러와 저장하기
| 따라 하기 | 이미지 파일 불러와 크기 조절하고 내보내기
03 편집 메뉴 알아보기
04 보기 메뉴 알아보기
| 따라 하기 | 시각적 가이드 살펴보기
| 따라 하기 | 윤곽선 들여다보기
Lesson 09 | 페이지 관리와 소스 활용을 위한 파일과 에셋 알아보기
01 파일과 에셋 알아보기
| 따라 하기 | 에셋 활용하기
02 페이지 관리 및 구성 알아보기

Chapter 03 그림 그리기 마스터! 도형 그리기로 시작하기

Lesson 10 | 도형의 기초 ① - 사각형 그리기
Lesson 11 | 도형의 기초 ② - 원 그리기
Lesson 12 | [원형] 툴을 이용해 호 그리기
Lesson 13 | 도형에 테두리 선 그리기
Lesson 14 | [라인] 툴로 화살표 그리기
Lesson 15 | 다양한 모양으로 다각형 그리기
Special 벡터 편집 모드 도구 상자 알아보기
| 따라 하기 | 도형을 이용해 나무 아이콘 만들기
Lesson 16 | [디자인(Design)] 파일의 계층 구조 알아보기
01 페이지(Page) 알아보기
02 섹션(Section) 알아보기
03 프레임(Frame) 알아보기
04 레이어(Layer) 알아보기
| 따라 하기 | 스케치를 따라 나만의 벡터 글씨 만들기

Chapter 04 매체 확장 핵심 기능 ① 오토 레이아웃

Lesson 17 | 나노 바나나를 이용해 디저트 홍보 카드 만들기
| Step 1 | 카드 베이스 준비하기
Special 피그마 색상 모드, 한눈에 이해하기
| Step 2 | 나노바나나로 이미지 만들기
| Step 3 | 텍스트 추가하고 속성 설정하기
Special 구글 폰트 페어링하기
| Step 4 | [오토 레이아웃]의 핵심 기능 적용하기

Chapter 05 매체 확장 핵심 기능 ② 반응형 디자인

Lesson 18 | 반응형 디자인 개념 이해하기
[1] 오토 레이아웃의 핵심, 부모와 자식 관계 알아보기
| 따라 하기 | 텍스트 카드에 반응형 디자인 적용하기
[2] [자동화 도구] 마스터하기

Lesson 19 | 반응형 디자인을 위한 크기 조절 규칙 알아보기
| 따라 하기 | 상품 카드를 만들면서 크기 조절 규칙 적용하기
규칙 1 | 고정 너비 - 컬러 칩 왜곡 방지
규칙 2 | 컨테이너 채우기 - 메인 이미지 영역 확장
규칙 3 | 최소 너비 추가 - 모바일 무너짐 방지
규칙 4 | 최대 너비 추가 - 데스크톱 밀도 유지

Lesson 20 | 애니메이션 프로토타입 적용하기
01 프로토타입 이미지 생성 및 저장하기
Special Figma Effect: 디자인에 깊이와 입체감을 더하는 네 가지 도구
02 인터랙션·애니메이션 프로토타입 실행하기

Lesson 21 | 반응형 디자인 중단점과 레이아웃 그리드 설정하기
01 반응형 디자인과 중단점(Breakpoint) 이해하기

Chapter 06 디자인 효율을 위한 컴포넌트와 베리언트

Lesson 22 | 스타일 저장! 컴포넌트 알아보기
01 컴포넌트 알아보기
[1] 컴포넌트의 기본 개념 이해하기
| 따라 하기 | 컴포넌트 생성하기

Lesson 23 | 컴포넌트 정리 상자, 베리언트 알아보기
01 베리언트(Variants)를 사용하는 이유
| 따라 하기 | 베리언트 생성을 위해 컴포넌트 준비하기
Special 개발 모드(Dev Mode)를 활용한 핸드오프 알아보기
| 따라 하기 | 개발 모드 실행하기
| 따라 하기 | 클로드에서 버튼 만들기

Chapter 07 통합 플랫폼, 피그마의 확장 파일 알아보기

Lesson 24 | 온라인 화이트 보드, [피그잼(FigJam)] 알아보기
01 도구 상자 알아보기
| 따라 하기 | 스티커 활용하기

Lesson 25 | 완벽한 프레젠테이션 제작 도구, [슬라이드(Slides)] 알아보기
[1] [슬라이드]로 프레젠테이션 파일 만들기
| 따라 하기 | 슬라이드 템플릿 사용하기
[2] 슬라이드 도구 상자 알아보기
[3] 애니메이션 적용하기
[4] 프레젠테이션 실행하기
[5] 공유 및 PDF 내보내기

Lesson 26 | 템플릿 기반 협업 도구, [버즈(Buzz)] 알아보기
| 따라 하기 | 피그마의 똑똑한 조수 ‘Buzz’로 AI 활용하기
Special 자주 사용하는 이미지 편집 메뉴 알아보기

Lesson 27 | 코딩 없는 퍼블리싱 플랫폼, [사이트(Site)] 알아보기
01 [사이트(Site)]의 주요 특징 알아보기
[1] 커스텀 도메인 연결 및 보안 환경 구축하기
[2] 메타데이터 및 SEO 최적화하기
[3] 템플릿과 구성 요소 제공하기
[4] 반응형 프레임과 동시 편집 기능 알아보기
[5] 애니메이션 및 인터랙션 효과 알아보기

02 [Site]의 인터페이스와 도구 상자 알아보기
[1] 좌측 패널 알아보기
[2] 도구 상자 알아보기
[3] 속성 패널 알아보기

Lesson 28 | AI를 활용한 UI 디자인, [메이크(Make)] 알아보기
[1] [메이크] 파일의 인터 페이스와 기본 기능 알아보기
[2] 좌측 패널: 디자인 카테고리 가이드 알아보기

Chapter 08 실무 프로젝트로 피그마 활용하기

Lesson 29 | 스킨케어 브랜드 ‘NORDIC BARE’ 상세 페이지 만들기
| Step 1 | 상세 페이지 프레임 만들고 텍스트 입력하기
| Step 2 | 상세 페이지 프레임에 이미지 불러오기
| Step 3 | 텍스트 속성 변경하기
| Step 4 | 도형으로 상세 페이지 장식하기
| Step 5 | 그라데이션 적용해 화사한 이미지 만들기

Lesson 30 | 버즈(Buzz)에서 대량으로 디자인 콘텐츠 생성하기
| Step 1 | 작업 영역 만들기
| Step 2 | 엑셀 데이터와 피그마 연동하기
| Step 3 | 제미나이를 활용해 다양한 샌드위치 이미지 만들기
| Step 4 | 이미지 삽입해 엑셀 파일 완성하기
| Step 5 | 버즈에서 엑셀 데이터와 연동하기
| Step 6 | 피그마 디자인모드에서 디자인 디테일 보정하기
Special 이미지 크기와 색 조절하기
Special 어도비 컬러 팔레트 활용하기

Lesson 31 | [메이크(Make)] 파일에서 바이브 코딩하기
| Step 1 | 작업 영역 만들기
| Step 2 | [사이트] 파일의 템플릿을 캡처해 [이미지 및 파일 추가] 요청하기