프로토타이핑 기초 — 클릭 한 번으로 화면 전환

Prototype 탭 전환

작업 방법:
오른쪽 패널 상단 탭: Design | Prototype | Inspect
"Prototype" 탭 클릭 → 연결 화살표(Noodle) 모드 활성화

프로토타입 미리보기:
Ctrl+Alt+Enter: Presentation 모드 (풀스크린)
Ctrl+P: 미리보기 (사이드 창)

공유 링크:
Prototype 탭 상단 "Share Prototype" → 링크 복사
→ 로그인 없이 브라우저에서 바로 클릭 가능

연결(Connection) 만들기

방법 1: 드래그
요소에 마우스 올리면 오른쪽에 파란 화살표 핸들 나타남
핸들 드래그 → 연결할 프레임에 드롭

방법 2: Prototype 탭에서
요소 선택 → Prototype 탭 → Interactions "+" → 설정 패널에서 대상 프레임 선택

연결선 삭제:
연결선 클릭 → Delete

연결선 색상:
각 플로우 연결선이 다른 색상으로 표시되어 복잡한 흐름도 구분 가능

Trigger(트리거) 종류

Trigger	발생 시점	주요 용도
On Click	클릭/탭	버튼, 링크, 카드
On Drag	드래그	슬라이더, 스와이프
While Hovering	마우스 올림	툴팁, 드롭다운 (Interactive Components)
While Pressing	누르는 동안	Pressed 상태 표현
Key/Gamepad	키보드 입력	키보드 단축키 시연
After Delay	일정 시간 후	스플래시 화면, 자동 전환
Mouse Enter/Leave	마우스 진입/이탈	호버 메뉴

Action(액션)과 전환 종류

Navigate To: 다른 프레임으로 이동 (가장 많이 사용)
Open Overlay: 현재 화면 위에 오버레이 표시 (모달, 팝업)
Swap Overlay: 현재 오버레이를 다른 것으로 교체
Close Overlay: 오버레이 닫기
Back: 이전 화면으로 돌아가기
Scroll To: 같은 프레임 내 특정 위치로 스크롤

전환 애니메이션:
Instant: 즉시 전환 (페이드 없음)
Dissolve: 페이드 인/아웃
Move In/Out: 방향 지정 슬라이드
Push: 미는 방향으로 슬라이드
Slide In/Out: 겹치지 않고 슬라이드
Smart Animate: 동일한 이름의 레이어를 찾아 자동 트위닝

Smart Animate — 자동 전환 애니메이션

Smart Animate 조건:
두 프레임에 같은 이름의 레이어 존재
→ Figma가 자동으로 중간 애니메이션 생성

예시: 카드 확대 애니메이션
프레임1: 카드 "Product-Card" (작은 크기, 상단 위치)
프레임2: 상세 화면 "Product-Card" (큰 크기, 전체 화면)
연결: On Click → Navigate To → 전환: Smart Animate

결과: 카드가 매끄럽게 커지며 상세 화면으로 전환
(개발의 Shared Element Transition과 동일한 개념)

설정:
Easing: Ease Out (자연스러운 감속)
Duration: 300ms (표준), 200ms (빠른 반응)

오버레이(Overlay) 프로토타입

모달 다이얼로그 만들기:
1. 모달 프레임 생성 (별도 프레임으로 독립 배치)
2. 배경: 흰색, 둥근 모서리, 그림자
3. 트리거 요소(버튼) 선택 → On Click → Open Overlay → 모달 프레임 선택
4. Position: Center, Background: rgba(0,0,0,0.5) 설정

바텀 시트:
1. 바텀 시트 프레임: 화면 너비, 높이 절반
2. Position: Bottom 설정
3. 닫기 버튼 → On Click → Close Overlay

오버레이 외부 클릭 시 닫기:
Open Overlay 설정 → "Close when clicking outside" 체크

실습 — 3단계 플로우 프로토타입

제작할 화면:
화면1: 로그인 (Login)
화면2: 홈 목록 (Home)
화면3: 상세 페이지 (Detail)

Step 1: 3개 프레임 생성
F → iPhone 14 (390x844) x3 나란히 배치
이름: "Login" / "Home" / "Detail"

Step 2: 각 화면 기본 요소 배치
Login: 이메일 입력 + 비밀번호 입력 + 로그인 버튼
Home: 카드 3개 리스트 (7강 Card 컴포넌트 활용)
Detail: 상단 이미지 + 제목 + 본문 + 뒤로가기 버튼

Step 3: 연결 설정
Login 버튼 → Navigate To → Home (Slide In Left, 300ms)
Home 카드 클릭 → Navigate To → Detail (Smart Animate, 300ms)
Detail 뒤로가기 → Back (Slide Out Right, 300ms)

Step 4: Starting Frame 설정
Prototype 탭 → Flows 섹션 "+" → Login 프레임 선택

Step 5: 미리보기
Ctrl+P → 로그인 버튼 클릭 → 홈 전환 → 카드 클릭 → 상세 → 뒤로가기 순서로 테스트

관련 검색어  ·  피그마 프로토타입, Figma Prototype, 피그마 화면 전환, Smart Animate 피그마, 피그마 오버레이, 피그마 모달, 피그마 플로우