피그마 for 디자인 시스템 : 디자인 시스템 실무 가이드

사와다슌스케

저자:사와다슌스케
UI/UX디자이너,그래픽디자이너,프로덕트매니저,소프트웨어엔지니어등다양한분야에서15년이상업무에종사해오고있다.
국내외를불문하고프리랜서로활동하며스타트업기업과신규사업을중심으로한웹개발과모바일어플개발경험이풍부하다.현장에서익힌스킬을기반으로온라인강좌를개설해4만명이상의수강생들로부터높을평가를받고있다.

역자:김모세
대학졸업후소프트웨어엔지니어,소프트웨어품질엔지니어,애자일코치등다양한부문에서소프트웨어개발에참여했다.재미있는일,나와조직이성장하도록돕는일에보람을느껴2019년부터번역을시작했다.
옮긴책으로는<블렌더로애니그림체캐릭터를만들어보자!>(모델링편/카툰렌더링편),<고도엔진간단입문>,<파이토치와구글코랩으로배우는BERT입문>,<제로부터시작하는러스트백엔드프로그래밍>(제이펍),<챗GPT프롬프트120%질문기술>(정보문화사),<애자일개발의기술2판>(에이콘),<타입스크립트,리액트,Next.js로배우는실전웹애플리케이션개발>(위키북스)등이있다.

들어가며
이책을읽기전에

Chapter1디자인시스템
1-01.디자인시스템이란014
-디자인시스템의목적
-디자인시스템구성요소
-디자인시스템의장점
-디자인시스템을언제시작하는가?
-디자인시스템을시작하려면
1-02.피그마와디자인시스템
-피그마의특징
-피그마를사용하는이유
-이책의대상범위

Chapter2피그마의전문기능
2-01.학습준비
-작례파일
-CSS이해
-피그마로CSS를재현
-부모요소의크기조정
-자식요소의크기조정
2-02.자동레이아웃
-자동레이아웃적용
-가로방향레이아웃
-세로방향레이아웃
-텍스트분할
-텍스트생략
최소/최대폭
-가로세로비율유지
-절대위치
2-03.컴포넌트
-기본조작
-덮어쓰기초기화
-인스턴스중첩
-인스턴스치환
-컴포넌트속성
-속성이름규칙
-의도를전달하는속성
-중첩된인스턴스의속성
-인스턴스의대체속성
-표시/숨기기전환속성
-인스턴스속성간략화
-변형
-인터랙티브컴포넌트
-컴포넌트설명
2-04.변수
-스타일과의비교
-변수작성
-변수적용
-컬렉션
-앨리어스
-모드
-Number
-변수편집
2-05.개발모드
측정과주석
플레이그라운드
개발리소스
코드
색상
에셋과익스포트
변경내용비교
플러그인
VisualStudioCode(VSCode)

Chapter3디자인시스템시작하기
3-01.파일구성
-작례파일
-화면디자인
-작례파일의문제점
3-02.라이브러리
-불필요한컴포넌트삭제
-라이브러리공개
-라이브러리읽기
-라이브러리업데이트
3-03.컬러팔레트
-기본색상
-회색
-안전색상
-기타색상
3-04.접근성
-명암비
-명암그리드

Chapter4디자인토큰
4-01.디자인토큰의정의
-디자인토큰의목적
-디자인토큰의계층
-테마색상
4-02.시맨틱색상
-텍스트색상
-배경색상
-보더색상
-문서작성
4-03.디자인토큰적용
-컴포넌트에적용
-비공개변수
-라이브러리업데이트
-헤더에적용
-카테고리필터에적용
-푸터에적용
-컴포넌트배치
4-04.모드전환
-다크모드
-비트맵이미지대응
-테마

Chapter5타이포그래피
5-01.서체와스케일
-서체
-스케일
5-02.줄간격과문자간격
-줄간격조정
-문자간격조정
5-03.타이포그래피디자인토큰
-기본토큰
-시맨틱토큰
-컴포지트토큰
-문서만들기
-텍스트스타일만들기
-텍스트스타일적용

Chapter6디자인시스템확충
6-01.아이코노그래피
아이콘의역할
아이콘만들기
선과칠하기
아이콘라이브러리
컴포넌트화
색상유지
기타아이콘
아이콘이름
6-02.엘리베이션
-엘리베이션계층
-스타일샘플만들기
-스타일만들기
-다크모드
6-03.기타스타일
-모서리반지름
-간격
-선굵기
-레이어불투명도
6-04.규칙적용
-아이콘
-모서리반지름
-엘리베이션
-간격

Chapter7패턴라이브러리
7-01.레이아웃규칙
-브레이크포인트
-칼럼
-레이아웃그리드
-변형만들기
-버티컬그리드
-그리드스타일
-그리드커스터마이즈
7-02.화면크기별레이아웃
-그리드를배치하기
-콘텐츠영역조정
-콘텐츠조정
-변수와의연동
-브레이크포인트시각화
-템플릿
7-03.컴포넌트
-헤더
-버튼
-기타버튼
-푸터
7-04.문서
-버튼문서
-헤더문서
-그밖의문서

Chapter8구현코드와의연동
8-01.디자인토큰연동
-변수추출하기
-StyleDictionary
-다크모드
-그밖의연동방법
8-02.Storybook
-UI카탈로그
-문서자동생성
-독립된개발환경
-UI테스트
-Storybook호스팅
-끝나지않는디자인시스템을향해

한발앞선UI디자이너가되려면?
인기디자인툴피그마의사용법을실무작례를통해안내하며디자인시스템에서의피그마의활용법과연동을단계별로설명하는가이드북.

피그마는클라우드기반플랫폼으로누구나간단히조작할수있지만보다유연하고복잡한디자인시스템을구축하려면고급기능들을활용해야합니다.
이책은'디자인시스템에는흥미가있지만무엇부터시작해야할지모르는분'들을위해구체적인작례를사용해단계적으로사용법을설명합니다.디자이너,소프트웨어엔지니어,제품관리자로서의경력을활용해제품품질을향상시키는디자인시스템구축방법및디자인시스템구축과연동하는피그마의기능을모았습니다.피그마의기본적인조작방법을숙지한분들에게가장적합합니다.
'아직디자인시스템까지는필요없다'고생각하는분들은이책을통해그개념을이해하고,이책에서설명하는기능을잘활용함으로써기존디자인프로세스를개선할수있을것입니다.
디자인시스템은서비스를만드는사람과최종적으로서비스를사용하는사람을위한것입니다.개발사이클의속도를높이고,일관성과유지보수성을유지하기위한프로세스를구축에만빠져들어비즈니스성장이멈춰버린다면이는주객이전도된것입니다.
이책은이를전제로피그마의'사용방법'에집중합니다.이책을통해여러분이고도화된피그마를깊이이해함으로써제품개발에조금이나마도움이되기를기대합니다.