실전 피그마 : UI/UX 디자이너, 서비스 기획자를 위한 실무 입문서

김범용(스무,SMU)

김범용(스무,SMU)
올마이티캠퍼스프로덕트디자이너
(AlmightyCampusProductDesigner)

커뮤니티
UnderFigma

주요경력
Naver-피그마사내강연
2023년1,3분기CLASS101베스트멘토(1NER)선정

강의
CLASS101-FigmaAtoZ
BlueTiger-FigmaTechniqueAll-in-oneClass

프로젝트
국가정보원60주년웹페이지리뉴얼
한동대학교해커톤멘토링

PART1.원포인트레슨!피그마미리보기

01.[장점]협업을위한최고의올인원디자인플랫폼
1.뛰어난호환성과접근성
2.실시간협업기능
3.벡터기반디자인
4.강력한편의기능
5.디자인시스템
6.다양한플러그인생태계
7.자동히스토리저장
02.[커뮤니티]생산성을높이는피그마커뮤니티
03.[그래픽표현방식]비트맵과벡터방식의이해
1.비트맵(Bitmap)방식
2.벡터(Vector)방식
3.피그마의그래픽표현방식
04.[디지털해상도와배수]디지털해상도와배수개념의이해
1.해상도(Resolution)
2.픽셀밀도(PixelDensity)
3.배수(ScaleFactor)
4.물리적해상도와논리적해상도
05.[로컬폰트]로컬폰트사용하기

PART2.피그마시작하기

01.[홈화면]피그마홈화면살펴보기
02.[작업화면]피그마작업화면살펴보기
03.[툴바]툴바알아보기
1.피그마메뉴
2.Tools메뉴
3.Contextualmenu
4.Presentationoptions
04.[왼쪽사이드바]왼쪽사이드바알아보기
1.단축키로탭전환하기
2.〔Layers〕탭
3.〔Assets〕탭
05.[오른쪽사이드바]오른쪽사이드바알아보기
1.단축키로탭전환하기
2.〔Design〕탭
3.〔Prototype〕탭
06.[기본설정]편리한기본설정알아두기
1.테마전환하기
2.오브젝트이동단위8배수로변경하기

PART3.피그마기본도구활용하기

01.[프레임]UI디자인을위한기본요소,프레임이해하기
1.디바이스프레임
2.프레임중첩
3.클립콘텐츠(Clipcontent)
4.제약조건(Constraints)
5.프로토타이핑
02.[도형도구]자유자재로기본도형만들기
1.Rectangle-사각형도구
2.Line-선도구
3.Ellipse-원도구
4.Polygon-다각형도구
5.Star-별모양도구
03.[정렬]오브젝트손쉽게정렬하기
1.오브젝트정렬(Alignment)하기
2.오브젝트분배(Distribution)하기
3.오브젝트일정하게정리(Tidyup)하기
04.[그래프제작]원형그래프만들기
05.[아이콘제작]여러가지아이콘디자인하기
1.아이콘가이드만들기
2.검색아이콘만들기
3.홈아이콘만들기
4.하트아이콘만들기
06.[Outlinestroke와Flatten]Outlinestroke와Flatten의차이점이해하기
1.Outlinestroke-외곽선추출하기
2.Flatten-레이어병합하기
07.[펜도구]벡터그래픽을자유롭게편집하는펜도구알아보기
1.직선그리기
2.곡선그리기
3.기준점연결하기
4.페인트도구로공간나누기
08.[글래스모피즘]유리느낌의반투명카드디자인하기

PART4.피그마의꽃,오토레이아웃살펴보기

01.[오토레이아웃구성요소]오토레이아웃의구성요소알아보기
1.오토레이아웃생성하기
2.방향에따라오브젝트배열하기
3.간격설정하기
4.패딩-오브젝트와프레임사이크기조절하기
5.Autolayout패널을사용하지않고간격과패딩제어하기
6.정렬-프레임내부오브젝트정렬하기
7.분배-오브젝트분배하기
8.레이아웃외곽선설정하기
9.캔버스레이어순서조정하기
10.텍스트기준선정렬하기
11.Absoluteposition-오토레이아웃옵션에영향받지않기
12.오토레이아웃해제하기
02.[크기조절옵션]반응형디자인을위한크기조절옵션알아보기
1.Hugcontents-하위오브젝트감싸기
2.Fixedsize-오브젝트크기고정하기
3.Fillcontainer-상위프레임에따라크기조절하기
4.중첩된오토레이아웃리사이징하기
03.[버튼과텍스트필드]버튼과텍스트필드만들기
1.버튼만들기
2.텍스트필드만들기
04.[알림창]여러가지형태의알림창만들기
1.기본형알림창만들기
2.단일버튼알림창만들기
3.수직형버튼알림창만들기
4.시스템형알림창만들기
05.[반응형레이아웃]프로필카드디자인하기
1.디자인요소생성하기
2.오토레이아웃설정하기
3.크기조절하기
4.말줄임표처리하기

PART5.컴포넌트&배리언츠적용하기

01.[컴포넌트]컴포넌트로동일한형태를반복해서사용하기
1.메인컴포넌트와인스턴스컴포넌트생성하기
2.인스턴스컴포넌트의속성변경하기
3.독립된속성초기화하기
4.독립된속성을메인컴포넌트로이전하기
5.메인컴포넌트찾기
6.삭제된메인컴포넌트복구하기
7.인스턴스컴포넌트해제하기
8.다수의컴포넌트동시에생성하기
02.[아이콘컴포넌트]컴포넌트로아이콘관리하고사용하기
1.아이콘컴포넌트만들기
2.컴포넌트스왑하기
3.컴포넌트를그룹으로구분하기
03.[컴포넌트프로퍼티]컴포넌트프로퍼티를활용한체크리스트만들기
1.체크박스컴포넌트만들기
2.체크리스트컴포넌트만들기
3.불리언(Boolean)프로퍼티설정하기
4.텍스트(Text)프로퍼티설정하기
5.인스턴스스왑(InstanceSwap)프로퍼티설정하기
6.컴포넌트프로퍼티속성편집하기
04.[배리언츠&프로퍼티]메인컴포넌트의묶음,배리언츠활용하기
1.배리언츠생성및준비하기
2.배리언츠만들기
3.프로퍼티설정하기
4.프로퍼티와밸류순서변경하기
5.프로퍼티삭제하기
6.배리언츠해제하기
05.[칩배리언츠]배리언츠프로퍼티를토글형태로만들기
1.칩(Chip)배리언츠만들기
2.칩을활용한카테고리목록만들기
06.[컴포넌트&배리언츠]버튼배리언츠구성하기
1.버튼아이콘준비하기
2.기본버튼만들기
3.배리언츠구성하기
4.왼쪽아이콘프로퍼티추가하기
5.오른쪽아이콘프로퍼티추가하기
6.텍스트프로퍼티추가하기
7.버튼크기를추가하여배리언츠확장하기

PART6.디자인이살아움직이는프로토타입만들기

01.[프로토타입속성]프로토타입속성살펴보기
1.프레임연결하기
2.다양한옵션살펴보기
02.[온보딩페이지]온보딩페이지프로토타이핑하기
1.커뮤니티에서필요한리소스가져오기
2.플러그인으로일러스트레이션과문자열삽입하기
3.인디케이터와버튼컴포넌트삽입하기
4.버튼을눌러다음화면으로넘어가기
5.화면을쓸어넘겨전환하기
6.완성된프로토타입실행하기
7.모바일기기에서프로토타입실행하기
03.[스크롤포지션]스크롤포지션설정하기
1.이미지가있는섹션만들기
2.Position:Fixed설정하기
3.Position:Sticky설정하기
04.[스크롤]원하는대로스크롤설정하기
1.수평(가로방향)으로스크롤하기
2.모든방향으로스크롤하기
05.[스마트애니메이트]스마트애니메이트살펴보기
06.[인터랙티브컴포넌트]인터랙티브컴포넌트살펴보기
1.체크박스인터랙션설정하기
2.토글스위치인터랙션설정하기
3.버튼인터랙션설정하기
07.[FAB]튀어나오는FAB애니메이션만들기
08.[로딩스피너]자동으로돌아가는로딩스피너만들기
1.스피너도형만들기
2.배리언츠설정하기

PART7.피그마활용팁익히기

01.[섹션]캔버스영역을구분하는섹션(Section)이해하기
1.섹션생성하기
2.유저플로우별로캔버스영역구분하기
3.개발준비완료상태표시하기
4.컴포넌트에셋그룹화하기
5.섹션삭제하기
02.[스타일]자주사용하는속성들을스타일로만들어사용하기
1.컬러스타일만들기
2.컬러스타일적용하기
3.스타일관리하기
4.텍스트스타일만들기
5.이펙트스타일만들기
6.그리드스타일만들기
03.[팀라이브러리]팀라이브러리(TeamLibrary)기능알아보기
1.팀라이브러리배포하기
2.팀라이브러리적용하기
3.팀라이브러리업데이트하기
04.[필수플러그인]작업효율을높이는필수플러그인살펴보기
1.플러그인실행하기
2.Unsplash-고품질의무료이미지제공플러그인
3.Loremipsum-문자열생성플러그인(영문)
4.한글입숨-문자열생성플러그인(한글)
5.Faker-특정카테고리문자열생성플러그인
6.Mapsicle-지도생성플러그인
7.MapMaker-지도생성플러그인
8.Blobs-추상적인도형을무작위로생성하는플러그인
9.SkewDat-도형왜곡플러그인
10.Arc-텍스트문자열을둥글게만드는플러그인
11.ArrowAuto-플로우생성플러그인
05.[피그마팁]피그마활용팁12가지
1.속성복사,붙여넣기
2.최하위오브젝트손쉽게선택(Deepselect)하기
3.섬네일설정하기
4.오브젝트간격확인하기
5.부모-자식레이어쉽게전환하기
6.모든레이어닫기
7.프레임URL공유하기
8.숫자목록적용취소하기
9.마지막으로닫은탭열기
10.새로고침하여파일최신화하기
11.대체하여붙여넣기
12.스타일을유지하면서텍스트내용만붙여넣기

PART8.실전프로젝트다루기

01.[쇼핑몰메인페이지]쇼핑몰메인화면디자인하기
1.내비게이션바만들기
2.카테고리탭메뉴만들기
3.자동슬라이드배너만들기
4.세로형상품카드만들기
5.가로형상품카드만들기
6.탭바만들기
7.포지션설정하고마무리하기
02.[음악앱디자인]음악앱화면디자인하기
1.아이콘준비하기
2.홈화면디자인하기
3.추천플레이리스트영역만들기
4.Top100영역만들기
5.리사이징설정하기
6.데이터추가하기
7.탭바만들기
8.재생중인음악상태바만들기
9.재생중인음악정보화면디자인하기
10.검색창디자인
11.인기검색어섹션만들기
12.추천앨범섹션만들기
13.스크롤및포지션설정하기
14.재생화면등장인터랙션설정하기
15.화면전환인터랙션설정하기
-찾아보기

실습예제부터실전활용까지!
감각적인실무프로젝트를따라
피그마로디자인시스템을익힌다!

UX/UI디자이너,서비스기획자의디자인생산성을높이는피그마는협업에특화된UX/UI디자인도구입니다.이책에서는기초부터확실하게핵심기능을익히도록피그마의다양하고편리한기능들을하나씩확실하게알려줍니다.반응형디자인을위한오토레이아웃,라이브러리등의개념을이해하고다양한예제를통해학습하며,컴포넌트와배리언츠의개념을학습하고,프로퍼티를통해효율적으로관리하는방법을배웁니다.디자인에생명을불어넣는프로토타이핑을통해코딩없이내디자인이실제로구현된것처럼움직이게만들수있으며,이를제대로활용할수있도록다양한실전팁들을통해실제업무에서작업속도를빠르게향상시키는방법을배웁니다.단순한이론과심플한예제가아닌,업무에바로적용가능한예제들을통해피그마를학습해실무감각을익히세요!피그마를처음사용해보는입문자는물론,실무에서피그마를사용하고있지만더욱제대로활용하고싶은분들까지.보다쉽고재미있는예제를통해여러분의디자인실력을향상시킬수있습니다.