책소개
손으로 익히는 피그마 실전 매뉴얼
피그마 UI3부터 생성형 AI까지, 최신 실무는 이 책에 있다!
피그마를 처음 접하는 입문자부터 실무를 준비하는 디자이너, 개발자, 기획자, 마케터까지 함께 사용할 수 있는 실전 중심의 피그마 입문서입니다. 피그마의 기본 기능부터 디자인 시스템, 오토레이아웃, 인터랙티브 컴포넌트, 프로토타입, 개발자 전달까지 현업에서 활용하는 전 과정을 설명하며 실습을 통해 자연스럽게 익힐 수 있도록 구성했습니다. 3판에서는 최신 인터페이스인 피그마 UI3, 생성형 AI 기능, 데브 모드(Dev Mode), 베리어블(Variables) 등 최신 피그마 기능을 반영했습니다. UX/UI 디자인 실무 역량을 키우고 싶은 누구에게나 꼭 필요한 실전 가이드입니다.
<3판 주요 사항>
<예제 소스>
https://figma.com/@uidesignguide
저자소개
목차
Part 1 피그마 활용하기
Chapter 1 피그마 시작하기
__Lesson 01 피그마를 써야 하는 이유
___피그마 소개
___피그마를 활용한 디자이너의 하루
___피그마를 활용한 기획자의 하루
___피그마를 활용한 개발자의 하루
___디자인 노하우
___[디자인 노하우] 팀원들에게 피그마 도입을 설득하고 싶어요!
__Lesson 02 피그마 설치와 기본 인터페이스 둘러보기
___피그마 설치
___메인 대시보드
___피그마 파일
___[Help] 피그마 AI
___[디자인 노하우] 디자인하기 전 알아야 하는 UI 기술 지식
___스케치 프로젝트를 피그마로 옮기기
__Lesson 03 작업 전 환경 설정
___폰트
___안드로이드와 iOS UI 템플릿
___기본 레이어 스타일 설정
___Preference 설정
Chapter 2 그래픽 스타일과 라이브러리
__Lesson 01 그래픽 스타일과 벡터
___그래픽 스타일
__Lesson 02 스타일과 라이브러리
___스타일 만들고 편집하기
___그룹 스타일과 정렬
___라이브러리로 발행
___팀 라이브러리
___[실습] 스타일을 저장하고 라이브러리로 발행하기
___[Help] 피그마 드로우
Chapter 3 정렬과 레이아웃
__Lesson 01 정렬과 수정을 편리하게: 스마트 셀렉션과 멀티 에디트
___스마트 셀렉션 만들기
___[실습] 특정 셀렉션 리사이징
___[실습] 여러 셀렉션 리사이징
___[실습] 오브젝트 복제
___멀티 에디트
__Lesson 02 반응형 디자인을 위한 콘스트레인트와 레이아웃 그리드
___콘스트레인트
___[실습] 레이아웃 그리드
___콘스트레인트와 레이아웃 그리드 함께 활용하기
Chapter 4 컴포넌트, 플러그인, 오토레이아웃
__Lesson 01 컴포넌트, 플러그인, 위젯
___컴포넌트
___인스턴스 수정과 오버라이드
___[실습] 컴포넌트로 UI 구성하고 라이브러리 만들기
___플러그인과 위젯
__Lesson 02 블록처럼 UI를 구성하는 오토레이아웃
___오토레이아웃
___리사이징
___절대적 위칫값
___[실습] 오토레이아웃
Chapter 5 디자인 시스템과 협업
__Lesson 01
___디자인 시스템을 위한 베리언츠
___베리언츠
___[실습] 토글, 버튼 베리언츠
___베리언츠 만들고 사용하기
___프로처럼 베리언츠 활용하기
___[디자인 노하우] 디자인 시스템을 시작하는 팁
__Lesson 02 시스템을 정리하는 컴포넌트 프로퍼티
___컴포넌트 속성
___[실습] 리스트 컴포넌트에 컴포넌트 속성 적용하기
__Lesson 03 디자인 토큰과 베리어블
___디자인 토큰
___디자인 토큰 이름 규칙
___베리어블
___[실습] 베리어블로 디자인 토큰 적용하기
___프로토타입 요소
__Lesson 04 실제 화면처럼 시연하는 프로토타입
___인터랙션과 애니메이션 만들기
___프로토타입 세팅 설정하기
___프로토타입 화면 보기
___[실습] 두 프레임을 오가는 프로토타입 만들기
__Lesson 05 실제처럼 작동하는 인터랙티브 컴포넌트
___인터랙티브 컴포넌트
___[실습] 버튼 인터랙티브 컴포넌트
___[실습] 토글 인터랙티브 컴포넌트
___[실습] 모달 팝업 인터랙티브 컴포넌트
___[실습] 이미지 캐러셀 인터랙티브 컴포넌트
___[실습] 베리어블 프로토타입
__Lesson 06
___파일 관리가 필요 없는 버전 히스토리
___버전 히스토리 확인하기
___버전 확인하고 되돌리기
___[실습] 이전 히스토리로 복원하고 새로운 히스토리 저장하기
Part 2 피그마로 디자인하기
Chapter 6 iOS 뉴스 앱
__Lesson 01 예제 설명
__Lesson 02 하단 내비게이션
__Lesson 03 카드와 리스트
__Lesson 04 상단 탭 메뉴와 아티클 페이지
__Lesson 05 페이지 전환 프로토타입
___[디자인 노하우] 아이콘 활용 팁
Chapter 7 안드로이드 스포츠 클래스 앱
__Lesson 01 예제 설명
__Lesson 02 공통 레이아웃
__Lesson 03 메인 화면
__Lesson 04 클래스 상세 페이지
__Lesson 05 스크롤 프로토타입
___[디자인 노하우] 다크 모드의 디자인 요소
Chapter 8 반응형 패션 라이브 커머스
__Lesson 01 예제 설명
__Lesson 02 반응형 웹을 위한 레이아웃 그리드
__Lesson 03 아이콘
__Lesson 04 내비게이션
__Lesson 05 카드 UI
__Lesson 06 패드 뷰와 데스크톱 뷰
__Lesson 07 가로 스크롤 프로토타입
__Lesson 08 슬라이드 프로토타입
___[디자인 노하우] 반응형 디자인의 이해
Chapter 9 디자인 시스템
__Lesson 01 예제 설명
__Lesson 02 시스템 원칙
__Lesson 03 컬러 시스템
__Lesson 04 타이포그래피
__Lesson 05 버튼
__Lesson 06 텍스트 인풋
__Lesson 07 토글과 태그
__Lesson 08 라디오 버튼과 체크박스
__Lesson 09 카드와 모달
__Lesson 10 페이지 구성
Chapter 10 글로벌 NFT 마켓
__Lesson 01 예제 설명
__Lesson 02 공통 컴포넌트
__Lesson 03 콘텐츠 영역
__Lesson 04 정보성 컴포넌트
부록 A 개발 전달과 파일 관리
__Lesson 01 개발 전달
___디자인 애셋 내보내기
___[디자인 노하우] 디자인과 개발 화면이 다를 때
__Lesson 02 데브 모드
___코드 변환 전 체크 요소
___데브 모드 창
__Lesson 03 브랜치로 파일 관리
___브랜치 활용하기
___예제
__Lesson 04 단축키
___헬프 버튼
___필수 단축키와 선택 단축키
출판사리뷰
실무에서 바로 쓰는 피그마 실전 가이드
디자인 시스템부터 AI 기능까지, 최신 피그마를 가장 잘 담은 책
글로벌 UI 디자인 도구의 기준이 바뀌고 있습니다. 이제는 브라우저에서 여러 사람이 동시에 디자인 시스템까지 함께 구축하는 시대입니다. 이 책은 그 흐름의 중심에서 피그마를 제대로 배우고 싶은 디자이너, 개발자, 마케터 등 모두를 위한 책입니다.
3판에서는 새롭게 업데이트된 피그마 UI3 환경과 함께 생성형 AI 기능, 멀티 에디트, 데브 모드, 베리어블, 피그마 드로우 등 최신 기능까지 모두 담았습니다. 1부에서는 피그마의 기본 인터페이스, 그래픽 스타일, 컴포넌트, 오토레이아웃, 디자인 시스템 구축까지 핵심 기능을 익힙니다. 2부에서는 뉴스 앱, 스포츠 클래스 앱, NFT 마켓 등 실제 프로젝트를 기반으로 실습하며 실무 역량을 탄탄하게 다집니다. 디자인 시스템 운영, 협업 효율을 높이는 팁, 실무 노하우까지 아낌없이 담았습니다. 작은 실습 하나부터 완성 프로젝트까지 이 책과 함께 피그마의 무한한 세계에 빠져보세요.
오탈자 등록
예제소스