이번 Config 2026에서 Figma는 “그 어떤 도구도 아이디어의 한계를 가두어서는 안 된다”는 철학을 바탕으로, 캔버스 위의 무한한 표현력을 지원하는 신기능들을 발표했습니다.
Figma는 단순한 인터페이스 디자인 도구를 넘어 코드, 모션, 생성형 AI가 결합된 통합 크리에이티브 플랫폼으로의 거대한 진화를 선언했습니다.
가장 핵심적인 메시지는 “AI가 진입 장벽을 낮추었지만(Lower the floor), 크리에이티브의 최고점(Raising the ceiling)을 높이는 것은 결국 디자이너와 빌더들의 몫”이라는 점입니다.
이를 위해 Figma는 코드, 모션, 셰이더, 생성형 플러그인, Weave 도구 등 새로운 시각적 소재들을 캔버스 안으로 완전히 통합하여 디자이너가 생각하는 속도 그대로 실험하고 플레이할 수 있는 환경을 제공합니다.
즉시 사용 가능한 기능 (Open Beta)
-
Figma Motion: 캔버스 내부에 타임라인이 내장되어 이제 외부 도구 없이도 키프레임과 프리셋을 활용한 정밀한 애니메이션 제작이 가능해졌습니다. Figma 에이전트에게 말로 요청해 첫 모션 초안을 생성할 수도 있으며, 개발 모드(Dev Mode)를 통해 CSS, JSON, React 코드로 즉시 내보낼 수 있습니다.
-
Generative plugins: 개발 환경 세팅이나 API 지식 없이도, Figma 에이전트와의 대화(프롬프트)만으로 실무에 필요한 맞춤형 플러그인을 즉시 제작하고 파일 내에서 공유할 수 있습니다.
-
Shaders (셰이더): WebGPU 기반의 맞춤형 텍스처와 비주얼 이펙트를 생성형 AI 프롬프트로 만들고, 캔버스 위에서 파라미터로 정밀 제어할 수 있는 기능입니다.
-
Figma Weave: Figma 디자인 환경 내에서 배경 교체, 로고 삽입, 비율 변경 등 반복적인 AI 이미지 편집 작업을 프롬프트 입력 없이 사전 정의된 도구로 정밀하게 수행합니다.
-
Figma 에이전트 업데이트: 유료 플랜을 대상으로 디자인 생성, 리믹스, 워크플로 자동화 기능이 강화되었습니다. MCP(Model Context Protocol) 커넥터를 통해 외부 툴과 컨텍스트를 연동할 수 있으며, 에이전트와의 대화가 협업자들에게도 투명하게 공개됩니다.
출시 예정 및 얼리 액세스 기능 (Coming Soon)
-
Code Layers (코드 레이어): Figma 캔버스 위에서 실제 코드를 작동시키고, 코드 레이어를 디자인 레이어로 변환하거나 반대로 변환하며 개발자와 실시간으로 협업할 수 있는 완전히 새로운 차원의 기능입니다. 리포지토리를 직접 클론해 올 수도 있습니다.
-
FigJam 및 Figma Slides 에이전트: 기획 보드와 발표 데크 제작을 도와주는 AI 에이전트가 도입됩니다.
-
3D transforms: 디자인과 이미지에 차원과 깊이감을 부여하고, 모션 기능과 결합해 현실감 있는 입체적 움직임을 구현합니다.
Code on the canvas: 캔버스로 들어온 코드, 협업의 패러다임을 바꾸다
Figma는 오랜 시간 지속된 “디자인이냐, 코드냐”의 이분법적 논쟁을 종식시키고, 코드를 이미지나 벡터와 같은 하나의 ‘디자인 소재(Material)’로 정의했습니다.
이번에 발표된 Code Layers(코드 레이어)는 캔버스 위에서 단 한 번의 클릭이나 프롬프트 입력을 통해 디자인 레이어를 실제 인터랙티브한 코드로 전환하는 기능입니다. 디자인 프레임을 복제하듯 코드 레이어를 복제해 여러 시안을 나란히 비교할 수 있으며, 팀원들과 실시간으로 댓글을 달고 에디팅할 수 있습니다.
특히 코드 레이어를 다시 편집 가능한 디자인 레이어로 추출(Extract)하고, 수정 후 클릭 한 번으로 코드를 업데이트하는 양방향 워크플로(Bi-directional Workflow)를 지원합니다. 자세히보기 →
피그마 캔버스에서 코드 레이어를 활용해 다양한 옵션 탐색
Figma Motion: 디자인에 생동감을 불어넣는 캔버스 내장 타임라인
애니메이션을 구현하기 위해 외부 도구로 이동해야 했던 불편함을 해결하기 위해, 디자인 환경 내에 직접 타임라인을 내장한 Figma Motion을 출시했습니다.
키프레임과 프리셋을 사용해 처음부터 정밀하게 애니메이션을 만들거나, Figma 에이전트에게 말로 요청하여 모션 초안을 생성할 수 있습니다. 특히 모션이 Figma의 핵심 플랫폼 위에 구축되었기 때문에 디자인 시스템의 기본 요소로 포함시켜 컴포넌트 단위로 모션을 관리하고 공유할 수 있습니다. 또한, 개발 모드(Dev Mode)와 완벽히 연동되어 CSS, JSON, React 코드로 즉시 복사할 수 있으며, MCP(Model Context Protocol) 호환 및 다양한 영상/그래픽 포맷(MP4, WebM, Animated SVG, GIF) 내보내기를 지원합니다. 자세히보기 →
Shader fills and effects: 생성형 AI로 다듬는 수학적 그래픽과 텍스처
Figma는 그동안 백엔드 렌더링에만 숨겨져 있던 셰이더(Shaders) 기술을 디자이너의 창작 소재로 전면 개방했습니다. 난해한 코딩 지식 없이도 원하는 텍스처나 특수 효과를 말로 설명하거나 레퍼런스 이미지를 업로드하면, Figma 에이전트가 완벽한 형태의 셰이더 효과를 즉석에서 구현해 줍니다.
기능은 크게 기존 레이어의 비주얼을 변형하는 ‘이펙트(Effects)’와 완전히 새로운 질감을 부여하는 ‘채우기(Fills)’로 나뉩니다. AI가 코드를 구워낼 때 슬라이더나 컬러 피커 같은 제어 파라미터를 함께 자동으로 노출해 주므로, 디자이너는 네이티브 도구를 쓰듯 캔버스 위에서 수치를 조절하며 효과를 다듬을 수 있습니다. 또한 다른 디자인 이펙트와 중첩(Stackable)하여 사용할 수 있으며, 개발 모드를 통해 실제 프로덕션 코드로 매끄럽게 변환됩니다. (동적으로 반응하는 인터랙티브 셰이더 기능도 곧 출시될 예정입니다.) 자세히보기 →
쉐이더 효과 및 채우기 컨트롤 사용자 지정
Generative plugins: 대화로 만드는 나만의 맞춤형 플러그인과 자동화 도구
Figma는 디자이너마다 고유한 워크플로를 가지고 있다는 점에 주목하여, 코딩 지식 없이도 필요한 도구를 즉석에서 만들 수 있는 Generative plugins(생성형 플러그인) 기능을 발표했습니다.
로컬 개발 환경을 세팅하거나 복잡한 Figma 플러그인 API를 공부할 필요가 없이, 내가 원하는 도구의 동작 방식, 필요한 제어 버튼, 조절할 파라미터를 말로 설명하기만 하면 Figma 에이전트가 완벽한 형태의 플러그인을 자동으로 빌드해 줍니다. 이렇게 생성된 플러그인은 원래 Figma에 있던 네이티브 도구처럼 부드럽게 작동합니다. 또한, 내가 만든 도구를 파일 내의 팀원들과 즉시 공유하여 함께 사용할 수 있으며, 향후 팀 내부, 조직 전체, 혹은 글로벌 커뮤니티에 직접 게시하고 배포할 수 있는 기능도 추가될 예정입니다. 자세히보기 →
반복되는 워크플로우를 원클릭 명령어로 바꿔주는 커스텀 스킬을 생성하고 공유
Figma Weave tools: 노드로 설계하는 생성형 비주얼 워크플로의 탄생
Figma는 복잡하고 정밀한 비주얼 콘텐츠 제작 과정을 시스템화할 수 있는 Figma Weave tools(피그마 위브 툴)를 캔버스에 공식 도입했습니다.
Weave는 여러 생성형 AI 모델을 연결하고, 디자인 에셋을 변형하며, 결과물을 정밀하게 다듬고 비교할 수 있는 ‘노드 기반(Node-based)의 캔버스’ 공간입니다. 단순히 텍스트 프롬프트를 입력해 일회성 결과물을 얻는 방식에서 벗어나, 다양한 모델의 출력값을 마치 점토처럼 주무르며 나만의 멀티 모델 워크플로를 조각해 나갈 수 있습니다.
현재 Weave에서 구축한 워크플로를 템플릿 형태로 발행하여 다른 팀원들이 사용하거나 리믹스하도록 공유할 수 있으며, 머지않아 팀, 조직, 글로벌 커뮤니티에 독립된 ‘도구(Tools)’ 형태로 배포하는 기능이 추가될 예정입니다. 디자이너들의 영감을 돕기 위해 이미 다양한 Weave 툴 에셋들이 기본 탑재되어 있습니다. 자세히보기 →
Figma agent: 스킬, 커넥터, 투명한 협업의 시작
Figma 디자인 에이전트가 마침내 모든 사용자에게 정식 출시되었습니다. 이번 에이전트의 핵심은 디자인 캔버스를 완벽하게 이해하고, 사용자의 고유한 맥락에 동기화된다는 점입니다.
- 스킬(Skills): 팀의 워크플로와 규칙을 반복 사용 가능한 지침으로 자산화합니다.
- 커넥터(Connectors): Notion, Slack, GitHub, Jira 등 기존 도구들과 데이터를 연동하고 업데이트합니다.
- 어태치먼트(Attachments): 리서치 문서나 기획서 등 참고 자료를 에이전트에게 직접 학습시킵니다.
또한 에이전트와의 대화 내역이 팀원들에게 기본적으로 공개(투명화)되어 서로의 탐색 과정을 실시간으로 싱크하고 발전시킬 수 있습니다. 현재 FigJam과 Figma Slides로의 영역 확장을 준비 중이며 대기명단을 받고 있습니다. 자세히보기 →
에이전트 채팅창에 파일 직접 첨부
외부 도구의 컨텍스트를 에이전트로 불러오기
피그마 Config 2026에 대한 Studio42의 관점
딜런의 기조 연설에서 이 말이 가장 기억에 남습니다.
AI lowering the floor and raising the ceiling. But while AI has lowered the floor, it has not raised the ceiling.Designers, creatives, builders: You will raise the ceiling.
(AI가 진입 장벽을 낮추었지만, 크리에이티브의 최고점을 높이는 것은 결국 디자이너와 빌더들의 몫입니다.)
디자이너에게 주는 영향
디자이너의 영역이 ‘정적인 화면 설계’에서 ‘동적인 인터랙션 및 프로그래밍적 메커니즘 설계’로 확장됩니다. After Effects나 별도의 목업 툴을 오가지 않아도 되며, 간단한 플러그인은 직접 AI로 제작해 쓸 수 있어 기술적 장벽이 획기적으로 낮아집니다.
실무 활용 방법
Figma Motion을 활용해 컴포넌트 단위의 마이크로 인터랙션을 정의하고, 이를 타이밍/이지징 변수(Variables)로 시스템화하여 디자인 시스템에 박아 넣을 수 있습니다. 또한 반복적인 레이어 정리나 텍스트 치환 작업은 Generative plugins 기능을 통해 “선택한 레이어 간격 똑같이 맞추고 이름 정렬해줘”라는 식으로 즉석 툴을 만들어 해결합니다.
UX 관점
디자인과 실제 프로덕션 코드 간의 ‘시각적 왜곡’이 최소화됩니다. 디자이너가 의도한 정밀한 모션 곡선(Easing curves)과 Shaders 효과가 코드 형태로 개발자에게 그대로 전달되므로, 최종 제품의 사용자 경험 품질(UX Fidelity)이 크게 향상됩니다.
생산성 향상 포인트
-
핸드오프(Handoff) 비용 제거: 모션 가이드를 따로 문서화할 필요 없이 Dev Mode에서 직접 코드를 추출합니다.
-
자동화 도구 내재화: 외부 플러그인을 검색하고 설치하는 대신, 내 워크플로에 딱 맞는 플러그인을 그 자리에서 생성해 사용합니다.
기존 방식과의 차이
기존에는 디자인 파일(Figma), 모션 파일(After Effects), 프로토타이핑 툴(Protopie 등), 코드(IDE)가 모두 파편화되어 있었습니다. Config 2026이 제시하는 미래는 이 모든 재료가 Figma 캔버스라는 하나의 공간 안에서 유기적으로 호환되는 구조입니다.
앞으로의 전망
디자인 툴의 경계가 무너지고 있습니다. AI 에이전트가 디자인과 코드의 가교 역할을 하면서, 앞으로 디자이너는 단순 그래픽 배치를 넘어 제품의 논리 구조와 인터랙션 시스템을 설계하는 ‘제품 아키텍트’로서의 역량을 더욱 요구받게 될 것입니다.
