UX/UI 디자이너를 위한 실무 피그마 : 디자인 시스템에서 개발 전달까지
- 저자클레어 정 저
- 출판사한빛미디어
- 출판일2021-11-09
- 등록일2022-09-26
보유 1, 대출 0,
예약 0, 누적대출 14, 누적예약 0
책소개
디자인 시스템에서 개발 전달까지, 한 권으로 배우는 피그마 실무!UX/UI 디자인 실무는 학교에서 배우기 어려워 온라인 클래스의 도움을 받는 실정이다. 이런 점을 감안하여 다른 튜토리얼 책에서는 볼 수 없는 현업에서의 디자인 시스템, 개발 전달 과정을 자세히 기술하여 실무를 전달하려 노력했다. 이 책은 두 부분으로 나누어 1부에서는 피그마 기능, 2부에서는 실습 프로젝트를 다룬다. 각 장의 레슨을 따라 하면 자연스레 피그마 사용 방법을 익힐 수 있다. 디자인 커뮤니티에서 받은 도움을 이 책에 녹였으니 새로운 디자인 자산을 축적하는 기회로 삼을 수 있을 것이다.
저자소개
한국예술종합학교 디자인학과 졸업 작품에서 독학으로 스케치를 익히고 UX/UI 디자인 세계에 입문했다. 스타트업 초기 멤버로 시작하여 인하우스를 거치며 다양한 서비스를 만들고 있다. 현재 S사에서 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 파일 관리가 필요 없는 버전 히스토리버전 히스토리 확인하기버전 확인하고 되돌리기[실습] 이전 히스토리로 복원하고 새로운 히스토리 저장하기
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 actionLesson 02 플러그인 플러그인 시작하기필수 플러그인추천 플러그인팀 플러그인
한줄 서평
