Figmapedia
목록으로 돌아가기
프로토타이핑

스크롤 시 상단에서 검색창이 내려오는 인터랙션을 Figma로 만들고 싶습니다. 어떤 기능으로 구현할 수 있을까요?

오픈카톡방 2026. 3. 7.

Figma의 프로토타이핑 기능만으로는 웹/앱에서 구현되는 복잡하고 동적인 스크롤 기반 인터랙션(예: 스크롤 위치에 따라 요소가 나타나거나 사라지는 등)을 완전히 동일한 로직으로 구현하기는 어렵습니다. Figma는 주로 화면 전환, 오버레이, 간단한 애니메이션에 강점을 가집니다.

하지만, 데모나 녹화용으로 '비슷하게' 구현하는 방법은 있습니다:

1. **`On Drag` 인터랙션:**

* 스크롤 가능한 프레임에 `On Drag` 인터랙션을 걸고, 검색창이 내려오는 상태와 올라가는 상태의 두 가지 베리언트(Variant) 또는 별도의 프레임을 준비합니다.

* 사용자가 스크롤하는 방향에 따라 검색창이 나타나거나 사라지도록 연결할 수 있습니다. 이는 실제 스크롤 로직보다는 사용자의 드래그 동작에 반응합니다.

2. **`After Delay` 또는 `On Click/Tap` + `Smart Animate`:**

* 특정 스크롤 지점에 도달했을 때 자동으로 검색창이 나타나는 것을 시뮬레이션하려면, `After Delay`를 사용하여 일정 시간 후 검색창이 있는 상태로 전환하거나, `On Click/Tap`으로 특정 요소를 클릭했을 때 검색창이 나타나도록 할 수 있습니다.

* 이때 `Smart Animate`를 활용하면 부드러운 전환 효과를 줄 수 있습니다.

**제한 사항:**

* Figma는 실제 스크롤 위치(스크롤 Y값)를 감지하여 특정 동작을 트리거하는 기능을 직접적으로 제공하지 않습니다. 따라서 '스크롤 시 상단에서 검색창이 내려오는' 것과 같은 정교한 스크롤 기반 인터랙션은 완벽하게 구현하기 어렵습니다.

* 더 복잡한 인터랙션이 필요하다면, Figma 프로토타입을 보조하는 다른 툴(예: Principle, ProtoPie)을 고려하거나, 개발자와 직접 소통하여 구현 가능성을 확인하는 것이 좋습니다.