프로토타이핑 위크의
Figma는 프로토타입이 실제 제품처럼 반응하도록 다양한 사용자 입력 기반의 **Interactions** 기능을 공개했다. 클릭·호버·누르기뿐 아니라 마우스 진입/이탈과 누름·해제, 일정 시간 후 전환까지 지원해 사용자 테스트의 현실성을 높인다. 또한 Prototyping Week 동안 가로형 디바이스 프레임, 외부 URL 연결, 뒤로 가기 전환도 함께 출시했다. ## 사용자 입력에 반응하는 Interactions - Figma에서 지원하는 상호작용은 다음과 같다. - **On Click**: 클릭 시 화면이나 상태 전환 - **While Hovering**: 마우스를 올리고 있는 동안 상태 변경 - **While Pressing**: 누르고 있는 동안 눌림 상태 표시 - **Mouse Enter / Mouse Leave**: 마우스가 영역에 들어오거나 나갈 때 동작 - **Mouse Down / Mouse Up**: 마우스 버튼을 누르는 순간과 놓는 순간의 동작 - **After Delay**: 지정한 시간이 지나면 자동 전환 - 디바이스 프레임을 선택한 경우 일부 상호작용은 모바일 환경에 맞춰 **On Tap, Touch Down, Touch Up**으로 표시된다. ## 버튼 상태와 메뉴 동작 구현 - **On Click**, **While Hovering**, **While Pressing**은 버튼이나 목록 항목의 상태를 표현하는 데 유용하다. - 예를 들어 메뉴 항목에 마우스를 올리면 배경색을 바꾸어 실제 웹 UI의 호버 상태를 재현할 수 있다. - **Mouse Enter**와 **Mouse Leave**를 사용하면 드롭다운 메뉴처럼 더 세밀한 동작을 구현할 수 있다. - Mouse Enter로 메뉴를 열면 사용자가 다른 상호작용을 수행할 때까지 메뉴가 열린 상태를 유지하도록 만들 수 있다. - 이러한 기능은 단순한 화면 연결을 넘어, 실제 제품의 입력 피드백과 상태 변화를 프로토타입에 반영한다. ## After Delay를 활용한 자동 전환 - **After Delay**는 특정 시간이 지나면 자동으로 다음 화면으로 이동시킨다. - 알림 표시, 자동 리디렉션, 일정 시간이 지난 뒤 나타나는 화면 등을 표현할 수 있다. - 이 전환은 특정 하위 레이어가 아니라 프레임 전체와 연결되므로, 한 화면에서 다른 화면으로만 설정할 수 있다. ## Prototyping Week의 추가 출시 기능 ### 가로형 디바이스 프레임 - 기존 발표용 디바이스 프레임 기능을 가로 방향 화면에도 적용할 수 있게 했다. - 모바일 가로 화면이나 태블릿처럼 sideways로 보는 디자인을 실제 기기 형태에 가깝게 보여준다. ### Clickable URLs - 프로토타입 프레임에서 외부 웹사이트나 다른 Figma 파일로 연결되는 링크를 만들 수 있다. - 예를 들어 발표 자료 마지막 화면에서 개인 웹사이트나 포트폴리오로 바로 이동시킬 수 있다. ### Back Transitions - 사용자가 이전 화면으로 돌아갈 수 있는 뒤로 가기 전환을 제공한다. - 하나의 화면이 여러 경로에서 접근되더라도 화면을 복제하거나 경로별 전환을 따로 만들 필요가 없다. - 현재 프레임으로 이동할 때 애니메이션 전환을 사용했다면, 뒤로 갈 때 해당 애니메이션이 역방향으로 재생된다. ## 향후 방향 - Figma 팀은 추가 프로토타이핑 기능을 개발 중이며, 당시 커뮤니티에서는 특히 **오버레이(Overlays)** 기능에 대한 요구가 많았다. - Figma는 사용자 의견과 리서치를 바탕으로 프로토타이핑 기능의 우선순위와 형태를 발전시키고자 했다. 실무에서는 기본 화면 이동만 연결하기보다 호버·눌림·드롭다운·자동 전환을 함께 구성하는 것이 좋다. 이를 통해 실제 사용 흐름에 가까운 프로토타입을 만들고, 개발 전에 인터랙션과 사용자 경험을 더 정확하게 검증할 수 있다.
원문 읽기(새 탭에서 열림)