UX/UI 디자이너를 위한 실무 피그마(4판)

실무에서 바로 쓰는 피그마 실전 가이드!
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 반응형 디자인의 이해

클레어 정 한국예술종합학교 디자인학과를 졸업했습니다. 2016년부터 대기업과 스타트업을 거치며 다양한 B2B, B2C 서비스 프로젝트를 디자인해왔습니다. 기술과 비즈니스의 결합에 관심이 많으며 프로덕트 디자인, 비즈니스, AI 활용에 대한 강의와 집필을 하고 있습니다.
● figma.com/@uidesignguide