피그마로 시작하는 UI 디자인 - 초보 디자이너를 위한 피그마 완벽 가이드

피그마 튜터 (지은이)시대인2023-05-10

무궁무진한 잠재력과 활용도를 가진 디자인 도구 피그마에 대한 안내서다. 피그마가 처음이라 어디서부터 어떻게 시작해야 할지 몰라 막막한 분들께 피그마의 기본 개념부터 모바일 앱, 반응형 웹, 뉴스레터 디자인까지의 전 과정을 단계별로 담아 상세히 알려준다. 또한, 각 파트 마지막 장에 해당 본문의 핵심 개념만 정리한 ‘피그마 핵심 정리’를 수록하여 여러분의 소중한 시간을 조금이라도 절약할 수 있게 내용을 구성했다.

목차

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 피그잼

피그잼 실행하기

상단 메뉴

하단 메뉴