피그마가 연례 행사 Config 2026에서 새로운 기능들을 공개했어요. 이번 발표에서는 애니메이션 제작을 위한 Figma Motion, AI 기반 그래픽 효과 기능인 Shader Fills and Effects, 그리고 Code Layers를 비롯한 다양한 업데이트가 소개되었습니다. 레이디러너는 디자이너들이 눈여겨볼 만한 기능에 집중해 보았는데요, 아래에서 각 기능의 주요 내용을 함께 살펴볼게요.
Figma Motion: 피그마 안에서 완성하는 모션 디자인
🎬 타임라인 기반 애니메이션 제작
이번 업데이트로 피그마 안에서 직접 애니메이션을 만들 수 있게 되었어요. 디자인 프레임을 Motion 모드로 전환하면 타임라인이 생성되고, 위치, 크기, 회전, 투명도 같은 속성을 키프레임으로 제어할 수 있습니다. 자동 키프레임 기능도 함께 제공되어 수정한 내용이 타임라인에 자동으로 기록돼요.
페이드(Fade), 이동(Move), 스케일(Scale) 같은 기본 애니메이션 프리셋도 포함되었습니다. 여러 애니메이션을 하나의 시퀀스로 연결하거나 동시에 적용할 수 있으며, Figma Agent가 생성한 초안을 바탕으로 작업을 시작하는 것도 가능합니다.
🧩 디자인 시스템과 연동되는 모션
모션은 디자인 시스템과도 연결됩니다. 컴포넌트에 적용한 애니메이션은 다른 화면과 파일에서도 재사용할 수 있고, Motion Variables를 통해 이징(Easing) 같은 모션 값을 관리할 수 있어요. 반복적으로 사용하는 UI 요소에 동일한 움직임을 적용하거나, 여러 화면의 모션 리듬을 맞춰야 할 때 활용할 수 있습니다.
타임라인 기반 리뷰 기능도 추가되었는데요, 애니메이션의 특정 시점을 지정해 댓글을 남길 수 있어 움직임의 어느 부분을 이야기하는지 보다 명확하게 공유할 수 있습니다.
📦 Dev Mode 및 코드 내보내기
개발 단계와의 연결도 강화되었습니다. Dev Mode에서는 전체 타임라인과 키프레임 정보를 확인할 수 있으며 CSS, JSON, React, Motion.dev 코드 추출도 지원합니다. 개발자가 애니메이션의 타이밍 값과 이징 커브를 직접 확인할 수 있어 구현 과정에서 참고하기 좋습니다.
완성한 애니메이션은 MP4, GIF, SVG, WebM 형식으로 내보낼 수 있고, 시안 공유나 검토용 파일 제작에도 바로 활용할 수 있습니다.
Shader Fills and Effects: 자연어로 만드는 셰이더 효과
✨ AI로 생성하는 셰이더 효과
Shaders는 AI를 활용해 그래픽 효과와 시각 재질(Material)을 생성하는 기능입니다. 텍스트 설명이나 레퍼런스 이미지를 입력하면 Figma Agent가 셰이더를 생성하고, 결과물은 Effect 또는 Fill 형태로 추가돼요. 생성 이후에도 효과의 강도, 패턴, 색상 등 세부 값을 조절하며 원하는 방향으로 수정할 수 있습니다.
🎨 Effect와 Fill
생성된 셰이더는 Effect와 Fill 두 가지 방식으로 활용됩니다. Effect는 기존 레이어 위에 적용되는 효과를 의미하고, 파티클 스트레치, 렌즈 왜곡, 컬러 아웃라인 등이 대표적인 예시입니다.
Fill은 레이어 자체의 시각 재질을 만드는 기능에 가깝습니다. 워터컬러, 모아레, 패턴 그리드 같은 표현을 생성해 단색이나 그라디언트를 대신하는 Fill로 사용할 수 있어요.
⚙️ 파라미터 조절 및 효과 중첩
생성된 셰이더에는 다양한 조절 값이 함께 제공됩니다. 파라미터를 수정하면서 결과를 실시간으로 확인할 수 있으며, 여러 셰이더를 조합해 새로운 효과를 만드는 것도 가능해요. 피그마는 Dither Waves, Fluid Halftone, Particle Web, Magnetic Field 등의 예시를 함께 공개했습니다.
Figma design agent: Shader effects and fills 자세히 보기
Code Layers: 코드와 디자인을 오가는 작업 흐름
💻 디자인을 코드로 변환
Code Layers는 코드와 디자인을 같은 캔버스 위에서 다룰 수 있도록 만든 기능입니다. 새로운 코드 레이어를 생성하거나 기존 디자인 프레임을 코드로 변환할 수 있으며, GitHub 저장소와 로컬 프로젝트를 불러오는 것도 가능해요. Figma Make에서 생성한 코드를 가져와 디자인과 함께 배치하는 기능도 지원합니다.
🔍 여러 버전 비교 및 협업
Code Layers의 특징은 여러 결과를 동시에 비교할 수 있다는 점입니다. 코드 레이어를 일반 디자인 프레임처럼 복제할 수 있으며, 생성한 결과물을 나란히 배치해 비교할 수 있어요. 프롬프트를 이용해 새로운 버전을 추가로 생성하는 것도 가능해 여러 방향을 동시에 탐색할 수 있습니다.
🔄 코드와 디자인을 오가는 편집
코드 결과물은 다시 편집 가능한 디자인 레이어로 추출할 수 있습니다. 특정 화면만 가져오거나 전체 플로우를 불러오는 것도 가능하며, 디자인에서 수정한 내용은 다시 코드 레이어에 반영돼요. 필요에 따라 코드 에디터에서 직접 수정한 뒤 저장소에 반영하는 작업도 가능합니다.
Code on the Figma canvas 자세히 보기
이 밖에도 자연어로 플러그인을 생성하는 Generative Plugins, 생성형 AI 워크플로우를 구성하는 Weave 도구, 그리고 Skills·Connectors·Attachments를 추가한 Figma Agent 업데이트도 함께 공개되었습니다.
피그마 Config 2026에서 공개된 모든 업데이트와 새로운 기능은 아래의 페이지에서 더 자세히 확인하실 수 있습니다.
