스마트 애니메이트와 같은 주요 (새 탭에서 열림)

Figma는 사용자 요청이 많았던 고급 프로토타이핑 기능으로 Smart Animate와 Drag를 출시했다. Smart Animate는 유사한 객체를 자동으로 애니메이션화하고, Drag는 사용자의 손가락 드래그에 따라 전환을 제어한다. 기능 설계 과정에서는 사용자 피드백을 수집하고 다양한 사례에서 공통 패턴을 도출한 뒤, 기존 Figma 기능과 자연스럽게 통합하는 데 초점을 맞췄다.

사용자 불편에서 출발한 기능 설계

• Figma는 인앱 NPS 설문과 고객 지원 피드백을 통해 프로토타이핑 관련 요구를 지속적으로 수집했다.
• 사용자들이 원한 것은 복잡한 애니메이션보다는 다음과 같은 일상적인 인터랙션이었다.
  • 드롭다운 메뉴
  • 버튼 호버 효과
  • 팝업의 부드러운 등장과 전환
  • 탭 전환
  • 화면 간 자동 애니메이션
  • 드래그·슬라이드 기반 전환
• NPS 점수 자체보다, 사용자가 실제로 겪는 불편과 원하는 작업 방식을 파악할 수 있는 개방형 피드백 채널이라는 점에 의미를 뒀다.
• 초기 피드백을 제공한 사용자 중 일부는 Smart Animate의 첫 베타 사용자로 참여했다.

다양한 사례에서 공통 패턴 도출

• 특정 사례 하나만 기준으로 기능을 설계하면 활용 범위가 제한될 수 있으므로, 고객 사례와 일상적인 인터랙티브 인터페이스를 폭넓게 조사했다.
• 그 결과 첫 출시에서 지원할 핵심 패턴을 두 가지로 정리했다.

화면은 유지되고 객체만 변하는 경우

• 사용자는 같은 화면에 머물지만 특정 객체가 나타나거나 사라지거나 형태를 바꾼다.
• 예시는 다음과 같다.
  • 동영상에 마우스를 올렸을 때 재생 바가 나타나는 경우
  • 내비게이션 항목에 마우스를 올렸을 때 드롭다운이 펼쳐지는 경우
  • 객체를 스와이프해 제거하면 뒤의 콘텐츠가 나타나는 경우

일부 UI는 고정되고 주요 콘텐츠가 바뀌는 경우

• 탭 내비게이션처럼 일부 요소는 고정된 채 화면 대부분의 콘텐츠가 전환된다.
• 콘텐츠를 좌우로 드래그하면 콘텐츠가 이동하고, 탭 표시기는 반대 방향으로 움직이는 등 더 복잡한 애니메이션을 구현할 수 있다.

Figma에 맞는 방식으로 통합

• Figma는 유사한 문제를 해결한 다른 도구들을 참고하되, 새로운 기능이 기존 프로토타이핑 기능과 자연스럽게 연결되어 “Figma답게” 느껴지도록 설계했다.
• 이를 위해 기존 기능도 다시 검토했다. 특히 객체와 레이어를 자동으로 연결해 애니메이션하는 기본 동작을 개선했다.
• Smart Animate는 별도의 복잡한 설정 없이도 가능한 한 자동으로 작동하도록 설계됐다.
• 레이어의 자동 이름 지정 및 변경 방식을 수정해, 다음 조건이 맞는 객체들이 서로 대응되도록 했다.
  • 레이어 계층 구조
  • 레이어 이름
  • 객체의 순서
• 이러한 기준으로 대응되는 레이어는 화면 전환 시 자동으로 애니메이션된다.
• 겉보기에는 단순한 레이어 이름 개선처럼 보이지만, 기존 동작과 새 기능을 안정적으로 연결하기 위해 많은 설계와 구현 작업이 필요했다.

Smart Animate와 Drag의 역할

• Smart Animate
  • 서로 대응되는 유사 객체를 자동으로 찾아 전환 애니메이션을 적용한다.
  • 기존 전환 기능을 개선하고, 드롭다운·탭·호버·화면 전환 등 다양한 인터랙션을 표현할 수 있게 한다.
• Drag
  • 사용자의 손가락이나 포인터 드래그를 전환의 입력으로 사용한다.
  • 단순히 클릭하면 전환되는 프로토타입보다 실제 앱의 제스처에 가까운 상호작용을 구현할 수 있다.

Figma의 접근 방식은 기능을 많이 추가하는 데 그치지 않고, 실제 사용자 불편을 수집한 뒤 공통 패턴으로 추상화하고 기존 작업 흐름에 자연스럽게 녹여내는 것이었다. 유사한 전환을 만들 때는 레이어의 이름·계층·순서를 일관되게 관리하고, Smart Animate와 Drag를 활용하면 별도 도구 없이도 개발자에게 전달할 수 있는 인터랙션 프로토타입을 만들 수 있다.