된다! 피그마 디자인 10분 레시피

6가지 혜택을 이 책 한 권으로 모두 가져가세요!
- SNS 콘텐츠부터 UX/UI, 웹 디자인까지 다루는 41가지 실무 소스
- 피그마 KR 공식 멤버 '피그마 튜터'의 참고 영상
- 참여자 수 1위인 피그마 커뮤니티 참여 링크
- 버즈(Buzz)를 활용한 콘텐츠 디자인 자동화 방법
- 메이크(Make)에서 바이브 코딩으로 프로토타입 만드는 방법
- 피그마에서 '나노 바나나'로 AI 이미지 만들고 수정하는 방법

이런 분께 추천해요!
- 피그마가 처음인 초보자
- 피그마 실력을 업그레이드하고 싶은 입문자
- 실무에서 활용할 소스를 구하는 현직 디자이너
- 컴포넌트, 오토 레이아웃의 개념을 정확히 알고 싶은 실무자
- 피그마로 SNS 콘텐츠를 만들고 싶은 마케터
- 피그마로 작업하는 회사에 재직 중인 기획자, 개발자

"최신 피그마 기능, 언제 또 배우죠?" - 피그마 피디아 팀이 떠먹여 주는 최신 피그마 레시피
피그마 최신 기능, 써보면 좋을 거라는 건 알지만 배우려고 하니 막막하다고요? 디자인 업계 1티어인 '피그마 피디아' 팀이 피그마의 최신 기능을 바로 써먹을 수 있는 실무 소스와 예제로 떠먹여 드립니다. 콘텐츠 디자인에 최적화된 피그마 버즈(Buzz)부터 바이브 코딩을 위한 메이크(Make), 웹 디자인을 위한 사이트(Site), 벡터 그래픽을 만드는 드로우(Draw), 여기에 더해 피그마 안에 들어온 AI 기능들까지! 피그마 사용자라면 꼭 알아야 하는 내용만 모아 이 책 한 권에 담아냈습니다. 최근 대세로 떠오른 구글의 이미지 생성 AI 도구인 '나노 바나나'를 피그마에서 사용하는 방법까지, 그야말로 최신 피그마 레시피의 완결판이라고 할 수 있습니다.

"컴포넌트, 오토 레이아웃… 너무 어려워요!" - 헷갈리는 개념은 유튜브 영상으로!
피그마를 처음 사용하는 초보자는 가장 먼저 '피그마의 낯선 개념' 앞에서 포기하곤 합니다. 이 책은 피그마 초보자가 이 '문턱'을 넘을 수 있도록 친절한 설명과 함께 참고 영상을 제공합니다. 그동안 개념을 제대로 알지 못한 채 '이해한 척' 일해 왔던 실무자라면 이 책을 몰래 펼쳐 보세요. 어렴풋이 알고 있던 개념이 머릿속에 확실하게 정립되어 더 이상 당황하거나 흔들리지 않을 겁니다. 개념을 익힌 후에는 뒤에 나오는 실무 레시피들을 따라 하며 자신의 것으로 만들어 보세요. 반복해서 실습하다 보면 어느새 피그마의 필수 개념들을 익숙하게 활용하고 있을 겁니다.

"SNS 콘텐츠도 피그마로 만든다고요?" - 미리캔버스, 포토샵보다 피그마를 추천하는 이유
피그마에는 콘텐츠 디자인에 최적화된 버즈(Buzz)라는 모드가 있습니다. 버즈 파일을 만든 순간 작업 화면이 모두 바뀌어 도구들이 SNS용 콘텐츠에 적합하게 배열됩니다. 버즈에서는 구글, 인스타그램 등 채널별 권장 사이즈로 프레임을 만들고 베리에이션해서 같은 내용의 콘텐츠를 다양한 사이즈로 쉽게 바꿀 수 있습니다. 또한 구글 스프레드시트에 내용을 입력한 후 클릭 한 번으로 시안을 수십 개나 완성하는 '벌크 콘텐츠' 등 버즈의 뛰어난 성능을 경험할 수 있습니다. 지금까지 포토샵, 미리캔버스 등으로 SNS 콘텐츠를 만들어 왔다면, 피그마의 버즈 모드로 작업 효율을 극대화해 보세요.

"디자이너인데 코딩까지 알아야 하나요?" - 개발자와 협업에 필요한 진짜 실무 스킬
앱/웹 디자인 작업일 경우, 피그마에서 그럴듯한 결과물을 만드는 데서 끝나지 않습니다. 이후 개발 단계로 넘어가면 UI 요소 하나하나에 소스 코드가 입혀지며 작동하게 되죠. 이 과정이 매끄럽게 진행되려면 디자인 단계에서 UI 요소의 이름이나 속성 등을 '실무자 관점'에서 만들어야 합니다. 예를 들어 컴포넌트 이름에 '/(슬래시)'를 넣어 같은 그룹으로 묶어 두면 개발자가 해당 요소로 작업하기 편합니다. 이처럼 대다수 실무 현장에서는 혼자 일하지 않기 때문에 '협업하기 좋은 디자인'을 만들어야 합니다. 이 책은 이 한 끗 차이까지 담아내 '함께 일하기 좋은 디자이너'로 거듭나게 해줍니다.

책에 담긴 41가지 피그마 원본 소스, 오픈 카톡방까지!
이 책에서 실습하는 41가지 예제는 피그마 커뮤니티에서 실습 소스와 완성본으로 모두 제공합니다. 각 상황에 필요한 요소를 선택하고 복사한 후 자신의 피그마 파일에 붙여 넣어 사용하세요. 41가지 예제 소스를 실무 상황에서도 손쉽게 활용할 수 있습니다.
피그마를 공부하는 사람들을 만나고 싶다면 피그마 피디아 팀이 직접 운영하는 오픈 카톡방에 들어가 보세요. 매주 새로운 콘텐츠와 업데이트 소식을 실시간으로 접할 수 있습니다.
ㆍ 오픈 카톡방 링크: open.kakao.com/o/gPjVAOXf

"피그마 MCP가 궁금한가요?" - 이 책에만 있는 10가지 실무 예제와 '피튜의 스페셜 노트'
분량 제한으로 책에 다 넣지 못한 내용은 〈보너스〉 PDF로 제공합니다. 디자인 브랜딩부터 콘텐츠 디자인, 비즈니스 활용까지 10가지 풍부한 실무 예제는 물론, 피그마 MCP 연결법까지 다룬 '피튜의 스페셜 노트'도 놓치지 마세요!

01 피그마 기본 사용법
01-1 10분 만에 피그마 시작하기
01-2 피그마를 더 잘 쓰려면 알아야 하는 핵심 기능 4가지
01-3 피그마에서 AI로 이미지 관리하기 with 나노 바나나

02 콘텐츠 디자인
02-1 플랫폼에 최적화된 읽기 쉬운 카드뉴스 만들기
02-2 피그마로 인포그래픽 만들기
02-3 피그마로 외주 없이 인쇄 디자인 만들기
02-4 버즈로 매체별 광고 소재 빠르게 만들기
02-5 벌크 콘텐츠로 반복 작업 자동화하기
02-6 팔로우를 부르는 상단 배너와 프로필 만들기
02-7 인스타그램 스토리 콘텐츠 만들기

03 서비스 기획 & 와이어프레임 만들기
03-1 와이어프레임 그리기
03-2 저니맵 만들기
03-3 유저 플로우 그리기
03-4 피그마 AI로 프로토타입 만들기

04 UX/UI 디자인
04-1 로딩 애니메이션 만들기
04-2 유형별 버튼 만들기
04-3 카드 모듈 만들기
04-4 인풋 세트 만들기
04-5 체크 박스/토글/라디오 버튼 만들기
04-6 단계별 슬라이더 만들기
04-7 쉽게 탐색하는 내비게이션 탭 만들기
04-8 유연한 탭 메뉴 만들기
04-9 드롭다운 메뉴 만들기
04-10 종류별 모달 만들기
04-11 타임 피커 만들기
04-12 뱃지 아이콘 만들기
04-13 아코디언 메뉴 만들기
04-14 캐러셀 배너 만들기
04-15 영상을 활용한 디자인 모듈 만들기
04-16 툴팁 만들기
04-17 헤더 만들기
04-18 피그마 메이크로 스테퍼 프로토타이핑 만들기

05 웹 디자인
05-1 피그마 사이트로 반응형 웹 페이지 만들기
05-2 인터랙티브한 포트폴리오 만들기

찾아보기

하이서 '피그마 튜터'라는 이름으로 활동하며 초보자도 쉽게 따라 할 수 있는 피그마 팁과 디자인 작업에 날개를 달아 줄 AI 활용법을 공유하고 있다. 디자인 지식 공유 페이지인 '피그마 피디아'와 캡처 노가다에서 디자이너를 구원할 자동화 서비스인 '스크린플로우(Screenflow)'를 운영하고 있다. 디자이너들이 툴 공부에 스트레스 받지 않고 크리에이티브한 고민에만 집중할 수 있도록 돕는 것이 목표다.
ㆍ 인스타그램: @figma_tutor