Figma의 최근 업데이트에서 주목할 점은 단순히 기능이 추가됐다는 사실이 아닙니다. 디자인 캔버스가 정적인 화면을 그리는 공간에서, 움직임과 시각 효과를 정의하고 개발과 공유하는 작업 공간으로 확장되고 있다는 점입니다.
그 중심에 있는 기능이 Motion과 Shaders입니다. Motion은 애니메이션을, Shaders는 고급 시각 효과를 Figma 안에서 다루게 합니다. 두 기능 모두 결과물을 “보여주는 것”에 그치지 않고, 팀이 함께 조정하고 구현할 수 있는 형태로 만든다는 데 의미가 있습니다.
Motion: 움직임을 디자인 시스템의 일부로 만들기
Figma Motion은 Figma 안에서 애니메이션, 전환 효과, 3D 변환을 디자인하는 기능입니다. 타임라인, 키프레임, 프리셋을 제공하며, 새 애니메이션을 처음부터 만들거나 기존 디자인 위에 추가할 수 있습니다.1
핵심은 애니메이션을 일회성 연출이 아니라 재사용 가능한 설계 요소로 다룰 수 있다는 점입니다. 컴포넌트에 적용한 애니메이션은 여러 화면과 협업자 파일로 전달되도록 설계됐습니다.1 버튼, 카드, 모달의 움직임도 색상이나 타이포그래피처럼 디자인 시스템의 자산이 될 수 있는 셈입니다.
이렇게 되면 팀이 논의해야 할 대상도 달라집니다. “이 화면이 어떻게 생겼는가”뿐 아니라 “어떤 속도로 나타나고, 어떤 흐름으로 전환되며, 어떤 반응을 주는가”까지 명확히 설계해야 합니다.
AI는 완성품보다 출발점을 만든다
Motion에는 AI도 연결됩니다. Figma 에이전트는 Motion의 초기 애니메이션 초안을 생성할 수 있습니다.1
다만 이를 “AI가 애니메이션을 대신 완성한다”로 이해하면 곤란합니다. 실제 가치는 초안을 빠르게 만들고, 디자이너가 그 위에서 타이밍, 이징, 맥락을 조정할 수 있다는 데 있습니다. 움직임은 브랜드의 톤, 제품의 사용성, 화면의 위계와 맞아야 하기 때문입니다.
즉 AI는 빈 캔버스를 줄여주는 역할에 가깝습니다. 최종 판단은 여전히 사람이 해야 합니다.
개발 핸드오프: 감각적 설명에서 구체적 값으로
Motion이 실무적으로 중요한 이유는 개발 전달 방식까지 포함하기 때문입니다. Dev Mode에서는 Motion의 전체 타임라인을 확인하고 검사할 수 있으며, 타이밍 값, 이징 커브, 키프레임을 읽을 수 있습니다.1
또 애니메이션 코드는 CSS, JSON, React용 형식으로 복사할 수 있습니다.1 MCP와도 호환되어 애니메이션 프레임을 코딩 에이전트에 전달할 수 있습니다.1
이 변화는 핸드오프의 모호함을 줄입니다. 지금까지는 “조금 더 부드럽게”, “자연스럽게 등장하게” 같은 표현에 의존하는 경우가 많았습니다. Motion을 사용하면 시간, 곡선, 키프레임처럼 구현에 가까운 정보로 논의할 수 있습니다.
결과적으로 디자이너와 개발자는 같은 움직임을 두고 더 구체적으로 대화할 수 있습니다.
Shaders: 고급 시각 효과를 캔버스 안으로
Shaders는 빛, 질감, 왜곡 같은 시각 효과를 만드는 기술입니다. 기존에는 그래픽 프로그래밍 지식이 필요한 영역에 가까웠지만, Figma는 이를 디자인 캔버스에서 다룰 수 있는 기능으로 끌어왔습니다.
Figma의 Shaders는 WebGPU 기반의 효과를 활용합니다. 사용자가 원하는 효과를 설명하면 에이전트가 조정 가능한 컨트롤과 함께 생성하는 방식입니다.2 생성된 효과는 레이어를 바꾸는 effect로 쓰이거나, 새로운 재질처럼 fill로 적용될 수 있습니다.1
여기서도 중요한 점은 AI가 고정된 이미지를 만들어 주는 것이 아니라는 점입니다. 조정 가능한 효과와 재료를 만들어 주고, 디자이너가 이를 화면의 맥락에 맞게 다듬는 구조에 가깝습니다.
실무에서는 무엇부터 적용할까
Motion과 Shaders를 모두 도입한다고 해서 모든 화면을 화려하게 만들 필요는 없습니다. 오히려 먼저 해야 할 일은 반복되는 표현을 정리하는 것입니다.
가장 현실적인 출발점은 핵심 컴포넌트의 모션 규칙입니다. 예를 들어 다음과 같은 항목부터 시스템화할 수 있습니다.
버튼 hover와 press 상태
모달과 바텀시트의 등장·퇴장
카드 확장과 접힘
페이지 전환
로딩 또는 상태 변화 애니메이션
이런 움직임을 컴포넌트에 연결해 두면, 화면마다 새로 설명하지 않아도 일관된 경험을 만들 수 있습니다. 개발자에게도 타이밍과 키프레임을 기준으로 전달할 수 있어 구현 과정의 해석 차이를 줄일 수 있습니다.
Shaders 역시 장식용 효과를 많이 넣는 방식보다, 브랜드나 제품 경험에 필요한 재질과 분위기를 정의하는 방향으로 접근하는 편이 좋습니다. 중요한 것은 효과의 강도가 아니라 재사용 가능성과 맥락입니다.
결론: 더 화려한 디자인보다 더 구현 가능한 표현
Figma Motion과 Shaders는 디자인을 더 화려하게 만드는 기능처럼 보일 수 있습니다. 하지만 실무에서의 가치는 “더 구현 가능한 표현”을 만드는 데 있습니다.
Motion은 움직임을 디자인 시스템과 개발 핸드오프의 일부로 만들고, Shaders는 고급 시각 효과를 캔버스 안에서 조정 가능한 재료로 다루게 합니다. 두 기능 모두 디자이너와 개발자가 같은 표현을 더 구체적으로 보고, 논의하고, 구현하도록 돕습니다.
좋은 팀일수록 이 도구를 장식이 아니라 협업 언어로 사용할 것입니다.
1Config 2026: New materials, new tools and a more expressive canvas
2Figma bets on human judgment at Config 2026 while the AI powering its canvas belongs to someone else
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.