피그마 프로토타이핑

피그마(Figma)의 프로토타이핑 기능은 디자인된 화면들을 연결하여 실제 서비스처럼 동작하는 인터랙티브 시뮬레이션을 만드는 도구다. 우측 패널의 Prototype 탭에서 디바이스 설정, 배경색, 플로우 관리를 할 수 있으며, 모든 연결된 프레임은 반드시 하나의 페이지 안에 있어야 한다.

프레임에서 연결 핸들을 드래그해 다른 프레임으로 이어주면 화살표 연결선이 생기고 인터랙션 설정 팝업이 나타난다. 트리거는 On tap/click(선택), On drag(드래그), While hovering(호버), While pressing(누르는 동안), Key/gamepad(키 입력), Mouse enter/leave, Touch down/up, After delay 등 다양하게 설정할 수 있다. 액션은 Navigate to(화면 이동), Change to(상태 변경), Open overlay(현재 화면 위에 겹침), Swap overlay, Close overlay, Back, Scroll to, Open link 등을 지원한다.

애니메이션은 Instant(없음), Dissolve, Smart animate, Move in/out, Push, Slide in/out 등을 선택할 수 있고 easing과 지속 시간을 ms 단위로 설정한다. Flow starting point 기능으로 여러 플로우를 한 페이지 내에서 관리할 수 있으며, Overflow scrolling 옵션으로 스크롤 가능 영역을 지정할 수 있다. GNB처럼 상단에 고정된 요소가 있을 때는 Scroll to의 Y-Offset으로 스크롤 도착 위치를 보정해야 콘텐츠가 가려지지 않는다.

핵심 내용

  • 모든 프레임은 단일 페이지 내에 있어야 프로토타입 연결이 가능
  • 디바이스 설정(모바일/PC)에 따라 On tap과 On click이 전환됨
  • Open overlay: 팝업·바텀시트 구현에 사용, "Add background behind overlay"로 딤 효과 추가
  • Swap overlay: 같은 컴포넌트의 상태 변경(예: 탭 선택 전환) 구현
  • Smart animate: 이름이 같은 레이어를 자동으로 연결해 모션 구현
  • Flow starting point로 여러 플로우를 하나의 파일에서 관리 가능

관련 개념

출처

최종 업데이트: 2026-04-06 | 출처 1개