Figma Motion 소개: 이제 캔버스에 타임라인이 생겼습니다 | Figma 블로그 (새 탭에서 열림)
Figma는 디자인 캔버스에 타임라인 기반의 네이티브 애니메이션 기능인 **Figma Motion**을 도입했다. 이제 컴포넌트·변수·팀 협업 환경과 애니메이션을 같은 파일에서 다룰 수 있으며, Figma Agent와 Dev Mode를 통해 제작과 핸드오프의 장벽을 낮춘다. 모션을 특정 전문가의 작업이 아니라 디자인 시스템의 일부로 만들겠다는 것이 글의 핵심이다. ## 캔버스에 통합된 애니메이션 작업 - Design, Draw, Dev 모드와 나란히 Motion 모드가 제공된다. - 프레임을 Motion 모드로 전환하면 디자인 옆에 타임라인이 표시된다. - 외부 애니메이션 도구나 플러그인으로 이동하지 않고 같은 파일에서 디자인과 모션을 제작할 수 있다. - 모션에 익숙하지 않은 디자이너도 Figma Agent에 프롬프트를 입력해 애니메이션 아이디어와 개선점을 얻을 수 있다. - 이를 통해 모션 제작을 전문 모션 디자이너만의 업무가 아니라 팀 전체의 작업으로 확장한다. ## 타임라인과 키프레임 제어 - 레이어를 타임라인에서 드래그해 애니메이션의 시작과 지속 시간을 조정할 수 있다. - 플레이헤드를 이동하거나 스크럽해 특정 시점의 결과를 미리 볼 수 있다. - 위치, 크기, 회전, 불투명도를 각각 독립적으로 키프레임화할 수 있다. - 자동 키프레임 기능을 켜면 플레이헤드가 움직이는 동안 변경한 값이 자동으로 기록된다. - 페이드, 이동, 확대·축소 같은 프리셋 애니메이션 스타일을 빠르게 적용할 수 있다. - 여러 스타일을 동시에 겹쳐 실행하거나 타임라인에서 순차적으로 배치할 수 있다. - 사용자 정의 애니메이션 스타일을 만들어 저장하는 기능도 제공될 예정이다. ## 시간 기반 협업과 핸드오프 - 캔버스에 시간 기반 댓글을 남겨 애니메이션의 특정 순간을 직접 지적할 수 있다. - 모션 리뷰에서 “어느 프레임의 어떤 움직임”을 수정해야 하는지 명확하게 전달할 수 있다. - Dev Mode에서도 타임라인과 관련 기능에 접근할 수 있어 개발자와의 협업이 쉬워진다. - 디자인 단계부터 팀 전체가 모션을 검토하므로, 개발 단계에서 뒤늦게 애니메이션을 전달하는 병목을 줄인다. ## 디자인 시스템에 포함되는 모션 - 컴포넌트에 애니메이션을 포함할 수 있으며, 해당 컴포넌트가 다른 화면과 협업자의 파일로 복제될 때 모션도 함께 이동한다. - 모션을 매번 새로 만드는 대신 디자인 시스템의 재사용 가능한 구성 요소로 관리할 수 있다. - 팀이 정의한 모션 원칙과 스타일을 여러 파일에 일관되게 적용할 수 있다. - 결과적으로 모션이 개인의 작업 속도나 전문성에 따라 달라지는 문제를 줄인다. ## 모션 변수와 모드 - 모션 변수에 easing 같은 애니메이션 값을 저장할 수 있다. - 하나의 변수에 여러 모드를 정의해 상황별 애니메이션 동작을 관리할 수 있다. - 페이지 수준에서 모드를 변경하면 해당 변수를 참조하는 모든 애니메이션이 한꺼번에 업데이트된다. - 디자인 토큰처럼 모션의 속도감과 전환 방식을 중앙에서 통제할 수 있다. ## 셰이더 속성의 애니메이션 - 셰이더가 노출하는 속성도 Motion 타임라인에서 키프레임화할 수 있다. - 기존에는 Figma에서 애니메이션화할 수 있는 속성이 제한적이었지만, 이제 슬라이더나 입력 필드로 조정 가능한 셰이더 값까지 시간에 따라 변화시킬 수 있다. - 이를 활용하면 시각 효과와 인터랙션 표현의 범위를 넓힐 수 있다. ## 실용적인 결론 Figma Motion은 애니메이션을 별도 제작·핸드오프 단계가 아닌 디자인 시스템과 협업 과정의 기본 요소로 통합하려는 기능이다. 팀은 컴포넌트와 모션 변수를 함께 정의하고, 타임라인 댓글과 Dev Mode를 활용해 디자인 초기부터 개발자와 움직임을 조율하는 방식으로 활용하는 것이 좋다.