홈앤서비스 SK BROADBAND

새롭게 등장한 디자인 툴 Figma를
이 책 한 권으로 정리한다!
Figma는 지금까지의 프로토타이핑 툴과 달리 실시간 협업을 제공하고 브라우저 기반의 벡터 디자인 작업이 가능하다. 온·오프라인에 무관하게 작업이 가능하고 무제한 클라우드를 제공해서 UI, UX 디자이너의 작업 환경을 간결하게 만들어준다.

컴포넌트 기반으로 구동하는 개발 환경에 맞추어 디자인 시스템을 구축하는 기업과 개인 프로젝트가 증가하는 추세에 따라 Figma도 디자인 컴포넌트를 쉽게 관리할 수 있도록 다양한 기능들을 제공하고 있다. 여러분도 이 책을 통해 누구보다 빠르게 최신 프로토타이핑 툴을 접하는 경험을 해보시기 바란다.
책의 일부 내용을 미리 읽어보실 수 있습니다. 미리보기

Chapter 01 새로운 디자인 툴 Figma의 등장
1.1 Figma 사용 준비하기
1.2 Figma 단축키 미리보기
1.3 Figma와 오프라인에서 작업하기
1.4 Figma 설치
1.5 Figma 둘러보기
1.6 Figma에서 새로운 디자인 파일을 생성하는 방법

Chapter 02 Figma 메뉴
2.1 이동 도구/스케일 도구
2.2 Figma 단축키 미리보기
2.3 모양 도구
2.4 펜 도구
2.5 텍스트 도구
2.6 핸드 툴
2.7 코멘트
2.8 객체 편집
2.9 컴포넌트 생성
2.10 마스크
2.11 Boolean
2.12 멀티 플레이어 및 관찰 모드
2.13 공유
2.14 프레젠테이션
2.15 보기 모드와 줌(Zoom)
2.16 레이아웃 그리드
2.17 멀티 플레이어 커서
2.18 캔버스 둘러보기
2.19 이미지를 Figma로 가져오는 방법

Chapter 03 Figma 이해하기
3.1 프레임
3.2 Figma 기본, 도형에 대한 이해

Chapter 04 Figma를 활용한 UI 디자인
4.1 UI 디자인 참고 사이트
4.2 컴포넌트를 사용하는 이유
4.3 기본 컴포넌트 만들기
4.4 컴포넌트를 그룹으로 만들기
4.5 연관된 컴포넌트를 활용하는 방법
4.6 연관 컴포넌트를 만드는 또 다른 방법
4.7 내비게이션 컴포넌트 디자인
4.8 외부 UI KIT를 UI에 적용하기
4.9 탭바 만들기
4.10 반응형 UI 구성

Chapter 05 컴포넌트 기반 디자인 시스템 구축
5.1 디자인(UI, UX) 가이드라인
5.2 디자인 시스템
5.3 디자인 시스템을 구축하면서 배우는 Figma

Chapter 06 프로토타이핑
6.1 프로토타이핑
6.2 프로토타이핑의 필요성
6.3 프로토타이핑과 사용자 테스트
6.4 프로토타이핑 구현하기

Chapter 07 Figma 전환 효과
7.1 Navigate to
7.2 프로토타이핑의 꽃 ‘Smart Animate’
7.3 Smart Animate 기능을 활용해서 도형을 이동시키기
7.4 스크롤 기능
7.5 키보드 프로토타이핑 효과
7.6 오버레이를 활용한 키보드 프로토타이핑 효과

Chapter 08 완성된 내용을 확인하는 또 다른 방법 Mirror 앱

Chapter 09 공유 및 공동 작업
9.1 개발자와의 공유
9.2 초대된 사용자가 할 수 있는 것

Chapter 10 실전 UI 작업 핀테크 앱 디자인
Chapter 11 팀 라이브러리 만들기
Chapter 12 파일 브라우징과 버전 관리
Chapter 13 직접 Figma 파일 관리 방법
Chapter 14 스케치 파일을 Figma에서 열기

Chapter 15 TIPS & TRICKS
15.1 컴포넌트 디스크립션을 활용한 검색
15.2 단일 속성 복사
15.3 사이드 바 인스턴스 교체
15.4 동일 속성 탐색 기능
15.5 프레임 크기 조정
15.6 프레임 또는 페이지 이름을 작업 상태 표시하기
펼쳐보기접어보기