확장메뉴
주요메뉴


닫기
사이즈 비교
소득공제
미리보기 사이즈비교 공유하기

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

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

리뷰 총점9.7 리뷰 25건 | 판매지수 6,774
베스트
IT 모바일 top100 33주
구매 시 참고사항
  • 본 도서의 개정판이 출간되었습니다.
분철서비스 시작 시 알려드립니다. 분철서비스 알림신청

품목정보

품목정보
발행일 2021년 11월 01일
쪽수, 무게, 크기 352쪽 | 170*225*30mm
ISBN13 9791162244760
ISBN10 1162244763

책소개 책소개 보이기/감추기

목차 목차 보이기/감추기

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 파일 관리가 필요 없는 버전 히스토리
버전 히스토리 확인하기
버전 확인하고 되돌리기
[실습] 이전 히스토리로 복원하고 새로운 히스토리 저장하기

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 페이지 구성

부록 A 개발 전달과 코드 확인

Lesson 01 개발 전달
디자인 에셋 내보내기
모든 이미지 한 번에 내보내기
[디자인 노하우] 디자인과 개발 화면이 다를 때

Lesson 02 코드 확인
코드 변환 전 체크 요소
기본 인스펙터
플러그인 활용

부록 B 단축키와 플러그인

Lesson 01 단축키
헬프 버튼
필수 단축키와 선택 단축키
커스텀 단축키
자주 사용하는 Quick action

Lesson 02 플러그인
플러그인 시작하기
필수 플러그인
추천 플러그인
팀 플러그인

저자 소개 (1명)

출판사 리뷰 출판사 리뷰 보이기/감추기

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


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

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

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

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

추천평 추천평 보이기/감추기

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

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

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

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

회원리뷰 (25건) 리뷰 총점9.7

혜택 및 유의사항?
구매 UX/UI 디자이너를 위한 실무 피그마 내용 평점4점   편집/디자인 평점4점 YES마니아 : 플래티넘 스타블로거 : 블루스타 차*릇 | 2023.03.14 | 추천0 | 댓글0 리뷰제목
한빛미디어 출판사에서 출간된 클레어 정 작가님의 [UX/UI 디자이너를 위한 실무 피그마(디자인 시스템에서 개발 전달까지)]를 읽고 작성하는 리뷰입니다. 1부에서는 피그마 기능, 2부에서는 실습 프로젝트를 다루고 있어서 이 책만 읽어도 실무 피그마에 대해 어느정도 익힐 수 있는 것 같습니다. 피그마 설치부터 단축키 등 A TO Z를 다루고 있는 책 같아서 피그마를 처음 접하는 분들;
리뷰제목

한빛미디어 출판사에서 출간된 클레어 정 작가님의 [UX/UI 디자이너를 위한 실무 피그마(디자인 시스템에서 개발 전달까지)]를 읽고 작성하는 리뷰입니다. 1부에서는 피그마 기능, 2부에서는 실습 프로젝트를 다루고 있어서 이 책만 읽어도 실무 피그마에 대해 어느정도 익힐 수 있는 것 같습니다. 피그마 설치부터 단축키 등 A TO Z를 다루고 있는 책 같아서 피그마를 처음 접하는 분들에게 도움이 될 것 같습니다.

댓글 0 이 리뷰가 도움이 되었나요? 공감 0
구매 디자이너를 위한 실무피그마 내용 평점5점   편집/디자인 평점5점 YES마니아 : 로얄 k******7 | 2023.02.27 | 추천0 | 댓글0 리뷰제목
유엑스유아이 디자이너를 위한 실무피그마 책을 구입하고 쓰는 리뷰 입니다. 그래픽 디자이너라 피그마를 잘 쓰지 않다가 최근에 사용하게 되어서 급하게라도 툴을 익히려고 이 책을 사게 되었습니다. 내용가 목차가 필요한것들을 바로 바로 찾아볼 수 있게 잘 구성 되어 있고 실습하기도 좋네요. 틈틈히 보고 익히려고 노력 중입니다. 예스24에서 항상 책을 구입하는데 배송도 정말 빠;
리뷰제목
유엑스유아이 디자이너를 위한 실무피그마 책을 구입하고 쓰는 리뷰 입니다. 그래픽 디자이너라 피그마를 잘 쓰지 않다가 최근에 사용하게 되어서 급하게라도 툴을 익히려고 이 책을 사게 되었습니다. 내용가 목차가 필요한것들을 바로 바로 찾아볼 수 있게 잘 구성 되어 있고 실습하기도 좋네요. 틈틈히 보고 익히려고 노력 중입니다. 예스24에서 항상 책을 구입하는데 배송도 정말 빠르고 좋았습니다
댓글 0 이 리뷰가 도움이 되었나요? 공감 0
포토리뷰 피그마 기초부터 응용까지 다루는 책 내용 평점5점   편집/디자인 평점5점 월* | 2022.01.06 | 추천0 | 댓글0 리뷰제목
  올해 수업 중에 UX/UI 디자인이 있지만 처음 배우는 거라 두려워서 관련 책을 보기로 결정했다. 웹디자인 과목을 배울 때 코딩과 디자인을 한 번에 하려니 너무 힘들어서 이번에는 방학을 이용해 피그마를 익혀보려고 읽어보게 되었다.   저자 클레어 정은 스타틍업 초기 멤버로 시작해 인하우스를 거쳐 다양한 서비스를 만들고 있는 UI 디자이너이다. 피그마를 처음 시;
리뷰제목
 
올해 수업 중에 UX/UI 디자인이 있지만 처음 배우는 거라 두려워서 관련 책을 보기로 결정했다. 웹디자인 과목을 배울 때 코딩과 디자인을 한 번에 하려니 너무 힘들어서 이번에는 방학을 이용해 피그마를 익혀보려고 읽어보게 되었다.
 
저자 클레어 정은 스타틍업 초기 멤버로 시작해 인하우스를 거쳐 다양한 서비스를 만들고 있는 UI 디자이너이다. 피그마를 처음 시작하는 디자이너, 개발자를 위한 기초와 응용 예제까지 담아 실무 프로젝트로 디자인 역량을 높일 수 있다.
 
 

 
'파트 1 - 피그마 활용하기'
챕터 1 -  왜 스케치가 아닌 피그마를 써야 하는지, 피그마의 인터페이스가 어떻게 이루어져 있는지 보여준다. 피그마는 단순한 인터페이스로 다른 프로그램을 사용해본 적이 있다면 이 버튼이 무슨 기능을 하는지 직감적으로 알 수 있다. 
 
 
챕터 2 - 이제부터 실습을 할 수 있다. 예제 실습에 들어가기 전 필요한 파일은 작가의 피그마에 올려있어 검색 후 다운로드 받을 수 있다. 보통 실무에 쓰이는 디자인 프로그램은 어도비가 대부분이라 유료인데, 피그마는 무료라서 UX/UI를 배우려는 사람들이 부담 없이 사용해볼 수 있다. 웹 기반의 프로그램이라 꼭 설치를 안 해도 되고, 다른 사람에게도 링크를 보내 공유할 수 있어 협업에도 편리하다. 백터 도형을 만들고 색과 효과를 주는 방법이 나온다. 텍스트를 입력하고 도형의 모양을 변형하며 꾸밀 수 있다.
 
 

 
챕터 3 - 스마트셀렉션을 이용해 정렬과 간격 조정을 편하게 만들어 준다. 디자인에서 균형감과 통일감 있기 위해 중요한 그리드 레이아웃으로 모바일 프레임을 만들어 볼 수 있다.
 
챕터 4 - 버튼을 만들고 재사용 가능한 컴포넌트를 만들어 작업을 더 빨리할 수 있다. 오토레이아웃을 이용해 위치를 잡기 더 편리하다. 
 
챕터 5 - 컴포넌트를 베리언츠를 적용해 버튼을 만든다. 실체화면처럼 시연해보기도 한다. 
 
 

 
 
'파트 2 - 피그마로 디자인하기'는 디자인 실무 역량을 위한 예제로 'ios 뉴스 앱, 안드로이드 스포츠 클래스 앱, 반응형 패션 라이브 커머스 앱'을 디자인할 때 꼭 들어가야 하는 것과 어떻게 만드는지 알려준다. 파트 1에서 피그마를 잘 숙지했다면, 바로 UX/UI 디자인을 도전해볼 수 있다. 보통 프로그램 책의 예제들은 기능을 설명하기 위한 것인데 실무 UI 디자이너로 일하고 있는 클레어 정 작가의 책이라 그런지 바로 직접적인 도움이 되는 예시가 있다.
 
 

 
 
"YES24 리뷰어클럽 서평단 자격으로 작성한 리뷰입니다."
댓글 0 이 리뷰가 도움이 되었나요? 공감 0

한줄평 (6건) 한줄평 총점 8.6

혜택 및 유의사항 ?
구매 평점5점
잘 읽었습니다
이 한줄평이 도움이 되었나요? 공감 0
YES마니아 : 플래티넘 차*릇 | 2023.03.14
구매 평점5점
피그마 공부하기 좋아요
이 한줄평이 도움이 되었나요? 공감 0
YES마니아 : 로얄 k******7 | 2023.02.27
구매 평점2점
다른책에서 구체적인 내용을 찾거나 관련 영상을 찾는 불편함이 꽤 많았습니다.
1명이 이 한줄평을 추천합니다. 공감 1
w*******n | 2022.04.30
뒤로 앞으로 맨위로 aniAlarm