쪽수
ISBN
브랜드
AI 에이전트와 함께 완성하는 UX/UI 디자인 실무
최신 피그마 기능부터 디자인 시스템, 개발 협업까지
2만 독자가 선택한 피그마 베스트셀러, 『UX/UI 디자이너를 위한 실무 피그마』가 4판으로 돌아왔습니다. 이 책은 피그마의 기본 기능부터 디자인 시스템 구축, 프로토타입 제작과 개발 협업까지 UX/UI 디자인 실무 전반을 다루는 안내서입니다. AI를 활용해 기획과 디자인을 발전시키고 개발까지 연결하는 최신 흐름을 반영한 4판에서는 피그마 AI 에이전트와 Figma Make를 활용한 디자인 워크플로를 새롭게 추가했습니다. 또한 MCP를 통한 디자인·개발 연동 등 최신 기능과 실무 활용법을 담았습니다.
AI 에이전트로 아이디어를 실제 화면으로 구현하는 방법부터 컴포넌트와 디자인 시스템 설계, 모션 제작, 코드와 디자인을 오가는 협업까지 실제 프로젝트를 통해 익힙니다. 피그마 입문자는 물론 실무 역량을 확장하려는 UX/UI 디자이너가 최신 기능을 익히고, AI 시대에 필요한 디자인 워크플로를 실무에 적용할 수 있도록 돕습니다.
출판사 리뷰
실무에서 바로 쓰는 피그마 실전 가이드!
AI 에이전트부터 디자인 시스템, 모션, 개발 협업까지 2026 피그마 최신 기능 반영
피그마는 이제 화면을 디자인하는 도구를 넘어 AI와 함께 디자인을 만들고, 프로토타입을 구현하고, 개발 단계까지 연결하는 도구로 확장되고 있습니다. 변화하는 피그마를 제대로 익히고 실무에 활용하고 싶은 디자이너를 위해 4판으로 새롭게 돌아왔습니다.
최신 피그마의 변화에 맞춰 ‘AI 에이전트, MCP, Figma Make’ 등 AI 기반 작업 환경부터 ‘디자인 시스템, 컴포넌트, 프로토타입, 모션 디자인’까지 폭넓게 다룹니다. 또한 실제 서비스 제작 과정을 따라 하며 화면 설계부터 인터랙션 구현, 디자인 시스템 구축, 개발 협업까지 실무에 필요한 역량을 익힐 수 있습니다. 피그마의 기본기를 다지는 것부터 AI를 활용한 새로운 작업 방식까지, 단계별 실습으로 탄탄하게 배워보세요.
[피그마 기초부터 실무 디자인까지]
● 피그마 인터페이스 / AI 활용 환경 설정
● 벡터 / 스마트 셀렉션 / 오토레이아웃
● 컴포넌트 / 슬롯 / 프로퍼티
● 베리어블 / 디자인 시스템 / 라이브러리
● 프로토타입 / Figma Motion
[AI와 함께하는 디자인 워크플로]
● AI 에이전트로 유저 플로우와 와이어프레임 제작
● AI 기반 디자인 콘셉트 및 화면 설계
● Figma Make로 디자인과 인터랙션 구현
● MCP로 피그마와 코드 연결
● 셰이더와 모션으로 그래픽 표현력 확장
[4판 주요 사항]
● AI 에이전트: AI를 활용해 디자인 작업을 진행하고 반복 작업을 효율화하는 방법을 배웁니다.
● MCP와 개발 협업: 피그마 디자인을 AI 도구 및 개발 워크플로와 연결하는 방법을 익힙니다.
● Figma Make: AI를 활용해 아이디어를 실제 동작하는 결과물로 발전시키는 과정을 살펴봅니다.
● 모션 디자인: Figma Motion의 타임라인, 키프레임, 이징을 활용해 인터랙션과 애니메이션을 구현합니다.
● 최신 디자인 기능: 슬롯, Code Layers, Shader Fills & Effects 등 새롭게 확장된 기능을 소개합니다.
● 실전 프로젝트: 위밋, 소셜미터 등의 서비스 디자인과 디자인 시스템 구축을 직접 실습합니다.
목차
[ 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 반응형 디자인의 이해
리뷰
30,000원
10%
27,000원