손으로 익히는 피그마 실전 매뉴얼

피그마UI3부터생성형AI까지,최신실무는이책에있다!

 

피그마를 처음 접하는 입문자부터 실무를 준비하는 디자이너, 개발자, 기획자, 마케터까지 함께 사용할 수 있는 실전 중심의 피그마 입문서입니다. 피그마의 기본 기능부터 디자인 시스템, 오토레이아웃, 인터랙티브 컴포넌트, 프로토타입, 개발자 전달까지 현업에서 활용하는 전 과정을 설명하며 실습을 통해 자연스럽게 익힐 수 있도록 구성했습니다. 3판에서는 최신 인터페이스인 피그마 UI3, 생성형 AI 기능, 데브 모드(Dev Mode), 베리어블(Variables) 등 최신 피그마 기능을 반영했습니다. UX/UI 디자인 실무 역량을 키우고 싶은 누구에게나 꼭 필요한 실전 가이드입니다.

 

<3판 주요 사항>

피그마 AI: 디자인 초안과 이미지 검색 등을 지원합니다. 플러그인이나 외부 프로그램을 사용하던 배경 삭제, 더미 콘텐츠 생성을 피그마를 벗어나지 않고 만들 수 있습니다.

멀티 에디트: 여러 레이어를 동시에 선택하여 반복 작업을 하지 않고 수정할 수 있습니다.

데브 모드: 기존 베타 버전에서 유료화된 만큼 더욱 강력하고 편리한 기능으로 업데이트되었습니다.

베리어블: 색상, 스타일에 변숫값을 지정하여 디자인 토큰을 만들고 관리할 수 있습니다.

UI3: 더 현대적이고 넓게 사용할 수 있는 UI로 전체 업데이트되었습니다

<예제 소스>

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 단축키

___헬프 버튼

___필수 단축키와 선택 단축키

피그마를 처음 시작하는 분이나 저처럼 피그마를 배우고 있는 학생에게 유익한 책입니다. 여러 가지 툴을 자세히 알 수 있고 내용이 어렵지 않아 좋았습니다.

_임수민 학생

 

최근에는 개발자에게 디자인이 넘어올 때 디자인 파일째로 넘어오기 때문에 개발자도 피그마 기능을 익혀두는 것이 좋습니다. 처음 피그마를 접한 사람을 위해 피그마의 모든 기능에 대한 상세한 설명이 좋았습니다.

_조현석 11번가 개발자

 

이 책은 개발자에게도 유익합니다. 이전까지는 디자인보다 프론트, 백이 더 중요하다고 생각했는데 책을 읽고 생각이 바뀌었습니다. 피그마로 디자인을 처리하는 흐름을 보니 프론트를 피그마에서 구현하는 듯합니다. 혼자 코딩을 한다면 이 책으로 디자인 측면과 프로젝트에 도움받을 수 있습니다. 저자의 노하우 공유는 고마울 정도입니다.

_윤수혁 학생

 

스케치보다 피그마가 익숙해질 세대를 위한 매뉴얼입니다. 피그마 기초를 이루는 핵심 용어와 이론이 잘 설명되어 있습니다. 기능적으로 다양한 선택지 아래 실제 응용 가능한 디자인 방법을 제공합니다.

_정소연 두나무 디자이너

 

피그마를 처음 시작하는 디자이너뿐만 아니라 개발자와 마케터에게도 유용합니다. 마케터로 일하며 피그마를 통한 협업이 필수적이었는데 이 책으로 평소 갖고 있던 궁금증을 해결했습니다. 더불어 세부적인 기능을 이해하는 데 많은 도움을 받았습니다. 피그마, 디자인이 궁금했지만 배울 엄두가 나지 않았던 마케터에게 한 걸음을 내딛게 해준 책입니다. 추천합니다.

_김승현 DND 마케터

 

빠르게 익혀 현업에서 바로 사용해야 한다면 실습이 많은 이 책을 선택하겠습니다. 필요한 기능은 그때마다 도움말을 찾아보면 되니 기본 기능만 먼저 익혀보세요. 피그마가 와이어프레임부터 간단한 프로토타입까지 모두 지원되기에 자주 사용하는 기능은 직군별로 조금씩 다를 수 있습니다. 이 책의 실습을 따라 하는 것만으로도 피그마를 잘 쓸 수 있습니다.

_류난희 프로덕트 오너