피그마로 시작하는 UI 디자인 : 초보 디자이너를 위한 피그마 완벽 가이드

피그마튜터

하이서

스타트업G사UX/UI디자이너
2021년10월부터온라인플랫폼‘탈잉’에서피그마온라인튜터로활동을시작했으며이듬해실무중심교육플랫폼코멘토와콜로소에서피그마온라인강의를출시한바있다.현재팔로워14k의피그마교육관련인스타그램채널을운영중이며팔로워들을대상으로실시간온라인클래스를진행하고있다.

Part1피그마이해하기

01피그마알아보기
피그마,디자이너가아닌이들을잇다
대세협업툴피그마
피그마,빠르게마스터하는방법

02피그마시작하기
브라우저
데스크톱앱
모바일앱

03피그마살펴보기
피그마인터페이스
기본툴바
레이어패널
속성패널
기타기능

[피그마핵심정리!]

Part2피그마주요기능익히기

01컴포넌트
컴포넌트정의
마스터컴포넌트와인스턴스
컴포넌트등록방법
에셋관리및사용법

02컴포넌트프로퍼티
컴포넌트프로퍼티정의

03베리언츠
베리언츠정의
베리언츠옵션패널
베리언츠생성방법
[실습]토글
[실습]버튼


04오토레이아웃
오토레이아웃정의
오토레이아웃옵션
오토레이아웃캔버스컨트롤
앱솔루트포지션
오토레이아웃리사이징
[실습]오토레이아웃을활용한프로필UI만들기
[실습]오토레이아웃으로컴포넌트만들기

피그마핵심정리!


Part3피그마로디자인하기

01앱디자인
프레임생성하기
앱상단내비게이션바만들기
앱하단탭바와검색창만들기
검색창하단바만들기
우측하단플로팅버튼만들기
게시글모듈만들기
커뮤니티글쓰기화면만들기

02반응형웹디자인
디바이스별그리드생성하기
콘텐츠위치설정하기
콘텐츠제작하기
가로형모듈만들기
세로카드형모듈만들기
태블릿과모바일시안만들기

03뉴스레터디자인
템플릿만들기
타이틀생성하기
메인배너만들기
콘텐츠영역구성하기
하단배너만들기
푸터만들기
구성요소정리하기


부록피그마스킬업

01플러그인
플러그인정의
플러그인사용방법
알아두면유용한플러그인리스트

02피그마커뮤니티
피그마커뮤니티정의
피그마커뮤니티활용방법
디자인작업물을커뮤니티에발행하기

03단축키
Essential:필수단축키
Tools:빠른실행단축키
View:인터페이스및그리드단축키
Zoom:확대및슬라이드단축키
Text:텍스트단축키
Shape:모양툴단축키
Selection:요소선택단축키
Cursor:마우스활용단축키
Edit:편집단축키
Transform:변형단축키
Arrange:정렬단축키
Components:컴포넌트단축키

04피그잼
피그잼실행하기
상단메뉴
하단메뉴

대세협업툴피그마,
피그마가처음인당신을위한친절한사용설명서

웹페이지및모바일앱디자인뿐만아니라기획서,마케팅,콘텐츠제작,브레인스토밍까지창작자협업툴로인정받은피그마는이제디자인의영역을넘어다양한직군에서활발히사용되고있습니다.
이책은무궁무진한잠재력과활용도를가진디자인도구피그마에대한안내서입니다.피그마가처음이라어디서부터어떻게시작해야할지몰라막막한분들께피그마의기본개념부터모바일앱,반응형웹,뉴스레터디자인까지의전과정을단계별로담아상세히알려드립니다.
또한,각파트마지막장에해당본문의핵심개념만정리한‘피그마핵심정리’를수록하여여러분의소중한시간을조금이라도절약할수있게내용을구성했습니다.

8년차UX/UI디자이너가알려주는
생생한피그마실무노하우

피그마에어떤기능이있는지소개하는곳은많지만피그마를어떻게잘활용해야하는지에대해알려주는곳은찾기어렵습니다.이책은8년차UX/UI디자이너인저자가실무에서직접피그마를사용하며알게된노하우와꿀팁을본문에아낌없이담았으며고퀄리티의다채로운아웃풋예제를따라해보며피그마의기초툴원리와프로토타입제작과정을자연스럽게배울수있습니다.
또한,책이나오기직전까지피그마의업데이트내용을꼼꼼히살펴어디에서도다룬적없는피그잼의최신업데이트내용도확인해볼수있습니다.