Figma가 'Motion'을 베타로 풀었어 — 이제 피그마 안에서 애니메이션까지 끝내

디자인은 피그마, 애니메이션은 따로? 이제 그 '따로'가 사라졌어

자, 핵심부터 말할게. Figma가 6월 24일 Config 2026에서 네이티브 애니메이션 도구 'Figma Motion'을 오픈 베타로 공개했어. 그동안 디자이너들은 피그마로 화면(UI)을 그린 다음, 애니메이션을 입히려면 After Effects나 Principle, ProtoPie 같은 별도 도구로 넘어가야 했어. 디자인과 모션이 두 세계로 쪼개져 있었던 거지. Figma Motion은 그 경계를 없앴어 — 디자인하던 그 캔버스에서 바로 애니메이션을 만들 수 있게 된 거야.

작동 방식이 직관적이야. Motion 모드를 켜면 캔버스 아래에 타임라인이 뜨고, 거기서 키프레임을 찍어 움직임을 만들어. 빠르게 하고 싶으면 미리 만들어진 프리셋 애니메이션을 적용하고, 정교하게 하고 싶으면 베지에 곡선(이징)과 스프링 물리로 자연스러운 움직임을 직접 조율해. UI를 디자인하던 같은 작업 공간에서 모션까지 끝내는 거지.

결과물도 다양하게 뽑혀. MP4, GIF, WEBM, 애니메이션 SVG로 내보낼 수 있고, 결정적으로 Dev Mode에선 CSS·JSON·React 코드로 직접 추출돼. 즉 디자이너가 만든 애니메이션을 개발자가 코드로 그대로 받아 구현할 수 있다는 거야. 디자인→개발 핸드오프에서 늘 골치였던 '애니메이션 명세'가 코드로 자동 정리되는 셈이지. 오픈 베타라 모든 플랜에서 6월 24일부터 점진적으로 풀리고 있어.

오늘 풀 이야기는 이거야. Motion이 정확히 뭘 바꾸는지, 왜 Figma가 지금 이걸 넣었는지, 그리고 디자이너·개발자·경쟁 도구한테 뭐가 달라지는지. 등장인물은 셋이야 — 도구를 만든 Figma, 가장 직접적으로 영향받을 디자이너·개발자, 그리고 시장을 빼앗길 위기의 전용 모션 도구들.

등장인물 — Figma, 디자이너·개발자, 그리고 전용 모션 도구들

먼저 Figma. 웹 기반 협업 디자인 도구의 사실상 표준이야. 그동안 Figma는 'UI 디자인과 프로토타이핑'에 강했지만, 정교한 모션은 약점이었어. 기본 프로토타입 기능으로 간단한 화면 전환은 됐지만, 키프레임 단위의 세밀한 애니메이션은 외부 도구에 의존해야 했지. Config 2026에서 Motion을 내놓은 건 그 마지막 빈칸을 메워 '디자인의 전 과정을 한 도구에서'라는 그림을 완성하려는 수야.

다음은 디자이너와 개발자. 디자이너는 도구를 오가는 마찰에서 해방돼. 피그마에서 디자인하고, 애니메이션을 입히고, 바로 결과를 보는 흐름이 한 곳에서 돌아가니까. 개발자는 핸드오프가 편해져 — 애니메이션을 '말로 설명'하거나 영상으로 받아 추측하는 대신, CSS·React 코드로 정확히 받을 수 있거든. 디자인-개발 사이의 가장 모호했던 영역이 명확해지는 거야.

세 번째는 전용 모션 도구들 — After Effects, Principle, ProtoPie, Rive 같은 거야. 이들은 그동안 'Figma가 못 하는 정교한 모션'을 담당하며 자리를 지켰어. 그런데 Figma가 기본 기능으로 모션을 넣으면, "간단한 건 그냥 피그마에서"가 되면서 이들의 시장 일부가 잠식돼. 물론 고급 영상·캐릭터 애니메이션 같은 영역은 여전히 전용 도구가 우위지만, 'UI 모션'이라는 큰 덩어리를 Figma에 내줄 위기야.

이 셋을 한 문장으로 묶으면 이래. Figma가 디자인의 마지막 빈칸인 모션을 기본 기능으로 채우면서, 디자이너·개발자는 편해지고 전용 모션 도구는 시장을 위협받게 됐다. 이게 뼈대야.

핵심 내용 — 뭐가 들어왔나

기능	내용
타임라인	캔버스 하단에 키프레임 타임라인
애니메이션	키프레임, 프리셋, 베지에 이징, 스프링 물리
내보내기	MP4, GIF, WEBM, 애니메이션 SVG
코드 추출	Dev Mode에서 CSS·JSON·React
출시	오픈 베타, 전 플랜 점진 배포(6/24~)
유료 기능	애니메이션 컴포넌트 발행, AI 모션 생성, 고해상도 영상은 유료 Full seat

표에서 두 가지가 눈에 띄어. 첫째, 무료 베타로 모든 플랜에 풀렸다는 점이야. 기본 키프레임 애니메이션과 내보내기는 누구나 써볼 수 있어. 다만 애니메이션 컴포넌트를 디자인 시스템에 발행하거나, AI로 모션을 자동 생성하거나, 고해상도 영상을 뽑는 고급 기능은 유료 Full seat가 필요해. '맛보기는 무료, 본격 활용은 유료'라는 전형적인 도입 전략이야.

둘째, '코드로 추출된다'는 게 진짜 차별점이야. 단순히 피그마 안에서 애니메이션을 만드는 데 그치지 않고, 그걸 CSS·React로 뽑아 실제 제품에 바로 쓸 수 있게 한 거야. After Effects로 만든 화려한 영상은 결국 개발자가 코드로 '다시 만들어야' 했는데, Figma Motion은 그 재작업을 없애. 디자인과 코드 사이의 거리를 좁히는 게 Figma의 큰 그림이고, Config 2026에서 Code Layers 같은 기능과 함께 나온 것도 같은 맥락이야.

각자의 이득 — 누가 웃나

Figma는 '디자인 전 과정 장악'에 한 발 더 다가가. UI 디자인→프로토타입→모션→코드 추출이 한 도구에서 끝나면, 디자이너가 Figma를 떠날 이유가 줄어. 도구를 오가지 않게 만드는 건 강력한 락인이야. 동시에 '디자인-개발 핸드오프'라는 모두가 아파하던 지점을 해결하며 제품 가치를 키웠어.

디자이너는 생산성과 표현력을 동시에 얻어. 도구 전환 마찰이 사라지고, 디자인 의도를 모션까지 일관되게 표현할 수 있어. 특히 'UI 마이크로 인터랙션'(버튼 눌림, 카드 펼침 같은 작은 움직임)을 만드는 데 딱이야. 이런 건 굳이 After Effects를 켜기엔 과했는데, 이제 피그마에서 바로 처리돼.

개발자도 핸드오프 측면에서 크게 이득이야. 애니메이션 명세를 영상이나 말로 받아 추측하던 시대가 끝나고, CSS·React 코드로 정확히 받을 수 있어. '디자인은 이런데 구현은 다르네' 같은 마찰이 줄어들고, 모션 구현 시간이 단축돼. 디자인-개발 협업의 가장 모호했던 영역이 정량화되는 거지.

과거 유사 사례 — 성공과 실패

비슷한 장면을 우리는 이미 봤어. Figma가 Dev Mode를 넣어 핸드오프를 흡수한 것, FigJam으로 화이트보드 시장을 잡은 것이 대표적이야. Figma의 전략은 일관돼 — '디자인 워크플로우의 인접 영역을 하나씩 기본 기능으로 흡수'하는 거지. 매번 전용 도구(Zeplin, Miro 등)의 시장을 일부 가져왔어. Motion도 같은 공식이야.

성공의 핵심은 '충분히 좋은 통합'이야. 전용 도구만큼 정교하지 않아도, '같은 곳에서 끊김 없이 된다'는 편의가 그 격차를 이겨. 대다수 UI 모션은 화려한 영상이 아니라 간단한 인터랙션이거든. 그 80%를 피그마에서 처리할 수 있으면, 굳이 전용 도구를 켤 이유가 사라져. '완벽함'보다 '통합의 편의'가 이기는 전형적 사례야.

실패의 위험도 분명해. 베타 단계의 성능·안정성이 받쳐주지 않으면 오히려 역효과야. 모션은 미세한 타이밍과 부드러움이 생명인데, 도구가 버벅이거나 표현이 제한적이면 디자이너는 결국 전용 도구로 돌아가. 또 고급 영상·캐릭터 애니메이션 영역은 여전히 전용 도구가 압도적이라, Figma가 그 경계를 넘으려 무리하면 '어중간한 도구'가 될 위험도 있어.

그런데 Motion을 '기능 하나'가 아닌 것으로 만드는 건 코드 추출이야. 수년간 디자인-개발 경계에서 가치가 가장 많이 새던 지점이 바로 모션이었어 — 멋진 프로토타입이 핸드오프 문서에선 "살짝 통통 튀게 해주세요"로 쪼그라들고, 개발자는 눈대중으로 타이밍을 다시 만들었지. Figma Motion의 CSS·React 추출이 '참고'가 아니라 '그대로 쓸' 만큼 충실하다면, 재작업과 의사소통 오류의 한 범주 전체를 없애버려. 이건 애니메이션 도구 자체보다 더 큰 의미야. 한 직무 안에 능력을 더하는 게 아니라, 두 직무 사이의 '이음새'를 공략하는 거니까. 추출된 코드가 프로덕션급이냐 출발점에 그치냐가, 이 약속이 얼마나 실현되는지를 가르는 디테일이야.

경쟁자 카운터 플레이 — 다음 수는

**Adobe(After Effects)**는 고급 영상·VFX라는 깊은 해자로 버텨. UI 마이크로 인터랙션을 Figma에 일부 내주더라도, 영화·광고급 모션 그래픽에선 여전히 압도적이거든. Adobe는 '전문가용 고급 기능'으로 차별화하면서, 자사 디자인 도구(XD 후속, Express 등)에 AI 모션을 강화하는 식으로 응수할 가능성이 커.

Rive·ProtoPie 같은 전문 인터랙션 도구는 'Figma보다 더 정교하고 코드 친화적인 모션'으로 틈새를 지켜. 특히 Rive는 런타임 애니메이션(앱에서 실시간으로 도는 인터랙티브 모션)에서 강점이 있어서, Figma의 '디자인 단계 모션'과는 결이 달라. 이들은 '전문성 심화'로 차별화 라인을 그어.

스타트업·신생 도구들은 'AI 네이티브 모션 생성'으로 승부를 걸 거야. "텍스트로 설명하면 애니메이션이 나온다"는 식의 AI 우선 접근이지. Figma도 AI 모션 생성을 유료 기능으로 넣었지만, 이 영역은 아직 초기라 신생 도구가 더 과감한 실험으로 틈을 노릴 수 있어.

그래서 뭐가 달라지는데

디자이너라면 — 지금 Figma Motion 베타를 켜보고, 평소 외부 도구로 만들던 UI 인터랙션을 피그마에서 직접 만들어봐. 간단한 마이크로 인터랙션은 충분히 처리될 가능성이 높아. 다만 고급 영상·캐릭터 애니메이션은 여전히 전용 도구가 나을 수 있으니, 작업 성격에 따라 도구를 나눠 쓰는 게 현실적이야.

개발자라면 — 디자이너가 Figma Motion으로 만든 애니메이션을 Dev Mode에서 CSS·React로 받아보는 흐름을 팀에 도입해봐. 애니메이션 핸드오프의 모호함이 크게 줄어들 거야. 다만 추출된 코드를 그대로 쓸지, 참고만 할지는 프로젝트 구조에 따라 판단해야 해.

디자인 팀 리더라면 — 도구 스택을 점검할 때가 됐어. Figma Motion이 충분하면 별도 모션 도구 라이선스를 줄여 비용을 아낄 수 있어. 다만 베타 단계라 안정성을 검증한 뒤 결정하는 게 안전해. 핵심 작업의 일부를 베타에 의존하기 전에 충분히 테스트해.

🥄 남은 궁금증 세 가지

— 이제 After Effects 안 써도 돼? 경우에 따라 달라. 간단한 UI 마이크로 인터랙션은 Figma Motion으로 충분할 가능성이 커. 하지만 영화·광고급 모션 그래픽이나 복잡한 캐릭터 애니메이션은 여전히 After Effects 같은 전용 도구가 압도적이야. '작업의 무게'에 따라 나눠 쓰는 게 현실적이야.

— 무료야? 기본 기능은 오픈 베타로 모든 플랜에서 무료로 써볼 수 있어. 다만 애니메이션 컴포넌트 발행, AI 모션 생성, 고해상도 영상 내보내기 같은 고급 기능은 유료 Full seat가 필요해. '맛보기 무료, 본격 활용 유료' 구조야.

— 추출된 코드 그대로 써도 돼? 프로젝트마다 달라. CSS·React로 추출되는 건 핸드오프엔 큰 도움이지만, 실제 코드베이스 구조나 성능 요구에 따라 그대로 쓸지 참고만 할지는 개발자가 판단해야 해. 자동 생성 코드는 늘 검토가 필요하다는 점은 기억해.

참고 자료

• What's new from Config 2026 — Figma Learn
• Figma Launches Code Layers & Motion at Config 2026 — CMSWire
• Figma Config 2026: Motion, Code Layers and AI Tools Explained — Magicshot
• Figma Finally Added Native Motion Design: A Full Guide — Medium
• Figma Config 2026: Code Layers, Motion, AI Agents Explained — Dragdropship

수치는 발표 시점 기준이라 바뀔 수 있어.