화면마다 애니메이션의 속도와 길이를 새로 맞추면 같은 제품 안에서도 움직임이 달라질 수 있습니다. 이번 업데이트에서는 진행 시간과 이징 등을 애니메이션 스타일로 저장하고 여러 디자인에 적용할 수 있습니다. 이징은 움직임이 시작하고 멈출 때 속도가 변하는 방식입니다.

변수에 연결한 속성을 스타일에 담고, 여러 스타일을 조합해 하나의 패턴으로 재사용할 수도 있습니다. 라이브러리에 게시하면 다른 파일에서도 팀이 정한 스타일을 가져다 쓸 수 있습니다.

예를 들어 알림이 나타나는 움직임과 카드가 전환되는 움직임에 각각 이름과 기준을 정해 두는 식입니다. 디자이너가 화면을 추가할 때 공통 규칙을 적용하기 쉬워집니다.

텍스트 레이어 전체뿐 아니라 글자, 단어, 줄 단위로 애니메이션을 적용할 수 있습니다. 움직임을 넣은 뒤에도 텍스트는 편집 가능한 상태로 남습니다. 문구가 바뀌는 타이틀이나 프로모션 화면에서 활용할 수 있는 변화입니다.

Lottie는 웹과 앱에서 재생할 수 있는 데이터 기반 애니메이션 형식입니다. 개발자는 파일의 색상이나 재생 속도 등을 조정할 수 있습니다. dotLottie는 애니메이션과 이미지·글꼴 등의 자산을 압축해 담는 형식입니다.

모든 Figma 효과가 그대로 옮겨지는 것은 아닙니다. 공식 내보내기 안내에 따르면 셰이더와 비디오 등은 지원하지 않으며, 그림자·노이즈·유리 효과는 일부만 지원합니다. 피그마도 실제 제품에서 사용할 Lottie 플레이어로 결과를 시험해 보라고 안내합니다.

따라서 제품에 적용할 움직임이라면 작업 초기에 내보내기 형식을 정하고, 핵심 효과가 유지되는지 확인하는 편이 좋습니다.

Motion은 현재 오픈 베타이며, 디자인 파일의 편집 권한이 있으면 모든 요금제에서 사용할 수 있습니다. 베타 기간에는 기능과 성능이 달라질 수 있습니다.