Figma Motion 공부 정리 | 캔버스 안에 타임라인이 생긴다는 게 어떤 의미인지

Config 2026에서 Figma가 여러 발표를 한꺼번에 내놨다. Figma Motion, code layers, Weave 연동 같은 것들인데, 그 중 Motion이 가장 먼저 눈에 걸렸다. 캔버스 안에 타임라인이 생긴다는 건데, 처음엔 기존 프로토타입 기능이랑 뭐가 다른 건지 잘 와닿지 않았다.

문서를 읽어보니 기존 인터랙션 프로토타입과는 결이 좀 달랐다. 화면 전환을 만드는 게 아니라, After Effects나 Jitter 같은 외부 타임라인 도구가 하던 작업을 캔버스 안으로 가져오는 개념에 가까웠다. 그게 무슨 의미인지 조금 더 파보고 싶어서 발표 글을 꼼꼼히 읽어봤다.

1️⃣ 이게 뭐냐?

Figma Motion은 캔버스 안에 타임라인 기반 애니메이션을 만들 수 있는 기능이다. 레이어에 직접 키프레임을 찍는 구조로, 위치·스케일·회전·투명도를 각각 독립적으로 제어할 수 있다. 레이어를 타임라인에서 드래그해서 타이밍을 맞추거나, 페이드·이동·스케일 같은 프리셋을 골라 시작할 수도 있고, 자동 키프레임 녹화 기능도 있다.

특히 눈에 들어온 건 “모션 변수” 개념이었다. 이징 커브나 타이밍 값을 변수로 저장해두면 파일 전체에 일괄 적용할 수 있다고 한다. 색상 토큰처럼 모션 스타일을 시스템 단위로 관리한다는 이야기인데, 같은 이징을 여러 컴포넌트에 반복해서 지정하지 않아도 될 것 같다는 생각이 들었다.

핸드오프 쪽은 CSS, JSON, React+motion.dev 형식으로 코드를 직접 복사할 수 있고, Dev Mode와 연동된다고 한다. 지금까지는 모션 스펙을 전달할 때 영상을 따로 뽑거나 텍스트로 정리해야 했는데, 이 부분이 달라지면 개발자랑 주고받는 방식이 조금 바뀔 것 같다.

2️⃣ 내가 든 생각

가장 흥미로웠던 건 “같은 파일 안에”라는 위치 변화였다. 지금까지 모션 작업은 After Effects나 별도 도구로 빠져나가는 경우가 많았다. 외부 도구로 넘어가면 Figma의 컴포넌트나 변수 정보가 함께 가지 않으니까, 디자인이 조금만 바뀌어도 모션을 다시 만들어야 했다. 같은 파일 안에 있으면 그 연결이 유지될 것 같다.

👉🏻 팀 리뷰 방식도 달라질 것 같다. 모션을 공유할 때 지금은 영상으로 뽑아서 전달하는 경우가 많은데, 타임라인에 직접 타임 기반 주석을 달 수 있다면 “몇 초 시점에서 이 부분이 어색하다”는 식의 구체적인 피드백이 가능해질 것 같다. 지금은 그게 쉽지 않다.

Figma Agent와 연동해서 텍스트 프롬프트로 키프레임을 자동 생성하는 기능도 소개되어 있었다. 문서만으로는 어떻게 동작하는 건지 잘 감이 오지 않았다. “자연스럽게 튀어오르는 느낌”처럼 모션을 언어로 설명하면 키프레임이 만들어지는 건지, 어떤 형태로 가능한 건지 예제를 더 보고 싶었다.

💡 여기서 드는 질문? 모션 변수가 기존 Figma Variables 시스템과 어떻게 연결되는 건지 아직 잘 모르겠다. 색상·타이포그래피처럼 토큰으로 관리하는 것과 이징 커브를 변수로 관리하는 게 같은 레이어의 이야기인지, 아니면 별도로 운용되는 건지가 궁금했다.

⭐️ 마지막으로, 디자이너 관점에서 공부하며 느낀 점

정리해보니 이번 발표의 핵심은 “새 애니메이션 기능”이라기보다 “모션이 디자인과 같은 공간 안에 있게 되는 것”에 가까운 이야기였다. 기능 목록보다 그 위치의 변화가 더 인상적으로 남았다. 문서만 본 입장에서는 실제로 어떻게 느껴질지 아직 알 수 없지만, 지금 단계에서 정리해보면 그게 이번 변화에서 가장 큰 부분처럼 읽혔다.

---

참고 원문: Introducing Figma Motion: Your canvas now has a timeline