베타 버전으로 공개되어 있는 Figma Motion을 사용해 보았습니다.

덤으로 Figma Shaders도 사용해 보았더니, Figma만으로 간편하게 그래픽적인 애니메이션을 만들 수 있었습니다

Figma Shaders

• GLSL이라는 그래픽 전용 언어로 작성된 프로그램
• GPU를 사용하여 실시간으로 비주얼 이펙트(Visual Effect)를 생성하는 기능

이번에는 Figma Motion에 관한 내용입니다!

디자인 파일에서 벗어나지 않고, Figma의 캔버스 위에서 직접, 정밀하고 프로덕션 환경에 대응하는 애니메이션을 제작할 수 있는 새로운 도구입니다

현재 오픈 베타(Open Beta) 버전으로 제공되고 있습니다.

• 외부 도구나 플러그인을 오가지 않고, 동일한 파일 내에서 모션 디자인을 완결할 수 있음
• 화면 하단에 **전용 「타임라인(Timeline)」**이 표시됨
• 디자인, 드로잉, Dev 모드와 나란히 캔버스 위의 새로운 경험으로서 기능

애니메이션 초보자라도 직관적으로 디자인에 「시간」이나 「움직임」이라는 표현을 도입할 수 있도록 설계되어 있는 듯합니다

Figma Motion으로 할 수 있는 일과 특징을, 실제로 기능을 사용하면서 소개하겠습니다

먼저, 화면 하단의 메뉴에서 Motion을 선택합니다.

그러면 이런 식으로 화면 하단에 타임라인이 표시됩니다.

바로 만져보겠습니다!

키프레임 (Keyframe)

영상의 특정 위치(프레임)에 설정값을 기록하고, 시간축에 맞춰 변화시키는 기능

이 원을 애니메이션 시켜 보겠습니다.

After Effects 등을 다뤄본 적이 있는 분들은 익숙하시겠지만, ◇ 아이콘이 각 프로퍼티(Property)에 붙어 있습니다.

각 프로퍼티의 값을 지정한 상태에서 타임라인의 임의의 위치로 이동하여 ◇를 누르면 키프레임을 찍을 수 있습니다!

영상을 보시는 것이 더 이해하기 쉬울지도 모르겠습니다 ↓

• 0f 지점: Scale 100%
• 400f 지점: Scale 50%
• 800f 지점: Scale 100%

작아졌다가 다시 커지는 애니메이션입니다.

이 영상에서는 Scale을 움직여 보았습니다만, 이런 식으로 다양한 프로퍼티를 시간축에 맞춰 변화시킬 수 있습니다!

집필 시점의 베타 버전 화면을 확인하여 정리했기 때문에, 일부 누락되었거나 향후 변경될 가능성이 있습니다.

타임라인과 키프레임에 대해서는 직접 만져보며 익히는 것과, 어쨌든 대부분의 프로퍼티를 제어할 수 있다는 점을 알아두는 것이 좋다고 생각합니다!

• 각 레이어 / 프로퍼티 (위치, 스케일, 회전, 불투명도 등)를 독립적으로 설정할 수 있음

• 「오토 키(Auto-keyframe)」를 활성화하여 재생 중의 변경 사항을 모두 자동으로 기록하게 하는 것도 가능

• 페이드(Fade), 이동, 스케일 등의 미리 준비된 애니메이션 스타일을 사용하여 즉시 움직임을 추가할 수 있음

• 여러 스타일을 겹쳐서 동시에 재생하거나, 드래그하여 순서대로 재생시키는 것도 가능

오른쪽 메뉴의 Animations에서 다양한 애니메이션 스타일을 지정할 수 있습니다!

애니메이션 종류는 크게 3가지로 나뉩니다.

• Enter

• 페이드 인(Fade-in) 등 오브젝트가 나타나는 듯한 애니메이션

• Cycle

• 루프 애니메이션(Loop Animation), 루프되어도 부자연스럽지 않도록 끝부분 처리도 되어 있음

• Exit

• 페이드 아웃(Fade-out) 등 오브젝트가 사라지는 듯한 애니메이션

이것도 종류가 엄청나게 많습니다!!

직접 만져보시는 것이 가장 좋을 것 같습니다!

• 모션 스타일을 적용한 후에 미세 조정도 가능
• 각 종류 안에서도 Fast, Medium, Slow로 분류되어 있어, 예상하는 애니메이션의 속도감에 따라 선택 가능

Enter - Glide

Cycle - Rotation

Exit - Vanish

• 만들고 싶은 움직임을 프롬프트(Prompt)로 설명하는 것만으로, Figma의 AI 에이전트가 타임라인 상에 실제 키프레임을 구축
• 생성 후, 타임라인 상에서 이징(Easing, 가감속) 등을 수동으로 세밀하게 미세 조정 가능

왼쪽 메뉴의 Agents에서 채팅으로 프롬프트를 던질 수 있습니다.

움직이고 싶은 오브젝트를 지정한 상태에서도 대화가 가능합니다 (복수 선택 가능!)

이번에는 대충 다음과 같이 던져 보았습니다!

위에서 3장이 수직으로 떨어져서, 일단 다 떨어진 뒤에, 다시 아래에서 위로 순서대로 올라오는
스피디한 애니메이션을 만들 수 있어?

오브젝트가 회전하고 있어서 움직임의 축(axis)을 조정해야 했지만,

대화를 조금 나누는 것만으로도 이미지 그대로의 모션 (motion)을 입혀주었습니다.

타임라인 (timeline)을 1부터 구축하는 수고를 덜 수 있어 상당히 강력한 기능!

• 생성한 애니메이션을 「컴포넌트 (component)」로 등록할 수 있음

• 다른 화면이나 파일에서도 일관되게 재사용 가능

• 또한, 이징 (easing)이나 타이밍 (timing)을 「배리어블 (variable)」로 정의할 수 있음

• 다양한 모션 값의 전환이나, 파일 전체의 애니메이션을 일괄 업데이트 가능

로딩 애니메이션 등 여러 페이지에서 재사용하는 애니메이션 관리에

• 타임라인 상의 특정 순간에 대해 타임스탬프가 포함된 코멘트를 남길 수 있음

• 핀포인트로 피드백 가능

• Dev Mode (개발 모드)에서는 애니메이션 코드를 CSS, JSON, React, 또는 motion.dev 형태로 직접 복사할 수 있음

• Figma MCP 서버를 통해 AI 코딩 툴에 완전한 모션 컨텍스트 (easing이나 timing 값 등)를 그대로 전달할 수 있음

마이크로 인터랙션 (micro-interaction) 등의 애니메이션을 그대로 코드로!

사용자 경험을 풍부하게 만들 수 있습니다

• MP4, GIF, SVG, WebM으로 내보낼 수 있음

• 사이즈를 몇 가지 지정할 수 있음

  • 0.5x, 1x, 2x
  • 1920w, 720h, 1080h, 1440h, 2160h

• 프레임 레이트 (frame rate)도 몇 가지 지정할 수 있음

  • 60fps, 30fps, 24fps, 12fps

프레임 레이트 (frame rate)

영상이 1초당 몇 장의 정지 화상 (프레임)으로 구성되어 있는지를 나타내는 수치

수치가 높을수록 영상은 부드러워짐

Figma 내에서 그래픽적인 애니메이션 제작도 완성할 수 있을 것 같다는 가능성을 느꼈습니다!

움직임 템플릿이 있거나 AI에게 지시하여 생성할 수도 있어, 애니메이션을 만들어 본 적이 없는 사람이라도 퀄리티 높은 결과물을 만들 수 있을 것 같습니다

또한, 프로퍼티 이름 (property name)을 제시하거나 오브젝트를 지정하여 프롬프트 (prompt)를 던질 수 있기 때문에, 다른 영상 생성 AI 계열보다 세밀하게 지시하기가 쉽다는 생각이 들었습니다.

관심이 있는 분들은 꼭 한번 시도해 보세요!