피그마로 팀플하기 (팀원 모두가 활용하며 함께 성장하는 피그마 실무 가이드)

이혜진(리온)

디자이너로서쌓아온노하우를체계적으로정리하는것과피그마를활용한효율적인협업및워크플로에관심이많다.또한누구나피그마를손쉽게활용할수있도록인스타그램과유튜브를통해디자인과피그마관련이야기를꾸준히나누고있다.

들어가며


Part01피그마알아보기
Lesson01피그마특징살펴보기
클라우드
실시간협업
파일관리
벡터이미지
플러그인


Lesson02피그마다운로드하기
피그마웹
피그마데스크톱앱
피그마모바일앱


Lesson03피그마인터페이스알아보기
홈화면
디자인화면


Lesson04피그마파일구조알아보기
프로젝트
파일및페이지


Part02피그마시작하기
Lesson01툴바알아보기
이동도구
영역도구
도형도구
창작도구
텍스트
댓글
작업


Lesson02간단한예제로툴바익히기
프레젠테이션슬라이드만들기
복잡한도형만들기
이미지배치·활용하기


Lesson03레이아웃가이드만들기
레이아웃가이드설정
그리드스타일등록하기
가이드활용하기


Lesson04피그마드로우알아보기
피그마드로우펜
피그마드로우브러시


Part03스타일관리하기
Lesson01색상스타일관리하기
색상팔레트설정하기
색상팔레트활용하기


Lesson02텍스트스타일관리하기
텍스트스타일설정하기
텍스트스타일활용하기


Part04컴포넌트로동일한형태반복사용하기
Lesson01컴포넌트시작하기
인스턴스만들기
오버라이드적용하기
컴포넌트활용하기


Lesson02복잡한인터페이스,컴포넌트로관리하기
중첩컴포넌트활용하기
불리언으로컴포넌트더쉽게관리하기
알림창만들기


Part05오토레이아웃마스터하기
Lesson01오토레이아웃시작하기
흐름
크기조정
정렬
패딩


Lesson02오토레이아웃을활용한실무예제4가지
내비게이션바만들기
뉴스레터구독섹션만들기
댓글화면만들기
뉴스기사레이아웃만들기


Lesson03그리드를이용한레이아웃구성하기
카드형레이아웃으로콘텐츠정리하기
대시보드그리드로보기쉽게정리하기



Part06프로토타입으로움직이는디자인완성하기
Lesson01프로토타입시작하기
프로토타입살펴보기
프로토타입을활용한실무예제8가지


Lesson02사용자입장에서사용성테스트하기
프로토타입공유하기
슬라이드를이용해피드백수집하기



Part07피그마버즈로더쉽게디자인하기
Lesson01피그마버즈시작하기
피그마버즈로브랜드콘텐츠제작하기
피그마버즈에서콘텐츠공유하기


Lesson02피그마버즈로생산성끌어올리기
스프레드시트로대량콘텐츠제작하기
피그마AI시작하기
템플릿게시하기


Part08변수로디자인의가능성넓히기
Lesson01변수시작하기
라이트·다크모드디자인하기
버튼을이용해라이트·다크모드전환하기
Lesson02변수로다양한인터랙션구성하기
펼치고접히는메뉴만들기
조건부프로토타입으로토스트구현하기


Part09팀원모두와협업하기
Lesson01팀라이브러리로협업하기
팀라이브러리만들기
팀라이브러리에포함된스타일을문서화하기
팀라이브러리업데이트하기


Lesson02디자인파일안전하게관리하기
브랜치시작하기
버전내용확인하고,파일복원하기
데브모드알아보기


자주사용하는디자인실무플러그인정리
마치며
찾아보기

쉽게배우는실무중심피그마기본서

기획자,디자이너,마케터가한화면위에서함께일한다.피그마가디자이너만사용하는전문툴이라는생각은이제버리자.이책은인스타그램을통해피그마실무노하우를전해온저자의경험을바탕으로,현업에서자주활용되는기능들이실제프로젝트에서피그마가어떻게활용되는지를보여준다.기획-디자인-마케팅에필요한모든과정을팀전체가함께배우고프로젝트를완성하며팀이성장하는순간을경험해보자.


처음만나는한국어버전피그마기본서

이책은최신피그마한국어버전을기준으로구성한피그마입문서로,기존피그마영어인터페이스에어려움을느꼈던사용자도부담없이시작할수있다.모든예제를한국어버전을기반으로구성하여처음피그마를배우는누구나실제화면그대로차근차근따라하며학습할수있다.한글로배우는만큼피그마의핵심기능과실무예제를더욱쉽게이해하고,더빠르게실전에적용해보자.

대상독자
■피그마를실무에활용하고싶은입문자
■피그마로프로젝트흐름을정리하고팀협업효율을높이고싶은기획자
■오토레이아웃·컴포넌트·변수등피그마핵심기능을체계적으로익히고싶은디자이너
■피그마버즈와AI기능으로브랜드콘텐츠를직접제작하고싶은마케터