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

클레어정

2016년부터프로덕트디자인을시작해스타트업,SI,대기업에서다양한프로젝트를진행했다.현재까지모빌리티,AI챗봇,커머스,온디맨드,B2B,게이미피케이션,NFT,VR등여러분야의프로젝트를맡아왔다.디자인시스템을구축하고이를팀에정착시키는일그리고이를기반으로한신규서비스를제작하는데강점이있다.
디자인과비즈니스에관해읽고,쓰고,강의하며현재는글로벌블록체인서비스의프로덕트디자이너로일하고있다.

Part1피그마활용하기

Chapter1피그마시작하기
__Lesson01피그마를써야하는이유
___피그마소개
___피그마를활용한디자이너의하루
___피그마를활용한기획자의하루
___피그마를활용한개발자의하루
___디자인노하우
___[디자인노하우]팀원들에게피그마도입을설득하고싶어요!
__Lesson02피그마설치와기본인터페이스둘러보기
___피그마설치
___메인대시보드
___피그마파일
___[Help]피그마AI
___[디자인노하우]디자인하기전알아야하는UI기술지식
___스케치프로젝트를피그마로옮기기
__Lesson03작업전환경설정
___폰트
___안드로이드와iOSUI템플릿
___기본레이어스타일설정
___Preference설정

Chapter2그래픽스타일과라이브러리
__Lesson01그래픽스타일과벡터
___그래픽스타일
__Lesson02스타일과라이브러리
___스타일만들고편집하기
___그룹스타일과정렬
___라이브러리로발행
___팀라이브러리
___[실습]스타일을저장하고라이브러리로발행하기
___[Help]피그마드로우

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

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

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

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브랜치로파일관리
___브랜치활용하기
___예제
__Lesson04단축키
___헬프버튼
___필수단축키와선택단축키

〈3판주요사항〉
● 피그마AI:디자인초안과이미지검색등을지원합니다.플러그인이나외부프로그램을사용하던배경삭제,더미콘텐츠생성을피그마를벗어나지않고만들수있습니다.
● 멀티에디트:여러레이어를동시에선택하여반복작업을하지않고수정할수있습니다.
● 데브모드:기존베타버전에서유료화된만큼더욱강력하고편리한기능으로업데이트되었습니다.
● 베리어블:색상,스타일에변숫값을지정하여디자인토큰을만들고관리할수있습니다.
● UI3:더현대적이고넓게사용할수있는UI로전체업데이트되었습니다.

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


실무에서바로쓰는피그마실전가이드
디자인시스템부터AI기능까지,최신피그마를가장잘담은책

글로벌UI디자인도구의기준이바뀌고있습니다.이제는브라우저에서여러사람이동시에디자인시스템까지함께구축하는시대입니다.이책은그흐름의중심에서피그마를제대로배우고싶은디자이너,개발자,마케터등모두를위한책입니다.
3판에서는새롭게업데이트된피그마UI3환경과함께생성형AI기능,멀티에디트,데브모드,베리어블,피그마드로우등최신기능까지모두담았습니다.1부에서는피그마의기본인터페이스,그래픽스타일,컴포넌트,오토레이아웃,디자인시스템구축까지핵심기능을익힙니다.2부에서는뉴스앱,스포츠클래스앱,NFT마켓등실제프로젝트를기반으로실습하며실무역량을탄탄하게다집니다.디자인시스템운영,협업효율을높이는팁,실무노하우까지아낌없이담았습니다.작은실습하나부터완성프로젝트까지이책과함께피그마의무한한세계에빠져보세요.

● 벡터/스마트설렉션/멀티에디트
● 콘스트레인트/레이아웃그리드
● 컴포넌트/라이브러리/오토레이아웃
● 베리언츠/베리어블/프로토타입
● 개발전달/데브모드/버전히스토리
● iOS뉴스앱
● 안드로이드스포츠클래스앱
● 반응형패션라이브커머스
● 디자인시스템과B2B솔루션


[추천사]

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

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