피그마 실전 31일: UX/UI 디자이너를 위한 피그마 완벽 지침서

박신희

저자:박신희
현재융합디자인연구소메타필리아(Metaphilia)의대표로서디자인비즈니스현장의AX(AITransformation)와AI기반디자인전환방향을연구하며,관련디자인·브랜딩프로젝트를수행하고있다.홍익대학교대학원에서브랜드매니지먼트전공으로석사학위(M.S.)를,동대학원에서시각디자인전공으로미술학박사학위(Ph.D.)를취득하였다.숭실대학교와용인대학교등에서시각디자인,브랜딩,UX/UI디자인,광고와홍보분야의후학을양성해왔으며,현장에서의실무와연구,강의경력을바탕으로디자인교육과산업현장을연결하는역할을수행하고있다.대외적으로는영천시공공디자인진흥위원회위원으로위촉되었으며,(사)한국브랜드디자인학회AI융복합분과상임이사,(사)한국시각정보디자인협회AI분과간사로활동하고있다.

다수학회의논문심사와신진작가국제초대전심사에참여하며학술연구와디자인분야의평가활동을이어가고있다.국내등재학술지에여러편의연구논문을게재하였으며,주요연구분야는시각디자인,브랜딩,AI기반디자인,AI디자인리터러시,트랜스미디어스토리텔링,장소만들기이다.인간중심디자인관점을기반으로디자인과기술,문화가만나는교차점에서새로운가치를제안하고확장하는데초점을두고있다.주요저서로는커뮤니케이션북스에서『AI디자인,개념과과제』(2024년),『디자인인문학과인공지능』(2025년),『AI디자인과장소만들기』(2025년),도서출판책밥에서『왕초보를위한피그마수업』(2026년),그리고박영사에서『AI비즈니스론』(2026년)을출간하였다.

Chapter01피그마(Figma)첫걸음-탄탄한기초다지기

Lesson01|피그마(Figma)알아보기
01피그마인터페이스만나기
02피그마에서계정생성하고로그인하기
[1]계정생성하기
|따라하기|차근차근따라하며계정생성하기
Special피그마요금제알아보기
Special[도움말]기능알아보기

03다운로드프로그램가이드
[1]데스크톱앱알아보기
[2]모바일앱알아보기
[3]폰트인스톨러알아보기

04사용자프로필및통합검색
Lesson02|파일브라우저와커뮤니티살펴보기
01사용자프로필및통합검색알아보기
02파일탐색및커뮤니티알아보기
[1]저장됨
|따라하기|리소스저장하기
[2]디자인리소스
|따라하기|디자인리소스사용하기
[3]FigmaMake
|따라하기|FigmaMake에서카드불러오기
[4]플러그인+위젯
|따라하기|플러그인+위젯들여다보기
[5]프레젠테이션
|따라하기|프레젠테이션들여다보기
[6]화이트보딩
|따라하기|화이트보딩에서다이어그램사용하기
[7]웹사이트
|따라하기|웹사이트사용하기
Lesson03|새로운팀과새로운파일만들기
|따라하기|새로운팀만들기
Lesson04|즐겨찾기와리소스로프로젝트와파일관리하기

Chapter02[디자인(Design)]파일마스터하기

Lesson05|[디자인(Design)]파일화면구성알아보기
|따라하기|디자인파일만들기

Lesson06|피그마의위계를설정하기위해프레임,섹션,그룹이해하기
01프레임(Frame)알아보기
|따라하기|프레임만들기
[1]프레임의속성을조절하는[레이아웃],[외형],[채우기]패널알아보기
02섹션(Section)알아보기
03그룹(Group)알아보기
|따라하기|[레이아웃]패널을이용해프레임의위치와크기조절하기

Lesson07|피그마만능일꾼,멀티에딧(Multi-edit)알아보기
01멀티에딧의주요기능알아보기
|따라하기|멀티에딧사용하기

Lesson08|피그마기능의집약체,메인메뉴알아보기
01액션기능알아보기
[1]에셋(Asset)알아보기
|따라하기|에셋사용하기
[2]플러그인(Plugins)및위젯(Widgets)
|따라하기|플러그인및위젯둘러보기

02파일메뉴알아보기
|따라하기|이미지파일불러와크기조절하기
|따라하기|템플릿불러와저장하기
|따라하기|이미지파일불러와크기조절하고내보내기
03편집메뉴알아보기
04보기메뉴알아보기
|따라하기|시각적가이드살펴보기
|따라하기|윤곽선들여다보기
Lesson09|페이지관리와소스활용을위한파일과에셋알아보기
01파일과에셋알아보기
|따라하기|에셋활용하기
02페이지관리및구성알아보기

Chapter03그림그리기마스터!도형그리기로시작하기

Lesson10|도형의기초①-사각형그리기
Lesson11|도형의기초②-원그리기
Lesson12|[원형]툴을이용해호그리기
Lesson13|도형에테두리선그리기
Lesson14|[라인]툴로화살표그리기
Lesson15|다양한모양으로다각형그리기
Special벡터편집모드도구상자알아보기
|따라하기|도형을이용해나무아이콘만들기
Lesson16|[디자인(Design)]파일의계층구조알아보기
01페이지(Page)알아보기
02섹션(Section)알아보기
03프레임(Frame)알아보기
04레이어(Layer)알아보기
|따라하기|스케치를따라나만의벡터글씨만들기

Chapter04매체확장핵심기능①오토레이아웃

Lesson17|나노바나나를이용해디저트홍보카드만들기
|Step1|카드베이스준비하기
Special피그마색상모드,한눈에이해하기
|Step2|나노바나나로이미지만들기
|Step3|텍스트추가하고속성설정하기
Special구글폰트페어링하기
|Step4|[오토레이아웃]의핵심기능적용하기

Chapter05매체확장핵심기능②반응형디자인

Lesson18|반응형디자인개념이해하기
[1]오토레이아웃의핵심,부모와자식관계알아보기
|따라하기|텍스트카드에반응형디자인적용하기
[2][자동화도구]마스터하기

Lesson19|반응형디자인을위한크기조절규칙알아보기
|따라하기|상품카드를만들면서크기조절규칙적용하기
규칙1|고정너비-컬러칩왜곡방지
규칙2|컨테이너채우기-메인이미지영역확장
규칙3|최소너비추가-모바일무너짐방지
규칙4|최대너비추가-데스크톱밀도유지

Lesson20|애니메이션프로토타입적용하기
01프로토타입이미지생성및저장하기
SpecialFigmaEffect:디자인에깊이와입체감을더하는네가지도구
02인터랙션·애니메이션프로토타입실행하기

Lesson21|반응형디자인중단점과레이아웃그리드설정하기
01반응형디자인과중단점(Breakpoint)이해하기

Chapter06디자인효율을위한컴포넌트와베리언트

Lesson22|스타일저장!컴포넌트알아보기
01컴포넌트알아보기
[1]컴포넌트의기본개념이해하기
|따라하기|컴포넌트생성하기

Lesson23|컴포넌트정리상자,베리언트알아보기
01베리언트(Variants)를사용하는이유
|따라하기|베리언트생성을위해컴포넌트준비하기
Special개발모드(DevMode)를활용한핸드오프알아보기
|따라하기|개발모드실행하기
|따라하기|클로드에서버튼만들기

Chapter07통합플랫폼,피그마의확장파일알아보기

Lesson24|온라인화이트보드,[피그잼(FigJam)]알아보기
01도구상자알아보기
|따라하기|스티커활용하기

Lesson25|완벽한프레젠테이션제작도구,[슬라이드(Slides)]알아보기
[1][슬라이드]로프레젠테이션파일만들기
|따라하기|슬라이드템플릿사용하기
[2]슬라이드도구상자알아보기
[3]애니메이션적용하기
[4]프레젠테이션실행하기
[5]공유및PDF내보내기

Lesson26|템플릿기반협업도구,[버즈(Buzz)]알아보기
|따라하기|피그마의똑똑한조수‘Buzz’로AI활용하기
Special자주사용하는이미지편집메뉴알아보기

Lesson27|코딩없는퍼블리싱플랫폼,[사이트(Site)]알아보기
01[사이트(Site)]의주요특징알아보기
[1]커스텀도메인연결및보안환경구축하기
[2]메타데이터및SEO최적화하기
[3]템플릿과구성요소제공하기
[4]반응형프레임과동시편집기능알아보기
[5]애니메이션및인터랙션효과알아보기

02[Site]의인터페이스와도구상자알아보기
[1]좌측패널알아보기
[2]도구상자알아보기
[3]속성패널알아보기

Lesson28|AI를활용한UI디자인,[메이크(Make)]알아보기
[1][메이크]파일의인터페이스와기본기능알아보기
[2]좌측패널:디자인카테고리가이드알아보기

Chapter08실무프로젝트로피그마활용하기

Lesson29|스킨케어브랜드‘NORDICBARE’상세페이지만들기
|Step1|상세페이지프레임만들고텍스트입력하기
|Step2|상세페이지프레임에이미지불러오기
|Step3|텍스트속성변경하기
|Step4|도형으로상세페이지장식하기
|Step5|그라데이션적용해화사한이미지만들기

Lesson30|버즈(Buzz)에서대량으로디자인콘텐츠생성하기
|Step1|작업영역만들기
|Step2|엑셀데이터와피그마연동하기
|Step3|제미나이를활용해다양한샌드위치이미지만들기
|Step4|이미지삽입해엑셀파일완성하기
|Step5|버즈에서엑셀데이터와연동하기
|Step6|피그마디자인모드에서디자인디테일보정하기
Special이미지크기와색조절하기
Special어도비컬러팔레트활용하기

Lesson31|[메이크(Make)]파일에서바이브코딩하기
|Step1|작업영역만들기
|Step2|[사이트]파일의템플릿을캡처해[이미지및파일추가]요청하기

기초부터AI실무프로젝트까지완벽히마스터하는4단계구성

탄탄한이론기반위에서실무응용력까지한번에끌어올릴수있도록체계적인4단계학습구조로설계되었습니다.

1.핵심이론&따라하기
기능의원리를직관적으로설명하는핵심이론과부담없는소규모예제를통해피그마의주요기능들을확실하게내것으로만듭니다.

2.심도있는예제따라하기
본문중간중간배치된실전형예제를따라해보며,피그마를보다깊이있게이해할수있습니다.

3.스페셜페이지,팁,참고로실무노하우보충
작업효율을극대화하는단축키와꿀팁,심화개념을다루는'스페셜페이지'와'팁','참고'코너를본문곳곳에배치하여실무현장의시행착오를줄여줍니다.

4.AI와함께하는실무프로젝트
책의하이라이트인마지막챕터에서는클로드,제미나이등최신AI툴과피그마를연동해실제서비스를기획하고프로토타입으로완성해보는워크플로우를경험합니다.

〈핵심이론→실전연습→피그마마스터→AI프로젝트완성〉으로이어지는선순환구조를따라가다보면,초보자도막힘없이전문가수준의피그마워크플로우를완벽하게습득할수있습니다.