프레임과 도형 — UI의 뼈대 만들기

프레임(Frame)이란?

Figma에서 프레임은 단순한 컨테이너가 아닙니다. 화면 하나를 표현하는 단위이며, 내부 요소의 레이아웃 규칙, 클립 처리, 프로토타입 전환의 기준점 역할을 합니다.

프레임 vs 그룹 — 핵심 차이

항목	프레임 (Frame)	그룹 (Group)
생성 단축키	F	Ctrl+G
배경색	설정 가능	없음
내부 클립	경계 벗어난 요소 숨김	전부 표시
오토 레이아웃	적용 가능	불가
프로토타입	화면 단위로 인식	인식 안 됨
컴포넌트 기반	컴포넌트로 변환 가능	가능하나 비권장
언제 사용	화면, UI 구성 요소	임시 묶음, 간단한 그룹

실무에서는 그룹보다 프레임을 기본으로 사용합니다. "일단 프레임으로 감싸고 시작"이 올바른 Figma 습관입니다. 선택 후 Ctrl+Alt+G 로 프레임으로 전환할 수 있습니다.

디바이스 프리셋

프레임 도구(F) → 빈 캔버스 클릭 → 오른쪽 패널 "Frame" 섹션

주요 프리셋:
Phone      iPhone 14: 390 x 844
           Android: 360 x 800
Tablet     iPad: 768 x 1024
Desktop    1440 x 1024
           1280 x 832
Watch      Apple Watch: 198 x 242

소셜 미디어:
Instagram Post: 1080 x 1080
Instagram Story: 1080 x 1920
YouTube Thumbnail: 1280 x 720

도형 도구 완전 활용

사각형 (R):
드래그로 생성
Shift+드래그: 정사각형
오른쪽 패널 Corner Radius: 모서리 둥글게 (각 모서리 개별 설정 가능)

원/타원 (O):
드래그로 생성
Shift+드래그: 정원
Arc 조절: 파이 차트, 호 모양 생성 가능

선 (L):
드래그로 직선
Shift+드래그: 수평/수직/45도 고정

화살표:
선 선택 → 오른쪽 패널 Stroke → Arrowhead 설정

다각형/별:
툴바 도형 메뉴 → Polygon, Star
Count 값으로 꼭짓점 수 변경
Ratio 값으로 별 모양 비율 변경

불리언 연산 — 도형 조합

두 도형을 합치거나 빼서 복잡한 아이콘/도형을 만드는 기능입니다.

두 도형 선택 → 상단 툴바 도형 아이콘 옆 드롭다운

Union (합집합): 두 도형을 합침 → 외곽선 통합
Subtract (차집합): 위 도형이 아래에서 잘라냄
Intersect (교집합): 겹치는 부분만 남김
Exclude (배타적 합집합): 겹치는 부분만 제거

활용 예시:
알림 아이콘 만들기:
1. 원(O) 생성
2. 원 아래쪽에 삼각형 겹치기
3. Union → 종 모양 실루엣 완성

실습 — 모바일 로그인 화면 와이어프레임

목표: iPhone 14 크기 로그인 화면 뼈대 만들기

Step 1: 프레임 생성
F → 오른쪽 패널 Phone → iPhone 14 선택 (390x844)

Step 2: 상단 로고 영역
R → 프레임 상단 1/3 지점에 가로 직사각형
→ Corner Radius: 8 → 색상: 연한 회색 (#f1f5f9)
→ 레이어 이름: "logo-placeholder"

Step 3: 이메일 입력 필드
R → 너비: 350px, 높이: 52px
→ Corner Radius: 12
→ Fill: 흰색, Stroke: #e2e8f0, 두께 1
→ 레이어 이름: "input-email"

Step 4: 비밀번호 입력 필드 (위 필드 복제)
Alt+드래그 또는 Ctrl+D → 아래로 이동 (간격 12px)
→ 레이어 이름: "input-password"

Step 5: 로그인 버튼
R → 너비: 350px, 높이: 52px, Corner Radius: 12
→ Fill: #6366f1 (인디고), 레이어 이름: "btn-login"

Step 6: 정렬
3개 요소 선택 → 오른쪽 패널 Align → 수평 가운데 정렬 → 수직 간격 균등 배분

관련 검색어  ·  피그마 프레임, 피그마 도형, 피그마 불리언 연산, Figma Frame vs Group, 피그마 와이어프레임, 피그마 디바이스 프리셋