UX/UI 디자이너를 위한 실무 피그마 : 디자인 시스템에서 개발 전달까지 (개정판)

UX/UI 디자이너를 위한 실무 피그마 : 디자인 시스템에서 개발 전달까지 (개정판)

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

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

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

클레어정

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

목차

Part1피그마활용하기

Chapter1피그마시작하기
__Lesson01왜피그마인가
___피그마소개
___피그마를활용한디자이너의하루
___피그마를활용한기획자의하루
___피그마를활용한개발자의하루
___[디자인노하우]팀원들에게피그마도입을설득하고싶어요!
__Lesson02피그마설치와기본인터페이스둘러보기
___피그마설치
___메인대시보드
___상단도구모음
___사이드바
___공유와뷰세팅
___[디자인노하우]디자인하기전알아야하는UI기술지식
__Lesson03작업전환경설정
___스케치프로젝트를피그마로옮기기
___폰트
___안드로이드와iOSUI템플릿다운로드
___기본레이어스타일설정
___컬러프로필선택
___캔버스컬러선택
___Preference설정

Chapter2그래픽스타일과라이브러리
__Lesson01그래픽스타일과벡터
___패널기능알아보기
___벡터
__Lesson02스타일과라이브러리
___스타일만들고편집하기
___그룹스타일과정렬
___라이브러리로발행
___팀라이브러리
___[실습]스타일을저장하고라이브러리로발행하기

Chapter3정렬과레이아웃
__Lesson01정렬을편리하게:스마트셀렉션
___스마트셀렉션만들기
___[실습]특정셀렉션리사이징
___[실습]여러셀렉션리사이징
___[실습]오브젝트복제
__Lesson02반응형디자인을위한콘스트레인트와레이아웃그리드
___콘스트레인트
___[실습]레이아웃그리드
___콘스트레인트와레이아웃그리드함께활용하기

Chapter4리소스,컴포넌트,오토레이아웃
__Lesson01리소스-컴포넌트,플러그인,위젯
___리소스
___컴포넌트
___인스턴스수정과오버라이드
___[실습]컴포넌트로UI구성하고라이브러리만들기
___플러그인
___위젯
__Lesson02블록처럼UI를구성하는오토레이아웃
___오토레이아웃
___리사이징
___절대적위칫값
___[실습]오토레이아웃

Chapter5디자인시스템과협업
__Lesson01진보한디자인시스템을위한베리언츠
___베리언츠
___[실습]토글,버튼베리언츠
___베리언츠만들고사용하기
___프로처럼베리언츠활용하기
__Lesson02시스템을정리하는컴포넌트프로퍼티
___컴포넌트속성
___[실습]리스트컴포넌트에컴포넌트속성적용하기
__Lesson03실제화면처럼시연하는프로토타입
___프로토타입요소
___인터랙션과애니메이션만들기
___프로토타입세팅설정하기
___프로토타입화면보기
___[실습]두프레임을오가는프로토타입만들기
__Lesson04실제처럼작동하는인터랙티브컴포넌트
___인터랙티브컴포넌트
___[실습]버튼인터랙티브컴포넌트
___[실습]토글인터랙티브컴포넌트
___[실습]모달팝업인터랙티브컴포넌트
___[실습]이미지캐러셀인터랙티브컴포넌트
__Lesson05파일관리가필요없는버전히스토리
___버전히스토리확인하기
___버전확인하고되돌리기
___[실습]이전히스토리로복원하고새로운히스토리저장하기

Part2피그마로디자인하기

Chapter6iOS뉴스앱
__Lesson01예제설명
__Lesson02하단내비게이션
__Lesson03카드와리스트
__Lesson04상단탭메뉴와아티클페이지
__Lesson05페이지전환프로토타입
___[디자인노하우]아이콘활용팁

Chapter7안드로이드스포츠클래스앱
__Lesson01예제설명
__Lesson02공통레이아웃
__Lesson03메인화면
__Lesson04클래스상세페이지
__Lesson05스크롤프로토타입
___[디자인노하우]다크모드의디자인요소

Chapter8반응형패션라이브커머스
__Lesson01예제설명
__Lesson02반응형웹을위한레이아웃그리드
__Lesson03아이콘
__Lesson04내비게이션
__Lesson05카드UI
__Lesson06패드뷰와데스크톱뷰
__Lesson07가로스크롤프로토타입
__Lesson08슬라이드프로토타입
__[디자인노하우]반응형디자인의이해

Chapter9디자인시스템
__Lesson01예제설명
__Lesson02시스템원칙
__Lesson03컬러시스템
__Lesson04타이포그래피
__Lesson05버튼
__Lesson06텍스트인풋
__Lesson07토글과태그
__Lesson08라디오버튼과체크박스
__Lesson09카드와모달
__Lesson10페이지구성

Chapter10글로벌NFT마켓
__Lesson01예제설명
__Lesson02공통컴포넌트
__Lesson03콘텐츠영역
__Lesson04정보성컴포넌트

부록A개발전달과파일관리
__Lesson01개발전달
___디자인에셋내보내기
___모든이미지한번에내보내기
___[디자인노하우]디자인과개발화면이다를때
__Lesson02코드확인
___코드변환전체크요소
___기본인스펙터
___플러그인활용
__Lesson03브랜치로파일관리
___브랜치활용하기
___브랜치만들기
___브랜치리뷰요청하기
___메인파일에브랜치머지하기
___브랜치관리하기

부록B단축키와플러그인
__Lesson01단축키
___헬프버튼
___필수단축키와선택단축키
___커스텀단축키
___자주사용하는Quickaction
__Lesson02플러그인
___플러그인시작하기
___필수플러그인
___추천플러그인
___팀플러그인

출판사 서평

개정판에서피그마의주요업데이트내용을추가하고예제에이를반영했다.

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

디자인도구-피그마
기능은예제로익히고,실무감각은프로젝트로스킬업

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

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