AI 에이전트와 함께 완성하는 UX/UI 디자인 실무 최신 피그마 기능부터 디자인 시스템, 개발 협업까지 2만 독자가 선택한 피그마 베스트셀러, 『UX/UI 디자이너를 위한 실무 피그마』가 4판으로 돌아왔습니다. 이 책은 피그마의 기본 기능부터 디자인 시스템 구축, 프로토타입 제작과 개발 협업까지 UX/UI 디자인 실무 전반을 다루는 안내서입니다. AI를 활용해 기획과 디자인을 발전시키고 개발까지 연결하는 최신 흐름을 반영한 4판에서는 피그마 AI 에이전트와 Figma Make를 활용한 디자인 워크플로를 새롭게 추가했습니다. 또한 MCP를 통한 디자인·개발 연동 등 최신 기능과 실무 활용법을 담았습니다.

[ Part 1 피그마 활용하기 ] 1장 피그마 시작하기 _Lesson 01 피그마를 써야 하는 이유 __피그마 소개 __피그마는 실무에서 어떻게 사용될까요? _Lesson 02 피그마 파일 살펴보기 __파일이 열리면 보이는 화면 __인터페이스 영역 __레이어와 컨테이너 __컨테이너: 그룹·프레임·섹션 __페이지 __빠른 실행과 AI 도구 __주요 AI 도구 __이 책에서 주로 다루지 않는 다른 피그마 제품 _Lesson 03 실무와 AI 활용을 위한 환경 설정 __언어 설정 __폰트 __피그마 앱 __iOS · Android UI 템플릿 __기본 레이어 스타일 설정 __AI 활용 환경 설정 2장 그래픽 스타일과 라이브러리 _Lesson 01 그래픽 스타일과 벡터 __프레임과 레이어 __채우기 옵션 __[Help] 셰이더 + 모션 __도형과 벡터 편집 _Lesson 02 스타일과 라이브러리 __스타일이란 __스타일 만들고 편집하기 __그룹 스타일과 정렬 __라이브러리로 발행 __팀 라이브러리 _Lesson 03 피그마 드로우로 벡터 그리기 __드로우 모드 진입과 브러시 __벡터 네트워크 3장 정렬과 레이아웃 _Lesson 01 정렬과 수정을 편리하게: 스마트 셀렉션과 멀티 에디트 __[실습] 스마트 셀렉션 만들기 __[실습] 스마트 셀렉션으로 리사이징 __멀티 에디트 _Lesson 02 반응형 디자인을 위한 콘스트레인트와 레이아웃 가이드 __콘스트레인트 __[실습] 레이아웃 가이드 __콘스트레인트와 레이아웃 가이드 함께 활용하기 4장 컴포넌트와 오토레이아웃 _Lesson 01 반복 사용을 위한 컴포넌트 __컴포넌트 __[실습] 컴포넌트로 UI 구성하고 라이브러리 만들기 _Lesson 02 블록처럼 UI를 구성하는 오토레이아웃 __오토레이아웃 __리사이징 __오토레이아웃 무시하기 __[실습] 오토레이아웃으로 투두 리스트 만들기 5장 디자인 시스템과 협업 _Lesson 01 컴포넌트와 관련 기능 살펴보기 __컴포넌트 __베리언츠 __컴포넌트 프로퍼티 __슬롯 __인터랙티브 컴포넌트 __다섯 기능이 이어지는 방식 _Lesson 02 디자인 시스템을 위한 베리언츠 __베리언츠 __[실습] 버튼 베리언츠 __알아두면 좋은 베리언츠 사용법 _Lesson 03 디자인을 쉽게 바꾸는 컴포넌트 프로퍼티와 슬롯 __[실습] 컴포넌트 프로퍼티와 슬롯 __Layout에 슬롯 만들고 조합하기 __[Help] Instance swap과 슬롯, 언제 무엇을 쓸까요? __데브 모드의 컴포넌트 플레이그라운드 _Lesson 04 디자인 토큰과 베리어블 __디자인 토큰 __디자인 토큰 이름 규칙 __베리어블 __[실습] 베리어블로 디자인 토큰 적용하기 __[Help] Check designs로 깨진 토큰 확인하기 6장 프로토타입과 모션 _Lesson 01 실제 화면처럼 시연하는 프로토타입 __프로토타입 시작하기 __스크롤 _Lesson 02 실제처럼 작동하는 인터랙티브 컴포넌트 __인터랙티브 컴포넌트 __[실습] 버튼 인터랙티브 컴포넌트 __[실습] 토글 인터랙티브 컴포넌트 __[실습] 모달 팝업 인터랙티브 컴포넌트 __[실습] 이미지 캐러셀 인터랙티브 컴포넌트 __[실습] 베리어블 프로토타입 __다중 액션 _Lesson 03 애프터 이펙트를 대체하는 모션 __Motion이 등장한 이유 __Motion 인터페이스 __프리셋으로 빠르게 시작하기 __[실습] 로딩 애니메이션 __키프레임과 이징 정밀 제어 __모션 시스템: 재사용 가능한 애니메이션 __개발 핸드오프와 코드 익스포트 __파일로 내보내기 __앞으로 추가될 기능 [ Part 2 피그마로 디자인하기 ] 7장 AI 데이팅 앱 위밋 _Lesson 01 이 장에서 무엇을 만드는가 __학습 목표 __위밋 콘셉트 프로젝트 소개 __시작하기 전에 _Lesson 02 기획에서 디자인으로: 에이전트 활용 __실무 흐름 개요 __에이전트와 대화하기 전에 __[실습 1] 유저 플로우에서 와이어프레임 만들기 __[실습 2] 와이어프레임에서 디자인 콘셉트 만들기 __[실습 3] 여러 사용자 프로필을 한 번에 만들기 __[실습 4] 프로토타입과 모션 __온보딩 프로토타입 _Lesson 03 피그마로 디자인하기 __온보딩 __프로필 매칭 __메시지 8장 B2B 대시보드 소셜미터 _Lesson 01 이 장에서 무엇을 만드는가 __학습 목표 __소셜미터 프로젝트 소개 _Lesson 02 기획에서 디자인으로: 에이전트 활용 __실무 흐름 개요 __[실습 1] 플로우 차트에서 와이어프레임 만들기 __[실습 2] 와이어프레임에서 디자인 만들기 __[실습 3] 더미 데이터 채우기 __[실습 4] 차트 진입 모션 만들기 _Lesson 03 광고주 검색 화면 직접 그리기 __광고주 검색 화면 _Lesson 04 인플루언서 대시보드 직접 그리기 __인플루언서 대시보드 9장 디자인 시스템 _Lesson 01 예제 설명 _Lesson 02 시스템 원칙 _Lesson 03 컬러 시스템 _Lesson 04 타이포그래피 _Lesson 05 버튼 _Lesson 06 텍스트 인풋 _Lesson 07 토글과 태그 _Lesson 08 라디오 버튼, 체크박스, 카드와 모달 _Lesson 09 페이지 구성 10장 피그마 MCP와 Code to Canvas _Lesson 01 피그마 MCP란? __MCP란 무엇인가? __왜 중요한가? _Lesson 02 피그마 MCP 연결하기 __Claude.ai(웹/데스크톱 앱) - 커넥터로 연결 __클로드 코드-피그마 데스크톱 MCP 서버 연결 _Lesson 03 디자인에서 코드로 __[디자인 노하우] 피그마 MCP를 어떻게 활용할까? _Lesson 04 코드에서 디자인으로: Code to Canvas __라이브러리와 자동으로 연결 _Lesson 05 Figma Make로 한 걸음 더 __Figma Make 사용하기 __커스텀 스킬 [ 부록 ] A 빠른 실행과 에이전트 명령어 _Lesson 01 빠른 실행과 필수 단축키 _Lesson 02 자주 쓰는 빠른 실행 명령어 _Lesson 03 에이전트 명령어 치트시트 B 버전 히스토리와 브랜치 _Lesson 01 활용법 C 디자인 전 알아야 하는 UI 기술 지식 _Lesson 01 해상도와 화소 밀도 _Lesson 02 반응형 디자인의 이해