피그마 스타터: 처음부터 차근차근 배우는 UI UX 디자인

엄은영

저자:엄은영
서울과학기술대학교디자인학박사를졸업하였으며,현재동양미래대학교웹응용소프트웨어공학과겸임교수로재직중에있다.
웹디자인,UI/UX디자인,웹퍼블리싱등다수의강의경력을가지고있으며,주요저서로는개더타운과이프렌드에서메타버스세상탐험(아이콕스),왕초보유튜버되기(스토리비전),ACA일러스트레이터CC(성안당)등다수가있다.컬러리스트기사,멀티미디어콘텐츠제작전문가,웹디자인기능사등다수의자격증을보유하고있다.

PART01피그마(Figma)시작하기
section01피그마의개요
section02UI디자인과디바이스의이해
1.UI디자인의이해
2.디바이스의이해
section03그래픽표현방식의이해
1.그래픽디자인프로그램
2.그래픽컬러의이해
section04피그마시작하기
section05피그마인터페이스살펴보기

PART02피그마기본도구활용하기
section01도형도구를활용하여제작하기
1.작업영역만들기
2.사선만들기
3.로고만들기
4.라인만들기
5.텍스트입력하기
section02스타일과디자인시스템라이브러리관리하기
1.작업영역만들기
2.색상을스타일에등록하기
3.텍스트서식을스타일에등록하기
4.Effect를스타일에등록하기하기
5.Grid를스타일에등록하기

PART03피그마로실무디자인시작하기
section01음악스트리밍앱화면제작하기
1.헤더만들기
2.메인컨텐츠영역만들기
3.플레이버튼과더보기아이콘제작하기
section02랜딩페이지디자인제작하기
1.메인이미지영역만들기
2.여행소개페이지만들기
3.배너만들기

PART04피그마핵심기능활용하기
section01디자인시스템생성및관리
1.디자인시스템파일불러오기
2.타이포그래피시스템만들기
3.그리드시스템만들기
section02아카데미웹디자인프로젝트제작
1.데스크탑반응형코딩학원웹디자인제작하기기본레이아웃설정하기
2.헤더만들기
3.메인비주얼영역만들기
4.메인콘텐츠영역만들기01:제목영역만들기
5.콘텐츠영역만들기02:제목영역만들기
6.콘텐츠영역만들기03
7.배너영역만들기
8.footer만들기
9.디자인결과물Export하기

PART05베이커리앱UI디자인제작하기
section01베이커리앱버튼만들기
1.베리언츠이해와제작하기
section02베리언츠앱버튼적용하기
1.디자인에필요한아이콘가져오기
2.기본Frame화면만들기
3.상태바삽입하기
4.헤더만들기
5.메인비주얼영역만들기
6.상세설명영역만들기

PART06프로토타이핑과인터랙션
section01캐러셀인터랙션제작하기
1.앱메인화면콘텐츠수정하기
2.페이지네이션제작하기
3.메인비주얼영역을Carousel로제작하기
4.Carousel에인터랙션적용하기
section02이동메뉴설계및구현하기
1.제목설정하기
2.OverflowscrollingInteraction제작하기
section03프레임연결및화면전환하기
1.Frame간의Interaction설정하기
2.상세화면에서팝업형태로나타나는Frame간의Interaction설정하기
section04화면내의연동과인터랙션
section05동적인내비게이션메뉴구성
section06탭바제작및스타일링
1.탭바제작하기
2.탭바메뉴와앱화면을이동하는Interaction적용하기
3.헤더와탭바고정시키기

PART07피그마로협업및개발모드살펴보기
section01라이브러리등록하기
section02개발모드살펴보기
1.DivMode(유료)
2.플러그인
section03공유하여함께살펴보기
section04피그마버전history살펴보기

특징

피그마는웹기반의강력한UI/UX디자인툴로,팀원간의협업과실시간작업이가능하여편리한디자인환경을제공합니다.
별도로설치하지않아도웹브라우저에서바로사용할수있습니다.
디자이너뿐만아니라기획자,개발자등다양한직군이함께프로젝트를진행할수있도록최적화되어있습니다.