GIF로 피그마 프로토타 (새 탭에서 열림)

Figma는 2019년부터 프로토타입에서 애니메이션 GIF를 재생할 수 있도록 지원했다. 파일에 GIF를 추가한 뒤 Present를 누르면 움직임이 재생되며, 모션 디자인·영상·미세한 인터랙션을 실제 제품처럼 표현할 수 있다. 편집 화면에서는 GIF가 정지 이미지로 보이지만, 원하는 프레임을 커버 이미지로 지정해 여러 GIF를 쉽게 구분할 수 있다.

프로토타입에서 GIF 사용하기

• Figma 파일에 GIF를 이미지처럼 추가한다.
• Present 모드에서 GIF가 자동으로 애니메이션을 재생한다.
• GIF는 편집 화면에서는 정지 이미지로 표시되고, 프로토타입에서만 움직인다.
• GIF 제작 도구로 ScreenFlow, LICEcap, Principle, After Effects 등이 소개됐다.

커버 프레임 지정

• GIF 속성 패널의 GIF 모달을 열어 원하는 프레임으로 이동할 수 있다.
• 선택한 프레임은 편집 화면에 표시되는 대표 이미지가 된다.
• 첫 프레임이 비어 있거나, 비슷한 시작 화면을 가진 GIF가 여러 개일 때 유용하다.

모바일 프로토타입 개선

• 모바일 프로토타입에는 OS에 맞춘 관성 스크롤이 적용됐다.
• 새로운 터치 커서가 추가되어 실제 모바일 기기와 비슷한 조작감을 제공한다.
• GIF 기능과 함께 모바일 인터랙션의 사실성을 높이는 업데이트다.

GIF를 활용할 수 있는 디자인 사례

• Uber: 애니메이션 스플래시 화면을 로딩 상태와 브랜드 인사말로 활용한다.
• Slack: 로딩 중 제품 팁이나 재미있는 문구를 보여준다.
• Material Design: 선형·원형 진행 표시기로 작업 상태를 단순하게 전달한다.
• Headspace: 온보딩 과정에서 일러스트 애니메이션으로 기능과 사용 맥락을 설명한다.
• Hyperlapse: 동영상 촬영 앱의 사용 시나리오를 온보딩 영상으로 소개한다.
• Mapbox: 웹사이트 히어로 영역에서 위치 기술을 설명하는 반복 영상을 사용한다.
• Mailchimp: 일러스트에 미세한 움직임을 더해 화면에 생동감과 질감을 부여한다.

실용적인 활용 방향

GIF는 복잡한 동영상 구현 없이도 로딩 상태, 온보딩, 진행 표시, 제품 소개, 일러스트 애니메이션을 프로토타입에 포함하는 간단한 방법이다. 다만 편집 화면에서는 정지 이미지로 보이므로 의미 있는 커버 프레임을 설정하고, 실제 사용 환경을 확인하려면 반드시 Present 모드에서 테스트하는 것이 좋다.