Figma 그리드 사용법 | 반응형 레이아웃 가이드 만들기 - 피그마 강좌 2-5

Figma의 Layout Guide를 활용해 데스크탑·태블릿·모바일 화면에 일관된 그리드 기준을 만드는 방법을 알아봅니다.
12컬럼 레이아웃과 Margin·Gutter 설정, 4pt UI Grid와 아이콘 Safe Area, 반응형 그리드 설정부터 자주 사용하는 가이드를 Style로 저장해 재사용하는 방법까지 살펴봅니다.

🕐 타임스탬프
00:00 디자인에 기준선이 필요한 이유
00:46 Layout Guide와 Grid·Columns·Rows
01:04 데스크탑 12컬럼 그리드 만들기
02:06 Center 타입으로 콘텐츠 폭 설정하기
02:50 태블릿 반응형 그리드 설정
03:40 모바일 4컬럼 그리드 만들기
04:17 UI 컴포넌트용 4pt Grid
05:08 아이콘 Safe Area와 2px Grid
06:07 그리드를 Style로 저장하고 재사용하기
08:21 Layout Guide 표시·숨기기 단축키
08:34 다음 강의: Auto Layout

🚀 멤버십 가입 : https://www.youtube.com/channel/UCvYnDMeL-PFZhfIz6oc_U-Q/join
🚀 예제 다운로드는 멤버십 회원 전용 커뮤니티에 올린 링크에서 받으실 수 있습니다.

🔥 디자인베이스 웹사이트 : https://designbase.co.kr/
🔥 인스타그램 : https://www.instagram.com/designbasekorea/
🔥 이메일 문의 : [email protected]
🔥 카카오 오픈채팅방 : https://open.kakao.com/o/gmwngljb (참여코드 : dgoing12)

#Figma #피그마강좌 #UI디자인 #FigmaEffects