인스타그램 팔로워 15K, 피그마 튜터의 피그마 핵심 공략집

초보 디자이너뿐만 아니라 UX/UI 입문자, 취업준비생까지
누구나 쉽고 빠르게 피그마를 마스터할 수 있습니다.

이 책은 팔로워 1.5만명! 피그마 교육 관련 인스타그램 채널을 운영 중인 피그마 튜터의 피그마 공략집니다. 피그마가 처음인 대학생, 디자인 작업을 빠르게 끝내고 싶은 직장인, 주니어 디자이너를 위해 피그마의 기본 인터페이스부터 프로덕트 디자인까지 현직 UX/UI 디자이너인 저자의 실무 노하우를 아낌없이 눌러 담았습니다. 디자인을 전공하지 않았어도 단계별 실무 예제를 통해 다양한 기능을 배워 피그마를 마스터하는 가장 빠른 길을 안내해 드리겠습니다.

스타트업 G사 UX/UI 디자이너

2021년 10월부터 온라인 플랫폼 ‘탈잉’에서 피그마 온라인 튜터로 활동을 시작했으며 이듬해 실무 중심 교육 플랫폼 코멘토와 콜로소에서 피그마 온라인 강의를 출시한 바 있다. 현재 팔로워 14k의 피그마 교육 관련 인스타그램 채널을 운영 중이며 팔로워들을 대상으로 실시간 온라인 클래스를 진행하고 있다.

Part 1 피그마 이해하기

01 피그마 알아보기
피그마, 디자이너가 아닌 이들을 잇다
대세 협업 툴 피그마
피그마, 빠르게 마스터하는 방법

02 피그마 시작하기
브라우저
데스크톱 앱
모바일 앱

03 피그마 살펴보기
피그마 인터페이스
기본 툴바
레이어 패널
속성 패널
기타 기능

[피그마 핵심 정리!]

Part 2 피그마 주요 기능 익히기

01 컴포넌트
컴포넌트 정의
마스터 컴포넌트와 인스턴스
컴포넌트 등록 방법
에셋 관리 및 사용법

02 컴포넌트 프로퍼티
컴포넌트 프로퍼티 정의

03 베리언츠
베리언츠 정의
베리언츠 옵션 패널
베리언츠 생성 방법
[실습] 토글
[실습] 버튼

04 오토 레이아웃
오토 레이아웃 정의
오토 레이아웃 옵션
오토 레이아웃 캔버스 컨트롤
앱솔루트 포지션
오토 레이아웃 리사이징
[실습] 오토 레이아웃을 활용한 프로필 UI 만들기
[실습] 오토 레이아웃으로 컴포넌트 만들기

피그마 핵심 정리!

Part 3 피그마로 디자인하기

01 앱 디자인
프레임 생성하기
앱 상단 내비게이션바 만들기
앱 하단 탭바와 검색창 만들기
검색창 하단바 만들기
우측 하단 플로팅 버튼 만들기
게시글 모듈 만들기
커뮤니티 글쓰기 화면 만들기

02 반응형 웹 디자인
디바이스별 그리드 생성하기
콘텐츠 위치 설정하기
콘텐츠 제작하기
가로형 모듈 만들기
세로 카드형 모듈 만들기
태블릿과 모바일 시안 만들기

03 뉴스레터 디자인
템플릿 만들기
타이틀 생성하기
메인 배너 만들기
콘텐츠 영역 구성하기
하단 배너 만들기
푸터 만들기
구성요소 정리하기

부록 피그마 스킬업
01 플러그인
플러그인 정의
플러그인 사용 방법
알아두면 유용한 플러그인 리스트

02 피그마 커뮤니티
피그마 커뮤니티 정의
피그마 커뮤니티 활용 방법
디자인 작업물을 커뮤니티에 발행하기

03 단축키
Essential : 필수 단축키
Tools : 빠른 실행 단축키
View : 인터페이스 및 그리드 단축키
Zoom : 확대 및 슬라이드 단축키
Text : 텍스트 단축키
Shape : 모양툴 단축키
Selection : 요소 선택 단축키
Cursor : 마우스 활용 단축키
Edit : 편집 단축키
Transform : 변형 단축키
Arrange : 정렬 단축키
Components : 컴포넌트 단축키

04 피그잼
피그잼 실행하기
상단 메뉴
하단 메뉴