본문 바로가기

리디 접속이 원활하지 않습니다.
강제 새로 고침(Ctrl + F5)이나 브라우저 캐시 삭제를 진행해주세요.
계속해서 문제가 발생한다면 리디 접속 테스트를 통해 원인을 파악하고 대응 방법을 안내드리겠습니다.
테스트 페이지로 이동하기

Figma 가이드북 상세페이지

컴퓨터/IT 컴퓨터/앱 활용 ,   컴퓨터/IT 개발/프로그래밍

Figma 가이드북

UI/UX 디자이너를 위한 프로토타이핑 완전 정복
소장종이책 정가26,000
전자책 정가20%20,800
판매가20,800
Figma 가이드북 표지 이미지

Figma 가이드북작품 소개

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

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


출판사 서평

이 책이 필요한 독자
- 모바일, 웹 디자이너로 활동하고자 하는 UI, UX 디자이너
- 디자인 실력과 더불어 프로토타이핑까지 완성해보고 싶은 디자이너
- 모바일, 웹 서비스를 기획하는 기획자


디자인 툴의 새로운 등장은 디자이너에게 새로운 길이 되기도 하고 또 하나의 일거리를 만들기도 합니다. 이미 익숙한 툴에서 새로운 툴로 전환하는 것은 쉬운 일은 아닙니다. 마치 이사를 바로 옆 동네가 아닌 다른 지역으로 하는 것처럼 생각보다 많은 부분을 고려해야 합니다. 그러나 일의 효율을 높일 수 있다면 불편한 과정을 거치더라도 우리는 이 과정 자체를 더욱 신경 써서 해야 할 것입니다.

이 책만으로 Figma가 앞으로 더 어떻게 발전할 것인지 모두 담아내는 것은 어려운 일입니다. 하지만 Figma는 이런 기능을 가지고 있다고 하기보다는 Figma와 디자인이 어떠한 연결 고리를 가지고 있고, 필자의 모바일 디자인이 이러한 기능으로 효율성을 높일 수 있겠구나 하는 부분에 더 집중된 책이라고 생각합니다. Figma를 시작하기 위한 첫 발자국을 이 책과 함께 내딛으시길 바랍니다.


저자 소개

메디어즈 대표와 옐로모바일 헬스케어사업부 총괄본부장을 거쳐 현재 바이앤어스 대표를 맡고 있으며, 리메인, 인프런, 웨런 등 온라인 강의 사이트에서 스케치 디자인 강의를 꾸준히 진행하고 있다.
베리뷰티, 찾았닥, 벤자민무어 페인트, JARVIS, 그레이스 성형외과 등 다수의 기업에서 홈페이지 및 앱 서비스의 UI를 디자인했다.

목차

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 프레임 또는 페이지 이름을 작업 상태 표시하기


리뷰

구매자 별점

3.0

점수비율
  • 5
  • 4
  • 3
  • 2
  • 1

3명이 평가함

리뷰 작성 영역

이 책을 평가해주세요!

내가 남긴 별점 0.0

별로예요

그저 그래요

보통이에요

좋아요

최고예요

별점 취소

구매자 표시 기준은 무엇인가요?

'구매자' 표시는 리디에서 유료도서 결제 후 다운로드 하시거나 리디셀렉트 도서를 다운로드하신 경우에만 표시됩니다.

무료 도서 (프로모션 등으로 무료로 전환된 도서 포함)
'구매자'로 표시되지 않습니다.
시리즈 도서 내 무료 도서
'구매자’로 표시되지 않습니다. 하지만 같은 시리즈의 유료 도서를 결제한 뒤 리뷰를 수정하거나 재등록하면 '구매자'로 표시됩니다.
영구 삭제
도서를 영구 삭제해도 ‘구매자’ 표시는 남아있습니다.
결제 취소
‘구매자’ 표시가 자동으로 사라집니다.

이 책과 함께 구매한 책


이 책과 함께 둘러본 책



본문 끝 최상단으로 돌아가기

spinner
모바일 버전