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

한 발 앞선 UI 디자이너가 되려면?

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

[목 차]

들어가며

이 책을 읽기 전에

 

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 호스팅

-끝나지 않는 디자인 시스템을 향해