코드부터 모션까지, 피그마가 말하는 3대 패러다임 전환
피그마 컨피그 2026에서 놓치지 말 포인트는?
지난 6월 23일부터 25일까지 피그마 컨피그 2026(Figma Config 2026)이 열렸다. 협업 디자인 플랫폼 피그마가 매년 개최하는 행사로, 올해는 단순한 디자인 도구를 넘어 캔버스 안에서 코드와 미디어를 종합 조작하는 제품 개발 플랫폼으로의 진화를 전면 선언했다. 기술과 크리에이티브의 경계를 허물고 제품 개발의 흐름을 완전히 바꿀 피그마의 3대 패러다임 전환을 소개한다.

지난 2025년 7월 뉴욕증권거래소 상장으로 주목 받았던 협업 디자인 플랫폼 피그마(Figma)가 상장 이후 처음으로 연례 글로벌 컨퍼런스 ‘Figma Config 2026′(이하 컨피그)을 개최했다. 지난 2026년 6월 23일부터 25일까지 미국 샌프란시스코 모스콘 센터 및 온라인에서 진행된 이번 행사는 단순한 디자인 도구를 넘어 캔버스 안에서 코드와 미디어를 종합 조작하는 제품 개발 플랫폼으로의 진화를 전면 선언한 자리다. 특히 이번 행사는 기능 업데이트를 넘어, 기술과 크리에이티브의 경계를 허물고 제품 개발의 패러다임을 바꾸는 기념비적인 무대였다.

디자인은 본질적으로 어려운 질문을 던지는 과정이다. “무엇이 변하고 있으며 무엇이 가능할까, 그리고 ‘창작한다’는 것은 도대체 어떤 의미일까”라는 거대한 질문 앞에 피그마는 한 가지 단순한 전제를 던졌다. 그 어떤 도구도 아이디어가 나아갈 길을 제한해서는 안 된다는 것이다. 이에 따라 올해 컨피그 발표의 핵심은 캔버스 위에서의 ‘무한한 표현’에 방점이 찍혔다. 피그마는 사용자가 상상하는 모든 것을 표현할 수 있도록 새로운 소재를 지원하고, 이를 그 어느 때보다 더 멀리 밀어붙이고 형상화할 수 있는 새로운 도구들을 선보였다. 코드, 모션, 쉐이더, 제너레이티브 플러그인, 그리고 위브 툴까지 이 모든 것이 피그마 캔버스 위에서 펼쳐진다.
피그마 CEO 딜런 필드(Dylan Field)는 “지난 컨피그에서 AI가 진입장벽(바닥)을 낮추고 가능성(천장)을 높여줄 것이라 이야기했지만, AI가 바닥을 낮추었을지언정 아직 천장을 높이지는 못했다”라며, “디자이너와 크리에이터, 빌더 바로 당신이 그 천장을 높일 것”이라고 힘주어 말했다. 도구는 거들 뿐, 진정한 혁신은 인간의 대담한 시도와 창의성에서 비롯된다는 확신이다. 이러한 철학을 바탕으로 피그마는 기획과 코드, 모션 등 제품 개발에 필요한 모든 기술과 크리에이티브가 캔버스 안에서 실시간으로 연결되는 거대한 생태계를 구축했다. 업계의 지형도를 바꿀 피그마의 3대 패러다임을 소개한다.
코드도 디자인 소재다? 캔버스 위 혁신 ‘코드 레이어’
코드는 디자인의 대척점이 아니라 디자인을 위한 소재다.
딜런 필드 피그마 CEO
피그마가 제시한 첫 번째 전환은 디자인과 개발의 해묵은 이분법을 깨부수는 일이다. 피그마는 “코드는 디자인의 대척점이 아니라 디자인을 위한 소재일 뿐”이라 선언하며 캔버스 위에서 실제 소스코드를 시각적으로 다루는 ‘코드 레이어’를 전면에 내세웠다. 이제 디자이너는 툴바에 새롭게 추가된 코드 툴을 누르는 것만으로 캔버스에 코드 레이어를 생성할 수 있으며, 사이드 패널을 열지 않고도 AI 프롬프팅을 통해 다이내믹한 인터랙션을 즉각 코드로 구현하고 마우스로 직접 조작해 볼 수 있다.

이 기능의 진가는 강력한 개발 워크플로우의 통합에서 드러난다. 개발자들의 로컬 폴더나 깃허브(GitHub) 저장소(Repository)를 피그마 캔버스로 바로 불러올 수 있으며, 기존 피그마 요소를 복사하듯 옵션(Option) 키를 누르고 드래그하는 것만으로 새로운 코드 브랜치(Riff)가 생성된다. 또한 인터랙션 과정을 녹화(Record Flow)하면 페이지 전환이나 빈 화면(Empty State) 등 코드 기반의 모든 화면 상태를 캔버스 위에 UI 가이드 형태로 한눈에 펼쳐준다.

나아가 디자이너가 캔버스 안에서 정적 에셋을 수정하고 업데이트를 누르면, AI가 변경 사항을 분석해 코드를 자동 반영하며 이를 다시 깃허브(GitHub)로 푸시하는 완벽한 양방향 동기화까지 지원한다. ‘디자인 따로, 개발 따로’ 하던 파편화된 프로세스를 피그마라는 하나의 캔버스 안으로 완벽하게 통합한 셈이다. 현재 이 기능은 클로즈 베타로 순차 출시 중이며, 완전한 AI 기능은 유료 요금제 사용자를 대상으로 제공될 예정이다.
캔버스에 이식된 시간이라는 차원, 피그마 모션
디자인 캔버스 위에서 정적인 화면과 동적인 코드가 묶였다면, 다음 단계는 이 화면들에 생동감을 불어넣는 일이다. 이번 컨퍼런스 키노트에서 가장 주목받은 기능은 타임라인 기반의 고도화된 모션 도구인 ‘피그마 모션(Figma Motion)’이다. 피그마 프로덕트 매니저 데이비드 혼스비(David Hornsby)는 이에 대해 다음과 같이 선언했다.

피그마 모션은 기존의 단편적인 프로토타이핑을 넘어 애니메이션 제작의 핵심 메커니즘을 캔버스 본연의 기능으로 내장했다. 모션 모드로 전환하면 하단에 타임라인이 나타나며 위치·크기·회전·불투명도별 키프레임 적용 및 레이어 변경 사항을 자동 기록하는 ‘자동 키프레임’을 지원한다. 타임라인 특정 구간에 시간 기반 댓글을 달아 정확한 타이밍을 보며 리뷰할 수도 있다.
이제 모션이 컴포넌트, 배리어블, 그리고 팀원들과 동일한 파일인 ‘캔버스’ 위에서 작동한다. 디자인이 시작되는 첫날부터 생동감을 불어넣어 보길 바란다.
데이비드 혼스, 피그마 프로더긑 매니저

가장 강력한 가치는 모션이 디자인 시스템의 영역으로 편입되었다는 점이다. 기본 단위인 컴포넌트가 모션 데이터를 담아내므로, 한 번 구축된 모션은 색상이나 타이포그래피처럼 다른 화면과 협업 파일로 함께 이동한다. 이싱(Easing) 배리어블을 생성해 적용하고 페이지 수준에서 모드를 바꾸면, 해당 배리어블을 참조하는 전체 애니메이션이 한 번에 업데이트 된다.


생산성을 높이는 AI 기술도 결합했다. 피그마 에이전트(AI)에게 원하는 연출을 말로 설명하면 디자인 시스템 컴포넌트와 토큰을 기반으로 실제 키프레임을 자동 생성한다. 시연회에서 감탄을 자아낸 3차원 축 회전 기반의 ‘3D 트랜스폼’ 기능은 현재 대기자 명단을 접수 중이며 곧 출시될 예정이다.

완성된 모션은 개발자 모드(Dev Mode)의 모션(Motion) 탭을 통해 전체 타임라인과 이징 곡선을 검사할 수 있으며 CSS, JSON, React 코드를 즉시 복사할 수 있다. 표준 AI 연결 규약(MCP)과도 호환되어 코딩 에이전트에 모션 맥락을 그대로 전달한다. 현재 피그마 모션은 오픈 베타로 제공된다. 무료 요금제 사용자는 제한된 내보내기 기능으로 체험할 수 있고, 디자인 시스템 통합 기능 및 모션용 에이전트는 유료 요금제에서만 제한 없이 제공된다. 완성된 프레임은 MP4, GIF, SVG, WEBM 포맷으로 내보낼 수 있다.
내가 직접 만든 디자인 툴, 제너레이티브 플랫폼
피그마가 제시한 마지막 변화는 디자이너가 필요한 도구를 스스로 만드는 ‘도구의 자율화’다. 코딩 지식이 없어도 말 한마디면 나만의 플러그인과 시각 효과를 만들 수 있는 환경을 구축했다. 캔버스를 이해하는 대화형 인공지능 ‘피그마 에이전트(Figma Agent)’가 이 과정을 돕는다.

가장 먼저 와닿는 변화는 ‘제너레이티브 플러그인(Generative plugins)’이다. 에이전트에게 필요한 기능과 조작 단추를 말로 설명하면 몇 초 만에 맞춤형 플러그인을 완성해 준다. 복잡한 개발 환경을 만들 필요가 없고, 파일 안에서 팀원들과 즉시 공유해 작업에 쓸 수 있다. 자주 반복하는 검수 작업은 ‘스킬(Skills)’ 기능을 통해 슬래시(/) 명령어 하나로 실행되도록 자동화할 수 있다.



시각 효과를 만드는 ‘쉐이더 필 및 효과(Shader fills and effects)’도 추가됐다. 입체적인 그라디언트나 투명한 유리 느낌, 렌즈 왜곡 등 정교한 그래픽 효과를 인공지능이 즉석에서 구현한다. 캔버스 위에 생기는 조절 핸들을 마우스로 움직여 효과의 강도를 바로 바꿀 수 있고, 다른 효과와 겹쳐 쓰거나 코드로 변환하기도 쉽다.

여기에 이미지와 영상 제작 과정을 설계하는 ‘피그마 위브 툴(Figma Weave tools)’이 결합했다. 단순한 결과물 한 장을 얻는 것을 넘어 여러 인공지능 모델을 연결해 하나의 작업 흐름을 짜는 기능이다. 예컨대 제품 사진을 넣으면 360도 회전하는 비디오를 뽑아내거나, 서로 다른 사진들의 색감과 톤을 일정하게 맞춰주는 도구를 만들어 팀원들과 공유할 수 있다.


한편 외부 도구와의 연결성도 강화됐다. ‘커넥터(Connectors)’ 기능으로 노션, 슬랙, 지라, 깃허브의 데이터를 캔버스에 연동하고 업데이트를 주고받는다. 인공지능과의 대화 내용도 팀원들에게 기본 공유되어 동료들의 아이디어 탐색 과정을 실시간으로 확인할 수 있다. 제너레이티브 플러그인과 쉐이더, 위브 툴은 현재 오픈 베타로 즉시 사용 가능하다. 도구 제작의 장벽이 낮아지면서 디자이너는 기술적 한계 없이 아이디어를 자유롭게 구현하게 됐다. 피그마는 향후 기획서를 발표 자료로 자동 변환하는 피그잼 및 슬라이드 에이전트 기능도 추가할 계획이다.