피그마 for 디자인 시스템

들어가며
이 책을 읽기 전에

Chapter 1 디자인 시스템

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

Chapter 2 피그마의 전문 기능

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

Chapter 3 디자인 시스템 시작하기

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

Chapter 4 디자인 토큰

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

Chapter 5 타이포그래피

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

Chapter 6디자인 시스템 확충

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

Chapter 7 패턴 라이브러리

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

Chapter 8구현 코드와의 연동

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