이 책은 피그마를 처음 접하는 사용자부터 실무에서 활용하려는 전문가까지 모두를 위한 실용적인 가이드를 제공합니다. 따라하기 형태로 구성되어 기본적인 인터페이스 설명부터 실전 예제까지, 단계별 학습을 통해 디자인 역량을 키울 수 있도록 구성되었습니다. 본 교재를 토대로 다양한 디자인 기획 및 응용을 하여 이 분야의 전문가가 되시길 기원합니다.

특징

∙ 피그마는 웹 기반의 강력한 UI/UX 디자인 툴로, 팀원 간의 협업과 실시간 작업이 가능하여 편리 한 디자인 환경을 제공합니다.

∙ 별도로 설치하지 않아도 웹 브라우저에서 바로 사용할 수 있습니다.

∙ 디자이너뿐만 아니라 기획자, 개발자 등 다양한 직군이 함께 프로젝트를 진행할 수 있도록 최적화되어 있습니다.

이제부터 피그마를 활용하여 효율적인 디자인 작업을 시작해 보세요!

서울과학기술대학교 디자인학박사를 졸업하였으며, 현재 동양미래대학교 웹응용소프트웨어공학과 겸임교수로 재직 중에 있다.

웹디자인, UI / UX 디자인, 웹퍼블리싱 등 다수의 강의 경력을 가지고 있으며, 주요 저서로는 개더타운과 이프렌드에서 메타버스 세상탐험(아이콕스), 왕초보 유튜버 되기(스토리비전), ACA 일러스트레이터CC(성안당) 등 다수가 있다. 컬러리스트 기사, 멀티미디어콘텐츠제작 전문가, 웹디자인 기능사 등 다수의 자격증을 보유하고 있다.

PART 01 피그마(Figma) 시작하기

section 01 피그마의 개요

section 02 UI 디자인과 디바이스의 이해

1. UI 디자인의 이해

2. 디바이스의 이해

section 03 그래픽 표현 방식의 이해

1. 그래픽 디자인 프로그램

2. 그래픽 컬러의 이해

section 04 피그마 시작하기

section 05 피그마 인터페이스 살펴보기

PART 02 피그마 기본 도구 활용하기

section 01 도형 도구를 활용하여 제작하기

1. 작업 영역 만들기

2. 사선 만들기

3. 로고 만들기

4. 라인 만들기

5. 텍스트 입력하기

section 02 스타일과 디자인 시스템 라이브러리 관리하기

1. 작업 영역 만들기

2. 색상을 스타일에 등록하기

3. 텍스트 서식을 스타일에 등록하기

4. Effect를 스타일에 등록하기하기

5. Grid를 스타일에 등록하기

PART 03 피그마로 실무 디자인 시작하기

section 01 음악 스트리밍 앱 화면 제작하기

1. 헤더 만들기

2. 메인 컨텐츠 영역 만들기

3. 플레이 버튼과 더 보기 아이콘 제작하기

section 02 랜딩 페이지 디자인 제작하기

1. 메인 이미지 영역 만들기

2. 여행 소개 페이지 만들기

3. 배너 만들기

PART 04 피그마 핵심 기능 활용하기

section 01 디자인 시스템 생성 및 관리

1. 디자인 시스템 파일 불러오기

2. 타이포그래피 시스템 만들기

3. 그리드 시스템 만들기

section 02 아카데미 웹디자인 프로젝트 제작

1. 데스크탑 반응형 코딩학원 웹디자인 제작하기–기본 레이아웃 설정하기

2. 헤더 만들기

3. 메인 비주얼 영역 만들기

4. 메인 콘텐츠 영역 만들기 01 : 제목 영역 만들기

5. 콘텐츠 영역 만들기 02 : 제목 영역 만들기

6. 콘텐츠 영역 만들기 03

7. 배너 영역 만들기

8. footer 만들기

9. 디자인 결과물 Export 하기

PART 05 베이커리 앱 UI 디자인 제작하기

section 01 베이커리 앱 버튼 만들기

1. 베리언츠 이해와 제작하기

section 02 베리언츠 앱 버튼 적용하기

1. 디자인에 필요한 아이콘 가져오기

2. 기본 Frame 화면 만들기

3. 상태 바 삽입하기

4. 헤더 만들기

5. 메인 비주얼 영역 만들기

6. 상세 설명 영역 만들기

PART 06 프로토타이핑과 인터랙션

section 01 캐러셀 인터랙션 제작하기

1. 앱 메인 화면 콘텐츠 수정하기

2. 페이지네이션 제작하기

3. 메인 비주얼 영역을 Carousel로 제작하기

4. Carousel에 인터랙션 적용하기

section 02 이동 메뉴 설계 및 구현하기

1. 제목 설정하기

2. Overflow scrolling Interaction 제작하기

section 03 프레임 연결 및 화면 전환하기

1. Frame 간의 Interaction 설정하기

2. 상세 화면에서 팝업 형태로 나타나는 Frame 간의 Interaction 설정하기

section 04 화면 내의 연동과 인터랙션

section 05 동적인 내비게이션 메뉴 구성

section 06 탭바 제작 및 스타일링

1. 탭바 제작하기

2. 탭바 메뉴와 앱 화면을 이동하는 Interaction 적용하기

3. 헤더와 탭바 고정시키기

PART 07 피그마로 협업 및 개발 모드 살펴보기

section 01 라이브러리 등록하기

section 02 개발 모드 살펴보기

1. Div Mode (유료)

2. 플러그인

section 03 공유하여 함께 살펴보기

section 04 피그마 버전 history 살펴보기