프로토타이핑

프로토타입 페이지 이동 내비게이션

피그마 오픈카톡방2026. 3. 7.

질문사항

클라이언트가 Figma 프로토타입에서 페이지별로 이동할 수 있는 내비게이션 기능을 요청했습니다. 특정 페이지를 클릭하면 해당 페이지로 바로 이동하도록 구현하는 방법이 있을까요?

클라이언트의 요청은 프로토타입 내에서 페이지 간 이동을 쉽게 할 수 있는 내비게이션 기능을 구현하는 것으로 보입니다. Figma의 프로토타이핑 기능을 활용하여 다음과 같이 구현할 수 있습니다:

내비게이션 컴포넌트 생성:

좌측에 페이지 목록을 보여줄 내비게이션 바를 디자인합니다. 각 페이지 이름은 버튼 형태로 만듭니다.

이 내비게이션 바를 컴포넌트로 만듭니다. 만약 페이지 수가 많아 토글이 필요하다면, 컴포넌트 세트(Component Set)와 베리언트(Variants)를 사용하여 '닫힘/열림' 상태를 만들 수 있습니다.

인터랙션 연결:

각 페이지 버튼(예: '페이지 1', '페이지 2' 등)에 인터랙션을 추가합니다.

`On Click` 트리거를 선택하고, `Navigate To` 액션을 사용하여 해당 페이지(프레임)로 연결합니다.

애니메이션 효과(예: Instant, Smart Animate, Dissolve)를 선택하여 전환 효과를 줄 수 있습니다.

모든 페이지에 적용:

만든 내비게이션 컴포넌트의 인스턴스를 모든 프로토타입 페이지(프레임)에 배치합니다.

각 페이지의 인스턴스에서 해당 페이지로 이동하는 버튼은 `Navigate To`로 연결하고, 다른 페이지로 이동하는 버튼은 해당 페이지로 연결합니다.

팁:

페이지 수가 매우 많다면, 모든 버튼을 수동으로 연결하는 것은 번거로울 수 있습니다. 이 경우, 섹션(Section) 기능을 활용하여 관련 페이지들을 그룹화하고, 섹션 내에서만 내비게이션을 구현하는 것도 고려해볼 수 있습니다.

Figma의 'Sticky' 기능을 사용하여 내비게이션 바가 스크롤 시에도 고정되도록 설정할 수 있습니다.