전체도서

❖ 책 소개

한 발 앞선 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. 줄 간격과 문자 간격

저자