figma-motion

Config 2026: 새로운 소재, 새로운 도구, 더욱 표현력 있는 캔버스 | Figma 블로그 (새 탭에서 열림)

Figma Config 2026의 핵심 방향은 캔버스를 단순한 디자인 작업 공간이 아니라 코드·모션·셰이더·생성형 플러그인 등을 함께 다루는 창작 환경으로 확장하는 것이다. Figma는 AI가 작업의 진입장벽은 낮췄지만 창작의 한계를 넓히는 것은 결국 디자이너와 크리에이터의 몫이라고 강조한다. 이를 위해 디자인과 코드의 경계를 없애고, 더 풍부한 표현과 협업을 캔버스 안에서 가능하게 하려 한다. ## 디자인 캔버스의 확장 - Figma는 이미지, 벡터, 디자인 레이어뿐 아니라 코드와 모션도 디자인 재료로 취급하려 한다. - 코드·모션·셰이더·생성형 플러그인·Weave 도구를 하나의 캔버스에서 조합하는 것이 이번 Config의 주요 방향이다. - 캔버스는 결과물이 저장되는 장소를 넘어, 아이디어를 연결하고 동료와 함께 반복적으로 발전시키는 협업 공간으로 정의된다. - AI가 창작의 진입장벽을 낮췄다면, 더 높은 수준의 창의성과 과감한 시도는 사용자가 만들어야 한다는 관점을 제시한다. ## 코드 레이어로 디자인과 개발 통합 - 기존의 “디자인 대 코드”라는 구분은 인위적인 논쟁이며, 코드는 이미지나 벡터와 같은 디자인 재료라는 것이 Figma의 주장이다. - Figma Design의 모든 디자인 레이어를 클릭 한 번 또는 프롬프트로 인터랙티브한 코드 레이어로 변환할 수 있다. - 코드 레이어를 복제해 여러 구현 방향을 나란히 비교하고 탐색할 수 있다. - 일반적인 Figma 캔버스처럼 팀원이 같은 파일에서 코드를 수정하고, 의견을 남기고, 반복 작업을 진행할 수 있다. - 코드로 만든 결과물을 다시 편집 가능한 디자인 레이어로 추출할 수 있다. - 디자인 레이어를 수정한 뒤에는 한 번의 클릭으로 변경 사항을 코드 레이어에 반영할 수 있어 디자인과 구현 사이를 양방향으로 오갈 수 있다. - 코드 레이어의 얼리 액세스는 7월부터 시작될 예정이며, 베타 대기자 등록을 통해 참여할 수 있다. ## Figma Motion으로 디자인에 움직임 추가 - Figma Design 안에 타임라인 기반의 모션 제작 기능이 추가된다. - 키프레임과 프리셋을 사용해 처음부터 애니메이션을 만들거나, 기존 디자인에 모션을 덧입힐 수 있다. - Figma agent를 이용해 애니메이션의 초기 시안을 생성할 수도 있다. - 모션 디자이너에게는 반복적인 작업을 줄이고, 창의적인 표현에 더 집중할 수 있는 환경을 제공한다. - 애니메이션을 컴포넌트에 한 번 정의하면 여러 화면과 협업자의 파일에서 디자인 시스템의 일부처럼 재사용할 수 있다. ## 모션과 개발 도구의 연결 - Dev Mode에서는 전체 타임라인을 확인하고 검사할 수 있다. - 각 키프레임, 타이밍 값, 이징 곡선을 별도의 해석 없이 읽을 수 있다. - 애니메이션 코드를 CSS, JSON 또는 React 프레임워크용 코드로 직접 복사할 수 있다. - MCP와 호환되므로 애니메이션이 적용된 프레임을 코딩 에이전트로 전달해 구현할 수 있다. - 결과물은 MP4, WebM, Animated SVG, GIF 등으로 내보낼 수 있으며, 향후 더 많은 포맷이 추가될 예정이다. Figma Config 2026은 디자인·개발·모션을 별도 도구로 분리하기보다 하나의 협업 캔버스에서 연결하려는 흐름을 보여준다. 특히 코드 레이어와 Figma Motion은 디자이너가 구현 가능성을 즉시 실험하고, 개발자는 디자인 의도와 애니메이션 세부 정보를 정확히 확인하도록 돕는 기능으로 볼 수 있다.

Figma Motion 소개: 이제 캔버스에 타임라인이 생겼습니다 | Figma 블로그 (새 탭에서 열림)

Figma는 디자인 캔버스에 타임라인 기반의 네이티브 애니메이션 기능인 **Figma Motion**을 도입했다. 이제 컴포넌트·변수·팀 협업 환경과 애니메이션을 같은 파일에서 다룰 수 있으며, Figma Agent와 Dev Mode를 통해 제작과 핸드오프의 장벽을 낮춘다. 모션을 특정 전문가의 작업이 아니라 디자인 시스템의 일부로 만들겠다는 것이 글의 핵심이다. ## 캔버스에 통합된 애니메이션 작업 - Design, Draw, Dev 모드와 나란히 Motion 모드가 제공된다. - 프레임을 Motion 모드로 전환하면 디자인 옆에 타임라인이 표시된다. - 외부 애니메이션 도구나 플러그인으로 이동하지 않고 같은 파일에서 디자인과 모션을 제작할 수 있다. - 모션에 익숙하지 않은 디자이너도 Figma Agent에 프롬프트를 입력해 애니메이션 아이디어와 개선점을 얻을 수 있다. - 이를 통해 모션 제작을 전문 모션 디자이너만의 업무가 아니라 팀 전체의 작업으로 확장한다. ## 타임라인과 키프레임 제어 - 레이어를 타임라인에서 드래그해 애니메이션의 시작과 지속 시간을 조정할 수 있다. - 플레이헤드를 이동하거나 스크럽해 특정 시점의 결과를 미리 볼 수 있다. - 위치, 크기, 회전, 불투명도를 각각 독립적으로 키프레임화할 수 있다. - 자동 키프레임 기능을 켜면 플레이헤드가 움직이는 동안 변경한 값이 자동으로 기록된다. - 페이드, 이동, 확대·축소 같은 프리셋 애니메이션 스타일을 빠르게 적용할 수 있다. - 여러 스타일을 동시에 겹쳐 실행하거나 타임라인에서 순차적으로 배치할 수 있다. - 사용자 정의 애니메이션 스타일을 만들어 저장하는 기능도 제공될 예정이다. ## 시간 기반 협업과 핸드오프 - 캔버스에 시간 기반 댓글을 남겨 애니메이션의 특정 순간을 직접 지적할 수 있다. - 모션 리뷰에서 “어느 프레임의 어떤 움직임”을 수정해야 하는지 명확하게 전달할 수 있다. - Dev Mode에서도 타임라인과 관련 기능에 접근할 수 있어 개발자와의 협업이 쉬워진다. - 디자인 단계부터 팀 전체가 모션을 검토하므로, 개발 단계에서 뒤늦게 애니메이션을 전달하는 병목을 줄인다. ## 디자인 시스템에 포함되는 모션 - 컴포넌트에 애니메이션을 포함할 수 있으며, 해당 컴포넌트가 다른 화면과 협업자의 파일로 복제될 때 모션도 함께 이동한다. - 모션을 매번 새로 만드는 대신 디자인 시스템의 재사용 가능한 구성 요소로 관리할 수 있다. - 팀이 정의한 모션 원칙과 스타일을 여러 파일에 일관되게 적용할 수 있다. - 결과적으로 모션이 개인의 작업 속도나 전문성에 따라 달라지는 문제를 줄인다. ## 모션 변수와 모드 - 모션 변수에 easing 같은 애니메이션 값을 저장할 수 있다. - 하나의 변수에 여러 모드를 정의해 상황별 애니메이션 동작을 관리할 수 있다. - 페이지 수준에서 모드를 변경하면 해당 변수를 참조하는 모든 애니메이션이 한꺼번에 업데이트된다. - 디자인 토큰처럼 모션의 속도감과 전환 방식을 중앙에서 통제할 수 있다. ## 셰이더 속성의 애니메이션 - 셰이더가 노출하는 속성도 Motion 타임라인에서 키프레임화할 수 있다. - 기존에는 Figma에서 애니메이션화할 수 있는 속성이 제한적이었지만, 이제 슬라이더나 입력 필드로 조정 가능한 셰이더 값까지 시간에 따라 변화시킬 수 있다. - 이를 활용하면 시각 효과와 인터랙션 표현의 범위를 넓힐 수 있다. ## 실용적인 결론 Figma Motion은 애니메이션을 별도 제작·핸드오프 단계가 아닌 디자인 시스템과 협업 과정의 기본 요소로 통합하려는 기능이다. 팀은 컴포넌트와 모션 변수를 함께 정의하고, 타임라인 댓글과 Dev Mode를 활용해 디자인 초기부터 개발자와 움직임을 조율하는 방식으로 활용하는 것이 좋다.