[ 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 반응형 디자인의 이해