인터랙션과 애니메이션 — 살아있는 UI 만들기

스크롤 프로토타입

스크롤 가능한 프레임 만들기:
1. 프레임 생성 → Prototype 탭
2. Overflow Scrolling: Vertical Scrolling 선택
3. 내부 콘텐츠를 프레임 높이보다 길게 배치
   (프레임: 844px, 콘텐츠: 1500px)
4. Clip Content 체크: 프레임 밖 콘텐츠 숨김

고정 헤더(Sticky Header):
1. 헤더 요소 선택
2. Prototype 탭 → "Fix Position When Scrolling" 체크
3. 미리보기에서 스크롤 시 헤더 고정 확인

고정 하단 탭 바:
동일하게 하단 탭 바에 Fix Position 적용
Position: 프레임 하단에 붙여 배치

After Delay — 스플래시 및 자동 슬라이더

스플래시 화면 자동 전환:
1. 스플래시 프레임에서 Prototype 탭
2. Interaction: After Delay → 2000ms
3. Action: Navigate To → 온보딩 또는 홈 프레임
4. Animation: Dissolve, Duration: 500ms

자동 슬라이더 (캐러셀):
1. 슬라이드 3개 프레임 생성
2. 각 슬라이드에서 After Delay → 3000ms → 다음 슬라이드
3. 마지막 슬라이드 → After Delay → 첫 슬라이드 (루프)
4. Animation: Move In (Left 방향)

결과: 자동으로 돌아가는 배너 슬라이더 프로토타입 완성

Easing 커브 — 자연스러움의 차이

Easing	느낌	사용 시점
Linear	일정 속도 (기계적)	거의 안 씀 — 자연스럽지 않음
Ease In	느리게 시작, 빠르게 끝	화면 나가는 애니메이션
Ease Out	빠르게 시작, 느리게 끝	화면 들어오는 애니메이션 (가장 자주 사용)
Ease In Out	느리게 시작, 빠르게, 느리게 끝	요소 위치 이동, 크기 변환
Spring	탄성 효과	모달 팝업, 알림 배지, 재미있는 인터랙션
Custom	베지어 커브 직접 설정	특수한 브랜드 모션 표현

Material Design 가이드라인: 요소가 화면으로 들어올 때 Ease Out(감속), 나갈 때 Ease In(가속). 이 원칙만 지켜도 애니메이션이 훨씬 자연스러워집니다.

Variables — 상태 기반 인터랙션

Variables란:
Figma에서 값을 저장하고 조건부로 다른 동작을 하게 만드는 기능
(2023년에 추가된 고급 기능)

Variable 종류:
Boolean: true/false (켜짐/꺼짐)
Number: 숫자 (카운터, 슬라이더 값)
String: 텍스트 (이름, 상태 메시지)
Color: 색상값 (다크모드 색상 전환)

생성 방법:
로컬 Variables 패널(Ctrl+Alt+B) → "+" → 타입 선택

다크모드 토글 구현:
1. Boolean Variable "isDark" 생성, 기본값: false
2. 배경색 레이어 선택 → Fill → Variable 연결
   isDark=false: #ffffff, isDark=true: #1e293b
3. 토글 버튼 → On Click → Set Variable → isDark = !isDark
결과: 버튼 클릭마다 라이트/다크 전환

실습 — 스크롤 피드 + 스플래시 + 다크모드 토글

Step 1: 스플래시 화면
F → 390x844 "Splash"
로고 + 브랜드명 중앙 배치
After Delay 2000ms → Navigate To "Home" → Dissolve 500ms Ease Out

Step 2: 스크롤 가능한 피드
F → 390x844 "Home"
Prototype 탭 → Vertical Scrolling
내부 콘텐츠: 1600px 길이 카드 리스트 배치
헤더(64px) → Fix Position When Scrolling 체크
하단 탭 바(56px) → Fix Position When Scrolling 체크

Step 3: 다크모드 토글
Ctrl+Alt+B → Boolean Variable "isDark" 생성
헤더 배경, 카드 배경, 텍스트 색에 Variable 연결
토글 아이콘 버튼 → On Click → Set Variable isDark = !isDark
프리뷰에서 토글 클릭 → 전체 색상 즉시 전환 확인

Step 4: 전체 플로우 연결
Starting Flow: Splash → (자동) Home → 카드 클릭 → Detail

관련 검색어  ·  피그마 스크롤 프로토타입, 피그마 Variables, 피그마 다크모드 토글, Figma After Delay, 피그마 Easing, 피그마 고정 헤더, 피그마 인터랙션 고급