Figma Motion 소개: 이제 캔버스에 타임라인이 생겼습니다
모션은 이제 컴포넌트, 변수, 팀과 같은 파일의 캔버스에서 사용할 수 있어, 디자인이 처음부터 생동감을 가질 수 있습니다.
Figma Motion 소개: 이제 캔버스에 타임라인이 생겼습니다공유
고객 스냅샷: Atlassian
Atlassian의 경우, 캔버스 내의 모션은 출시를 방해할 수 있는 장벽을 제거했습니다. “이는 애니메이션 일러스트레이션을 전문가에게 의존하던 작업에서 디자인 시스템의 기능으로 바꿔 줍니다.”라고 수석 제품 디자이너 Alexandra Pereira는 말합니다. “Dev Mode와 타임라인에 코멘트를 남길 수 있는 기능은 원활한 상호작용을 가능하게 합니다.”
모션에 익숙하지 않은 디자이너들을 위해, 에이전트가 기본을 안내합니다. “배너를 애니메이션화할 때, 에이전트에게 무엇이 잘 작동하고 무엇이 잘 작동하지 않았는지에 대한 제안을 요청했습니다.”라고 리드 프로덕트 디자이너 Davy Fung은 말합니다. 리드 모션 디자이너 Maxwell Hathaway는 누구나 모션을 쉽게 이해하고 활용할 수 있게 된다며 “사람들은 물건들이 어떻게 빨리 움직이는지 볼 수 있고, 그 접근성은 사람들이 더 빠르게 취향을 발전시키는 데 도움이 될 것입니다.”라고 말합니다.
모션이 올바르게 구현되면, 디자인에서 가장 표현력이 풍부한 요소 중 하나가 됩니다. 모션은 사용자가 계층 구조를 읽는 방식과 인터랙션에 담긴 의도를 느끼는 방식을 형성합니다. 이처럼 창의적으로 중요한 결정은 처음부터 팀 전체의 의견을 통해 범위를 정하고 수립돼야 합니다.
오늘부터 나머지 디자인이 있는 캔버스에서 모션이 기본으로 통합됩니다. 모션은 더 이상 병목 현상이나 한 사람의 일이 아닙니다. 이제 모든 디자이너는 Figma 에이전트를 통해 새로운 애니메이션 타임라인에서 직접 모션을 제작할 수 있어, 창작의 장벽을 낮추면서 가능성의 한계를 높일 수 있습니다. Dev Mode 액세스 및 기능을 통해 전체 경험의 훨씬 매끄러운 인계가 가능해졌습니다.
디자인 및 애니메이션을 동일한 파일에서 작업하기
곧 제공되는 사용자 정의 애니메이션 스타일은 사용자가 직접 만들고 저장할 수 있게 됩니다.
Design, Draw, Dev Mode와 함께 제공되는 Motion은 캔버스에서 연결된 경험의 최신 레이어입니다. 모든 프레임을 Motion 모드로 전환하면 타임라인이 디자인 옆에 나타납니다.
- 타임라인 제어: 레이어를 드래그하여 타이밍을 조정하고, 스크럽하여 원하는 시점을 미리 확인하세요. 키 프레임 위치, 크기, 회전 및 불투명도를 각각 키프레임으로 설정하세요. 플레이헤드가 움직일 때마다 변경 사항을 기록하려면 자동 키프레임 기능을 활성화하세요. 캔버스의 시간 기반 댓글을 사용하면 애니메이션의 특정 순간을 가리키며 팀 전체를 모션 리뷰에 참여시킬 수 있습니다.
- 애니메이션 스타일: 사전 설정된 애니메이션 스타일(페이드, 이동, 스케일)을 추가하세요. 가장 빠르게 시작할 수 있으며, 캔버스에서 계속 세부 조정을 할 수 있습니다. 타임라인에서 애니메이션 스타일을 겹쳐서 동시에 재생하거나 드래그하여 순서를 지정할 수 있습니다.
이제 캔버스에서 키프레임을 가지게 되어 아토믹 디자인이 아토믹 모션 디자인으로 확장되었습니다. 이는 인터랙티브 세계의 마지막 큰 조각입니다.
고객 스냅샷: Adanna Onuekwusi
제품 디자이너이자 일러스트레이터인 Adanna Onuekwusi는 모션을 항상 작품에 기쁨과 감성을 불러오는 방법으로 삼아왔습니다. 하지만 외부 도구, 브라우저 기반 플러그인, 그리고 Figma를 번갈아 사용해야 하기 때문에 단일 일러스트레이션에 애니메이트 적용하려면 지속적인 맥락 전환이 뒤따랐습니다. 캔버스에서 직접 모션을 사용할 수 있게 되면 이러한 상황이 달라집니다. “모든 것을 한 공간에서 가지는 것은 정말 유용해요.”라고 그녀는 말합니다. “모션 과정을 체계화하여 라이브러리로 게시할 수 있어서, 한 사람이 하는 작업이 다른 사람들이 혜택을 받을 수 있는 것으로 확장됩니다.”
모든 파일을 위한 모션 시스템 구축
좋은 모션은 일회성 애니메이션의 모음이 아닙니다. 이는 한 번 정의되면 모든 곳에 적용되는 가치의 집합입니다. 하지만 대부분의 팀은 시스템을 구축할 장소가 없었기 때문에 모션은 매 스프린트마다 새로 구축되며,그래서 실제로 출시되는 것은 디자인 의도가 아니라, 그때 시간이 있었던 사람의 손길을 반영합니다.
- 애니메이션 컴포넌트: 컴포넌트는 디자인 시스템의 기본 단위이며, 이제 모션도 포함합니다. 컴포넌트에 애니메이션을 한 번만 적용하면, 그 모션은 채우기와 타이포그래피처럼 모든 화면과 모든 팀원의 파일에 함께 반영됩니다.
- 모션 변수: 모션 변수는 애니메이션을 사용자 지정할 수 있게 해줍니다. 이징 변수를 생성하고, 그 변수에 대해 여러 모드를 정의하고, 애니메이션 전반에 걸쳐 이를 적용하세요. 페이지 수준에서 모드를 전환하면 그 변수를 참조하는 모든 애니메이션이 한 번에 업데이트됩니다.
매일 접하는 소프트웨어라면, 단순히 작동하는 것을 넘어 무언가를 느끼게 해야 합니다. 모션은 그것을 생생하게 만드는 또 다른 경로입니다.
셰이더 효과와 모션
셰이더가 노출하는 모든 속성을 이제 모션 타임라인에서 키프레임으로 설정할 수 있습니다. 전통적으로 Figma의 애니메이션 가능한 속성은 제한적이었습니다. 셰이더는 이를 바꿉니다. 슬라이더나 입력 필드로 제어할 수 있는 모든 것을 이제 시간에 따라 키프레임으로 애니메이션화할 수 있습니다.
3D 변환 곧 제공 예정
모션과 3D 변환은 동일한 디자인 결정의 일부입니다. 무언가가 어떻게 움직이는지를 생각한다는 것은, 그것이 공간 속 어디에 존재하는지를 생각하는 것입니다.
3D 변환을 사용하면 프레임, 벡터, 텍스트를 z축 기준으로 회전할 수 있으며, 드래그하는 동안 네이티브 컨트롤과 실시간 미리보기를 제공합니다. 모든 변환은 완전히 편집 가능합니다. 결과는 CSS로 내보낼 수 있으며 MCP를 통해 연결되어, 사용자가 디자인한 공간 구성이 코드에도 그대로 반영됩니다. 3D 변환을 동일 파일 내에서 모션과 결합하여, 이전에는 Figma에서 불가능했던 공간 인터랙션을 프로토타입으로 만들 수 있습니다.
Figma 에이전트를 사용하여 더 나아가세요
모션은 기술적으로 까다롭습니다. 애니메이션 경험이 없는 디자이너도 Figma 에이전트 Starting today, work with an agent that is built for Figma—directly on the canvas.The Figma design agent is here
이미 애니메이션을 다루는 디자이너라면, 반복적인 작업이 대신 처리되므로 작업을 발전시키고 세부 사항을 조율하는 데 집중할 수 있습니다. 이징 곡선이나 타이밍을 조정하고, 속성을 추가하거나, 과감히 다시 만들거나 새롭게 다듬을 수 있습니다. 여러 프롬프트를 동시에 실행할 수 있어 에이전트가 여러 프레임을 처리하는 동안 흐름을 유지할 수 있습니다.
엔터프라이즈 시스템에서는 가이드레일 내에서 생성할 수 있는 능력이 매우 중요합니다. 이는 일관성, 접근성 및 구현 품질을 유지하면서도 속도를 높일 수 있도록 해줍니다.
디자인한 모션을 배포하세요
실제 제품에 적용된 모션은 설계된 것과 정확히 일치하지 않는 경우가 많습니다. 이징과 타이밍처럼 몇 시간 동안 조율한 디테일이 파일과 코드 사이 전환 과정에서 사라집니다. Figma는 전달하기 전에도 그 격차를 메웁니다. 애니메이션된 프레임을 선택하고 파일에서 직접 MP4, GIF, SVG 또는 WEBM으로 내보내 초기 단계에서 의견을 맞추고 피드백을 받을 수 있습니다.
파일이 개발 준비가 되면 Dev Mode로 전환한 뒤 모션 탭을 여세요. 전체 타임라인을 확인하고 세부 정보를 검사할 수 있습니다. 모든 타이밍 값, 이징 곡선 및 키프레임을 개발자의 해석 없이도 읽을 수 있습니다. 사용자는 패널에서 애니메이션 코드를 직접 복사할 수 있으며, CSS, JSON, 프레임워크용 React 그리고 motion.dev 형식으로 제공됩니다.
모션은 MCP와 호환 Figma’s MCP server brings your design decisions into the tools where code gets written—so what gets built actually matches what was designed. Here’s what that unlocks for everyone who builds products.
The TL;DR on MCP: Why context matters and how to put it to work
팀원이 필요한 형식으로 모션을 쉽게 확인하고 변환할 수 있다면, 의도와 출시 사이의 간극이 줄어듭니다.
애니메이션은 더 이상 마지막 단계나 범위 위험이 아닙니다. 모션은 이제 다른 모든 것과 마찬가지로 첫 프레임에서 최종 빌드까지 한 곳에서 디자인 프로세스를 거칩니다.
Motion이 오픈 베타로 제공됩니다. 스타터 사용자는 내보내기가 제한된 모션에 액세스할 수 있습니다. 모든 요금제의 풀 시트 사용자는 모션 프리미티브에 액세스하고 내보내기를 할 수 있습니다. 유료 요금제에서는 전체 디자인 시스템 통합과 모션용 Figma 에이전트를 사용할 수 있습니다.
효과적인 모션 디자인의 원리를 배우고 Figma Motion에서 애니메이션을 직접 만들며 실습해 보세요. 플레이그라운드 파일 에서 직접 모션을 시험해 보거나 도움말 센터에서 시작하세요. 여기에서 등록하여 3D 변환 대기자 명단에 등록하세요.
Figma CEO 겸 공동 창립자인 Dylan Field의 Config 요약을 읽어보세요.
