피그마로 시작하는 UI 디자인

초보 디자이너를 위한 피그마 완벽 가이드

하이서 지음

시대인 2023년 05월 10일 출간 종이책 : 2023년 05월 10일 출간

작품소개

책소개

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

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


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

목차

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 피그잼
피그잼 실행하기
상단 메뉴
하단 메뉴

출판사 서평

대세 협업 툴 피그마,
피그마가 처음인 당신을 위한 친절한 사용 설명서

웹 페이지 및 모바일 앱 디자인뿐만 아니라 기획서, 마케팅, 콘텐츠 제작, 브레인스토밍까지 창작자 협업 툴로 인정받은 피그마는 이제 디자인의 영역을 넘어 다양한 직군에서 활발히 사용되고 있습니다.
이 책은 무궁무진한 잠재력과 활용도를 가진 디자인 도구 피그마에 대한 안내서입니다. 피그마가 처음이라 어디서부터 어떻게 시작해야 할지 몰라 막막한 분들께 피그마의 기본 개념부터 모바일 앱, 반응형 웹, 뉴스레터 디자인까지의 전 과정을 단계별로 담아 상세히 알려드립니다.
또한, 각 파트 마지막 장에 해당 본문의 핵심 개념만 정리한 ‘피그마 핵심 정리’를 수록하여 여러분의 소중한 시간을 조금이라도 절약할 수 있게 내용을 구성했습니다.


8년 차 UX/UI 디자이너가 알려주는
생생한 피그마 실무 노하우

피그마에 어떤 기능이 있는지 소개하는 곳은 많지만 피그마를 어떻게 잘 활용해야 하는지에 대해 알려주는 곳은 찾기 어렵습니다. 이 책은 8년 차 UX/UI 디자이너인 저자가 실무에서 직접 피그마를 사용하며 알게 된 노하우와 꿀팁을 본문에 아낌없이 담았으며 고퀄리티의 다채로운 아웃풋 예제를 따라해 보며 피그마의 기초 툴 원리와 프로토타입 제작 과정을 자연스럽게 배울 수 있습니다.
또한, 책이 나오기 직전까지 피그마의 업데이트 내용을 꼼꼼히 살펴 어디에서도 다룬 적 없는 피그잼의 최신 업데이트 내용도 확인해 볼 수 있습니다.


학습 지원
- 저자 인스타그램 채널: https://www.instagram.com/figma_tutor/
- 피그마 소스 파일: https://www.edusd.co.kr/book/ 접속 - 프로그램

작가정보

저자(글) 하이서

피그마 튜터(하이서)

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