피그마는 2026년 6월 24일 미국 샌프란시스코에서 연 연례 컨퍼런스 Config 2026에서 캔버스 안에서 곧바로 애니메이션을 만드는 신규 도구 피그마 모션(Figma Motion)을 공개했습니다. 키프레임과 프리셋, 스프링 물리 효과를 지원하고 데브 모드에서 CSS·JSON·React 코드로 바로 내보낼 수 있어, 별도 툴을 오가며 진행하던 모션 디자인 핸드오프 과정이 크게 줄어들 전망입니다. 상세페이지·랜딩페이지·광고 소재를 만드는 브랜드 실무에도 적지 않은 변화가 예상됩니다.
피그마 모션이란 무엇인가
피그마 모션은 피그마 캔버스 위에서 타임라인 기반으로 애니메이션·화면 전환·3D 트랜스폼을 만드는 기능입니다. 미리 준비된 프리셋 애니메이션을 적용하거나, 키프레임과 베지어 곡선으로 직접 움직임을 설계할 수 있습니다. 원하는 동작을 문장으로 설명하면 피그마 에이전트가 초안 애니메이션을 먼저 만들어주는 기능도 함께 제공됩니다.
현재 모든 요금제에서 오픈 베타로 이용할 수 있습니다.
기존 방식과 무엇이 다른가
지금까지 브랜드 웹사이트나 상세페이지에 들어가는 모션은 애프터이펙트나 로티(Lottie) 같은 외부 툴에서 별도로 제작한 뒤, 디자인 파일과 다시 맞춰보는 과정을 거쳤습니다. 이 과정에서 디자이너의 의도와 실제 구현 사이에 미세한 차이가 생기기 쉬웠고, 수정이 필요할 때마다 파일을 오가는 시간이 들었습니다.
| 구분 | 기존 방식 | 피그마 모션 도입 후 |
|---|---|---|
| 제작 도구 | 애프터이펙트·로티 등 외부 툴 | 피그마 캔버스 안에서 직접 제작 |
| 개발 전달 | 별도 파일·스펙 문서로 전달 | 데브 모드 타임라인에서 CSS·JSON·React 코드로 내보내기 |
| 수정 대응 | 외부 툴 재작업 후 재전달 | 캔버스에서 곧바로 수정 |
코드 레이어까지 통합된 캔버스
이번 Config 2026에서는 모션과 함께 코드 레이어(Code Layers) 기능도 함께 공개됐습니다. 실제로 동작하는 코드를 캔버스 위 레이어로 올려 디자인 레이어와 서로 변환할 수 있는 기능으로, 셰이더 채우기·효과, 생성형 플러그인 등도 같은 캔버스 안에 통합됐습니다. 디자인과 개발이 같은 화면에서 더 가깝게 맞물리는 방향으로 도구가 움직이고 있다는 신호로 볼 수 있습니다.
브랜드 디자인 실무는 무엇이 바뀌나
상세페이지 스크롤 인터랙션이나 광고 배너의 모션 시안을 만들 때, 지금까지는 정적 시안을 먼저 확정한 뒤 별도 툴에서 움직임을 얹는 순서가 일반적이었습니다. 피그마 모션을 쓰면 시안 단계에서부터 실제 움직임을 함께 확인할 수 있어, 클라이언트 컨펌 단계에서 움직이면 어떤 느낌일지를 미리 보여주기가 쉬워집니다. 데브 모드로 코드까지 바로 내보낼 수 있다는 점은 랜딩페이지 제작처럼 디자인과 퍼블리싱이 맞물리는 작업에서 특히 체감될 변화입니다.
지금 점검할 것
- 오픈 베타 체험 — 현재 진행 중인 상세페이지·랜딩페이지 프로젝트에 피그마 모션을 시범 적용해봅니다.
- 정적 시안 → 모션 시안 전환 — 광고 소재·배너 시안을 만들 때 움직임까지 포함한 버전으로 클라이언트에 제안하는 방식을 검토합니다.
- 코드 레이어 확인 — 데브 모드에서 내보낸 코드가 실제 프로젝트 환경(CSS, React 등)과 맞는지 개발 담당자와 미리 확인합니다.
- 외부 툴 의존도 재점검 — 로티·애프터이펙트로 처리하던 작업 중 피그마 안에서 대체 가능한 범위를 정리합니다.
요약
피그마는 2026년 6월 24일 Config 2026에서 캔버스 안에서 애니메이션을 만들고 코드로 바로 내보내는 피그마 모션과 코드 레이어를 공개했습니다. 모든 요금제에서 오픈 베타로 쓸 수 있는 만큼, 상세페이지·랜딩페이지·광고 소재를 만드는 브랜드는 정적 시안과 모션 시안을 함께 검토하는 방향으로 제작 프로세스를 손볼 시점입니다.
자주 묻는 질문
피그마 모션은 언제, 어디서 공개됐나요?
피그마는 2026년 6월 24일 미국 샌프란시스코 모스콘 센터에서 연 연례 컨퍼런스 Config 2026 키노트에서 피그마 모션을 처음 공개했습니다. 딜런 필드 최고경영자가 발표를 진행했습니다.
피그마 모션으로 무엇을 만들 수 있나요?
캔버스 위에서 키프레임과 프리셋, 베지어 곡선, 스프링 물리 효과를 이용해 애니메이션과 화면 전환, 3D 트랜스폼을 만들 수 있습니다. 원하는 움직임을 문장으로 설명하면 피그마 에이전트가 초안을 먼저 만들어주는 기능도 포함됩니다.
코드 레이어는 기존 디자인·개발 핸드오프와 무엇이 다른가요?
코드 레이어는 실제로 동작하는 코드를 캔버스 위 레이어로 올려 디자인 레이어와 서로 변환하는 기능입니다. 별도 파일이나 스펙 문서를 주고받지 않아도 같은 캔버스 안에서 디자인과 코드를 오갈 수 있다는 점이 기존 방식과 다릅니다.
브랜드가 지금 무엇을 준비해야 하나요?
상세페이지·랜딩페이지·광고 소재 제작에 피그마 모션을 시범 적용해보고, 정적 시안 대신 움직임을 포함한 시안으로 클라이언트에 제안하는 방식을 검토하는 것이 우선입니다. 데브 모드로 내보낸 코드가 실제 개발 환경과 맞는지도 함께 확인해야 합니다.