피그마 기초 스터디로그 · 01
프레임, 레이어, 그리고 그리드
오늘부터 피그마를 완전 기초부터 배우기 시작했어요.
BX디자인이 "왜, 무엇을"을 다뤘다면, 이제부턴 그걸 손으로 어떻게 만드는지도 같이 기록해보려고요.
TODAY'S BASICS
오늘 배운 네 가지
1
프레임
작업을 담는 캔버스
2
레이어 · 눈 아이콘
쌓인 요소를 정리하고 숨기기
3
레이아웃 그리드
정렬 기준을 잡아주는 격자
4
이름 바꾸기 · 단축키
작업 속도를 빠르게 만드는 습관
프레임
작업을 담는 캔버스
프레임은 디자인이 들어갈 화면 하나의 틀이에요.
웹페이지 화면 하나, 모바일 화면 하나가 각각 프레임이라고 보면 돼요.
프레임 예시
FRAME
왜 중요한가
프레임 안에 넣어야 그 화면 크기(모바일, 데스크탑 등) 기준으로 작업할 수 있어요.
프레임 밖에 그냥 그려두면 어떤 화면 기준인지 알 수가 없어요.
레이어와 눈 아이콘
쌓인 요소를 정리하고 숨기기
레이어 패널에는 화면에 쌓인 요소들이 순서대로 나열돼요.
각 레이어 옆의 눈 모양 아이콘을 누르면 그 요소를 화면에서 잠깐 숨길 수 있어요.
레이어 패널 예시
버튼👁️
제목 텍스트👁️
왜 중요한가
요소가 많아지면 화면이 복잡해지는데, 잠깐 숨겨두면 겹친 요소를 지우지 않고도 아래 요소를 편하게 작업할 수 있어요.
레이아웃 그리드
정렬 기준을 잡아주는 격자
레이아웃 그리드는 화면 위에 깔아두는 투명한 안내선이에요.
요소를 아무 데나 놓지 않고, 이 격자에 맞춰 정렬하게 도와줘요.
그리드 예시
왜 중요한가
그리드 없이 감으로 배치하면 요소들이 미묘하게 삐뚤어지기 쉬운데, 그리드에 맞추면 자로 잰 듯한 정렬이 저절로 돼요.
이름 바꾸기와 단축키
작업 속도를 빠르게 만드는 습관
프레임·레이어 이름을 그때그때 알아보기 쉽게 바꿔두는 것도 오늘 배운 기초예요.
단축키는 다 외워지지 않아서, 표로 따로 정리해뒀어요.
이름 바꾸기 예시
Frame 1
→
로그인 화면
오늘의 단축키 정리 (까먹지 않게 📌)
프레임 만들기F
사각형 그리기R
텍스트 입력T
이름 바꾸기Enter
레이어 숨기기/보이기Shift + H
그룹 만들기Cmd/Ctrl + G
🧭 오늘의 정리
개념만 알던 걸 손으로 직접 눌러보니까, 왜 다들 프레임이랑 레이어 정리를 강조하는지 알겠더라고요.
프레임 — 화면 하나를 담는 틀이에요
레이어 · 눈 아이콘 — 요소를 정리하고 잠깐 숨겨요
레이아웃 그리드 — 정렬 기준을 잡아주는 안내선이에요
이름 바꾸기 · 단축키 — 작업 속도를 빠르게 만들어요