UX/UI 디자이너를 위한 실무 피그마

디자인 시스템에서 개발 전달까지

클레어 정 저자(글)

한빛미디어 · 2022년 11월 01일

책 소개

디자인 시스템에서 개발 전달까지, 한 권으로 배우는 피그마 실무!

UX/UI 디자인 실무는 학교에서 배우기 어려워 온라인 클래스의 도움을 받는 실정이다. 이런 점을 감안하여 다른 튜토리얼 책에서는 볼 수 없는 현업에서의 디자인 시스템, 개발 전달 과정을 자세히 기술하여 실무를 전달하려 노력했다. 이 책은 두 부분으로 나누어 1부에서는 피그마 기능, 2부에서는 실습 프로젝트를 다룬다. 각 장의 레슨을 따라 하면 자연스레 피그마 사용 방법을 익힐 수 있다. 디자인 커뮤니티에서 받은 도움을 이 책에 녹였으니 새로운 디자인 자산을 축적하는 기회로 삼을 수 있을 것이다.

〈개정판 주요 사항〉
피그마의 주요 업데이트 내용을 추가하고 예제에 이를 반영했다.
● 다크모드: 데스크톱과 웹 모두 다크모드 지원
● 오토레이아웃: 캔버스 컨트롤 가능 및 반응형 옵션 추가
● 컴포넌트 속성: 컴포넌트 속성을 사용해서 베리언츠 개수 줄이기 가능
● 스프링 애니메이션: 프로토타이핑에서 더 자연스럽고 부드러운 애니메이션 가능
● 가변 폰트: 가변 폰트 사용 가능
● 스포트라이트: 다른 사람이 내 화면에 집중하게 하는 기능 추가
● 개별 스트로크: 사각형 도형에서 상하좌우에 각각 선 적용 가능
● 브랜칭 리뷰 상태: 업데이트, 디자인 피드백, 변경 요청을 관리자가 승인 가능
● 아웃라인: 아웃라인에서 스트로크의 굵기와 도형의 가장자리를 알려주는 바운딩 박스 표시
● 패스워드 보안 링크: 파일과 프로토타입 공유 시 패스워드 지정 가능
● 데스크톱 탭 업데이트: 탭을 고정하거나 드래그하여 분리 가능
● 위젯 코드 제너레이터: 피그마 위젯을 플러그인처럼 만들고 커뮤니티에 배포 가능

〈예제 소스〉
figma.com/@uidesignguide

작가정보

저자(글) 클레어 정

한국예술종합학교 디자인학과 졸업 작품을 준비하며 독학으로 스케치를 익히고 UX/UI 디자인 세계에 입문했다. 스타트업 초기 멤버로 시작하여 인하우스를 거치며 다양한 서비스를 만들었다. 현재 글로벌 블록체인 서비스의 프로덕트 디자이너로 일하고 있다.

목차

• Part 1 피그마 활용하기
  
  Chapter 1 피그마 시작하기
  __Lesson 01 왜 피그마인가
  ___피그마 소개
  ___피그마를 활용한 디자이너의 하루
  ___피그마를 활용한 기획자의 하루
  ___피그마를 활용한 개발자의 하루
  ___[디자인 노하우] 팀원들에게 피그마 도입을 설득하고 싶어요!
  __Lesson 02 피그마 설치와 기본 인터페이스 둘러보기
  ___피그마 설치
  ___메인 대시보드
  ___상단 도구 모음
  ___사이드바
  ___공유와 뷰 세팅
  ___[디자인 노하우] 디자인하기 전 알아야 하는 UI 기술 지식
  __Lesson 03 작업 전 환경 설정
  ___스케치 프로젝트를 피그마로 옮기기
  ___폰트
  ___안드로이드와 iOS UI 템플릿 다운로드
  ___기본 레이어 스타일 설정
  ___컬러 프로필 선택
  ___캔버스 컬러 선택
  ___Preference 설정
  
  Chapter 2 그래픽 스타일과 라이브러리
  __Lesson 01 그래픽 스타일과 벡터
  ___패널 기능 알아보기
  ___벡터
  __Lesson 02 스타일과 라이브러리
  ___스타일 만들고 편집하기
  ___그룹 스타일과 정렬
  ___라이브러리로 발행
  ___팀 라이브러리
  ___[실습] 스타일을 저장하고 라이브러리로 발행하기
  
  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 파일 관리가 필요 없는 버전 히스토리
  ___버전 히스토리 확인하기
  ___버전 확인하고 되돌리기
  ___[실습] 이전 히스토리로 복원하고 새로운 히스토리 저장하기
  
  
  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 브랜치로 파일 관리
  ___브랜치 활용하기
  ___브랜치 만들기
  ___브랜치 리뷰 요청하기
  ___메인 파일에 브랜치 머지하기
  ___브랜치 관리하기
  
  부록 B 단축키와 플러그인
  __Lesson 01 단축키
  ___헬프 버튼
  ___필수 단축키와 선택 단축키
  ___커스텀 단축키
  ___자주 사용하는 Quick action
  __Lesson 02 플러그인
  ___플러그인 시작하기
  ___필수 플러그인
  ___추천 플러그인
  ___팀 플러그인

추천사

• 임수민 (학생)

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

• 조현석 (11번가 개발자)

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

• 윤수혁 (학생)

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

• 정소연 (두나무 디자이너)

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

• 김승현 (DND 마케터)

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

• 류난희 (프로덕트 오너)

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

출판사 서평

협업에 특화된 UX/UI 디자인 도구 - 피그마
기능은 예제로 익히고, 실무 감각은 프로젝트로 스킬업

피그마는 글로벌 UX/UI 도구로 높은 성장을 하였습니다. 이 책은 피그마를 처음 시작하는 디자이너, 기
획자, 개발자를 위해 기본부터 응용까지 모두 담았습니다. 피그마 도구 설명과 디자인 개념을 안내하고
과정마다 예제로 실습합니다. 피그마를 제대로 사용하기 위해 필요한 기능을 익힌 뒤 프로젝트로 실무 역
량을 다집니다. 해상도, 아이콘 디자인 규칙, 다크모드 같은 좋은 디자인을 위해 고려해야 할 유용한 팁도
제시합니다. 풍부한 예제로 피그마를 익히고 실무 프로젝트로 디자인 역량을 높이세요.

● 피그마 설치 / 환경 설정
● 벡터 / 스마트 셀렉션 / 오토레이아웃
● 콘스트레인트 / 레이아웃그리드
● 컴포넌트 / 라이브러리 / 프로토타입
● 개발 전달 / 코드 확인 / 버전 히스토리
● iOS 뉴스 앱 / 안드로이드 스포츠 클래스 앱 / 반응형 패션 라이브 커머스
● 디자인 시스템과 B2B 솔루션
● 글로벌 NFT 마켓

기본정보

ISBN	9791169210461 ( 1169210465 )
발행(출시)일자	2022년 11월 01일
쪽수	416쪽
크기	171 * 225 * 21 mm / 789 g
총권수	1권
이 책의 개정정보	가장 최근에 출시된 개정판입니다. 구판보기