설계부터 개발까지 완벽한 협업을 위한 피그마 클래스

박수진

저자:박수진
15년차프리랜서디자이너이자강사로활동하며,유튜브채널‘루씨의UX/UI디자인’을운영중이다.UX/UI디자이너는물론서비스기획자,개발자까지모두가피그마로자유롭게협업할수있길바라며,수년간의현장경험과강의를바탕으로피그마온/오프라인교육에힘쓰고있다.

[Part1피그마기초클래스]
Chapter1피그마와친해지기
_1.1피그마의이해
_1.2피그마회원가입과앱설치하기
__기본예제1-1피그마계정생성
_1.3파일브라우저와커뮤니티살펴보기
_1.4디자인파일관리방법
__기본예제1-2새로운디자인파일만들기
__기본예제1-3디자인파일안에페이지생성하기
_1.5피그마UI와기본툴파악하기
_1.6피그마의기본프레임다루기
__기본예제1-4프레임만들고이름변경하기
_1.7레이아웃그리드설정하기
__기본예제1-5모바일레이아웃그리드만들기
__기본예제1-6데스크톱레이아웃그리드만들기

Chapter2피그마툴이해하기
_2.1디자인요소를만드는도형툴
__활용예제2-1도형툴사용하기
_2.2시각적인화면을구성하는이미지편집
__활용예제2-2소셜미디어앱의메인화면만들기
_2.3디자인작업환경을위한스타일만들기
__기본예제2-1레이아웃그리드스타일만들기
__기본예제2-2컬러스타일만들기
__기본예제2-3텍스트스타일만들기

[Part2피그마활용클래스]
Chapter3피그마기능익히기
_3.1반응형레이아웃을위한오토레이아웃과리사이징
__활용예제3-1텍스트길이에반응하는버튼만들기
__활용예제3-2카드UI제작하기
_3.2다양한디바이스에대응하는콘스트레인트
__활용예제3-3UI요소마다콘스트레인트설정하기
_3.3디자인시스템구축을위한컴포넌트
__활용예제3-4버튼컴포넌트만들기
__활용예제3-5컴포넌트를복사한인스턴스사용하기
__활용예제3-6인스턴스를오버라이드하기
_3.4복잡한디자인시스템도깔끔하게정리하는컴포넌트프로퍼티
__활용예제3-7버튼컴포넌트프로퍼티
_3.5컴포넌트를논리적으로그룹핑하는베리언트
__활용예제3-8베리언트를활용한텍스트필드만들기
_3.6디자인설계를도와주는베리어블
__기본예제3-1베리어블만들기
__활용예제3-9컬러베리어블을활용한라이트/다크테마구현하기

Chapter4프로토타이핑
_4.1프로토타이핑알아보기
_4.2플로와스타팅포인트다루기
_4.3인터랙션의기본과활용
__기본예제4-1인터랙션연결하기
__활용예제4-1인터랙션과애니메이션으로온보딩화면만들기
_4.4스크롤비헤비어다루기
__활용예제4-2소셜미디어앱스크롤설정하기
__활용예제4-3지도에양방향스크롤설정하기
_4.5인터랙션실습하기
__활용예제4-4카드슬라이딩스마트애니메이션만들기
_4.6인터랙티브컴포넌트사용하기
__활용예제4-5스위치만들기

[Part3피그마실전프로젝트]
Chapter5실무에서바로쓰는인터랙션디자인
_5.1고정탭만들기
_5.2상품갤러리스크롤인터랙션만들기
_5.3GNB메뉴구성하기
_5.4웹사이트헤더만들기
_5.5섬네일크기를조정하는인터랙션만들기

Chapter6클래스앱디자인
_6.1클래스앱의홈화면디자인하기
_6.2베스트클래스리스트디자인하기
_6.3클래스상세페이지디자인하기
_6.4드로어만들기
_6.5질문모달만들기
_6.6프로토타이핑설정하기

Chapter7반응형웹사이트디자인
_7.1반응형웹사이트이해하기
_7.2데스크톱크기의메인화면만들기
_7.3디바이스크기에반응하는오토레이아웃설정하기

Chapter8피그마로협업하기
_8.1협업을위한팀만들기
__기본예제8-1팀만들기
_8.2디자인을개발에넘기는핸드오프
_8.3공유된파일의코드확인하고복사하기
_8.4버전히스토리관리하기

UX/UI디자이너부터기획자,개발자까지
★★모두를위한피그마실무가이드★★
모든프로젝트업무중심에있는피그마사용법을누구나쉽고확실하게습득할수있도록구성했습니다.기본적인파일관리와툴사용법부터시작해현업에서꼭필요한오토레이아웃,컴포넌트,베리어블,인터랙션제작,프로토타이핑구현등다양한실습예제를다루며,디자인감각을올려주는프로젝트까지완성합니다.피그마에입문하려는학생은물론,현업에서작업속도를향상시키고싶은누구나이책을통해효율적인디자인개발의전과정을경험할수있습니다.

★세가지클래스로완성하는피그마마스터코스★
Part1.피그마기초클래스
-.피그마의이해
-.디자인파일관리방법
-.피그마UI와기본툴실습
-.화면을구성하는이미지편집
-.피그마UI와기본툴실습
-.작업환경을위한스타일구성

Part2.피그마활용클래스
-.반응형레이아웃의기본
-.시스템구축을위한컴포넌트
-.베리언트활용
-.프로토타이핑실습
-.인터랙션의이해와활용

Part3.피그마실전프로젝트
-.인터랙션화면디자인
-.실전앱화면제작
-.반응형웹사이트제작
-.피그마로협업하는방법
-.핸드오프와버전관리

★이책의대상독자★
-.피그마기초부터제대로배우고싶은디자인비전공자
-.기획자,개발자와의소통을중요하게생각하는디자이너
-.조직에서원활한프로젝트협업을끌어내고싶은관리자