디자인 시스템 실무 with 피그마

이영주

WesternSydneyUniversity에서DigitalMedia를전공했으며홍익대학교영상학과에서박사과정을수료했습니다.현재는청운대학교멀티미디어학과교수로재직중입니다.주요저서로한빛아카데미(주)에서출간한『UI/UX디자인이론과실무with어도비XD』(2022),『UI/UX디자인이론과실습withAdobeXD』(2020),『designschool포토샵&일러스트레이터CC2019』(2019),『designschool포토샵CC2019』(2019),『designschool일러스트레이터CC』(2018),『모바일UI/UX디자인실무』(2018),『UI/UX디자인이론과실습』(2015)등다수가있습니다.

PART01디자인시스템입문
CHAPTER01디자인시스템
디자인시스템의이해
디자인시스템의구성
디자인시스템구축방법론
디자인시스템구축사례
요약

CHAPTER02서비스디자인설계
서비스디자인
서비스디자인기획
사용자시나리오
정보구조설계
와이어프레임
요약

PART02피그마기초
CHAPTER03스타일과레이아웃
피그마소개
스타일과토큰
컨스트레인트
오토레이아웃
요약

CHAPTER04컴포넌트의활용
그룹,프레임,컴포넌트
컴포넌트와인스턴스
요약

CHAPTER05베리언트의활용
베리언트
베리언트와반응형메뉴
요약

CHAPTER06프로토타입의활용
프레임인터랙션
베리언트스위치인터랙션
버튼인터랙션
캐러셀인터랙션
오버플로우스크롤링인터랙션
모달창인터랙션
내비게이션드로워인터랙션
요약

PART03디자인시스템제작
CHAPTER07파운데이션구성
디자인시스템구조설계
개요와파운데이션기초
디자인토큰의활용
컬러시스템
타이포그래피
아이콘과형태
요약

CHAPTER08컴포넌트의구성I
컴포넌트와디자인시스템
상단앱바
버튼
하단내비게이션
요약

CHAPTER09컴포넌트의구성II
텍스트필드
검색창
캐러셀
배너
탭
요약

CHAPTER10컴포넌트의구성III
칩
카드
그리드리스트
키스크린의완성
요약

CHAPTER11공유와협업
핸드오프
공유플랫폼의사용
토큰과핸드오프
요약

찾아보기

피그마로따라하며구현하는디자인시스템실무지침서!

디자인시스템구축과피그마사용이처음이어도책이안내하는다음단계로학습하면누구나쉽게UI/UX디자인실무지식을얻을수있습니다.

①PART01디자인시스템입문
디자인시스템의개념과구축방법론을설명합니다.국내외기업의디자인시스템사례를알아보며디자인시스템의구조를이해할수있습니다.

②PART02피그마기초
스타일,오토레이아웃,컴포넌트,베리언트,프로토타입등피그마의핵심기능을실습으로배워봅니다.여기에더해여러플랫폼과디바이스에걸쳐디자인을확장할수있는‘디자인토큰시스템’기능을활용하여토큰스타일을제작하는법을배웁니다.

③PART03디자인시스템제작
1부에서배운디자인시스템이론과2부에서학습한피그마기능을활용해디자인시스템의파운데이션을구축합니다.이어지는‘테이블링앱서비스’의키스크린구성프로젝트로컴포넌트를제작하며단계적으로학습을마무리할수있습니다.