피그마, 깃허브·커서와 협력 확대…AI 코딩·디자인 협업 기능 강화

‘코드 투 캔버스’ 확장…디자인과 코드 오가는 ‘라운드 트립’ 개발 환경 구축

디자인 협업 플랫폼 피그마(Figma)가 인공지능(AI) 기반 코딩 도구와의 연동 기능을 확대하며 디자인과 개발 협업 환경을 강화했다.

피그마는 깃허브 코파일럿(GitHub Copilot)과 커서(Cursor)를 새로운 파트너로 추가하고, 개발 환경과 디자인 플랫폼을 연결하는 ‘코드 투 캔버스(Code to Canvas)’ 기능을 업그레이드했다고 13일 밝혔다.

이번 업데이트를 통해 개발자는 코드 기반 환경에서 빠르게 아이디어를 구현하고, 디자인 팀은 피그마 캔버스를 활용해 이를 시각적으로 탐색하며 반복적으로 개선할 수 있는 협업 환경을 구축할 수 있다.

코드와 디자인을 연결하는 ‘코드 투 캔버스’

피그마가 확장한 코드 투 캔버스(Code to Canvas) 기능은 개발자가 작성한 코드를 디자인 환경으로 불러와 시각적으로 확인하고 수정할 수 있도록 지원하는 기능이다.

이를 통해 개발자는 코드 기반으로 인터페이스를 구현하고, 디자인 팀은 피그마 캔버스에서 해당 인터페이스를 확인하며 디자인을 조정하거나 개선할 수 있다. 이러한 방식은 제품 아이디어를 빠르게 시각화하고 팀 협업 과정에서 반복적인 수정 작업을 효율적으로 수행할 수 있도록 돕는다.

‘라운드 트립’ 워크플로 구현

이번 기능은 피그마 모델 컨텍스트 프로토콜(Model Context Protocol, MCP) 서버를 기반으로 작동한다.

사용자는 코딩 환경에서 생성한 인터페이스를 피그마 디자인 캔버스로 가져와 편집한 뒤, 이를 다시 코드로 변환할 수 있다. 이 과정에서 디자인과 코드가 서로 양방향으로 연결되는 ‘라운드 트립(round-trip)’ 워크플로가 구현된다.

즉, 디자인에서 코드로, 코드에서 다시 디자인으로 이어지는 순환형 개발 환경이 가능해진 것이다.

디자인·개발 협업 효율성 강화

피그마 디자인은 단순한 정적 이미지가 아니라 반응형 레이아웃, 인터랙션 정보 등 제품 설계에 필요한 다양한 맥락을 포함하고 있다.

이번 기능 확장을 통해 개발자는 별도의 디자인 도구를 실행하지 않아도 코딩 환경에서 디자인 정보를 확인할 수 있으며, 디자인 팀과 개발팀 간 협업 과정에서 발생하는 반복 작업 역시 줄일 수 있다.

업계에서는 이번 업데이트가 AI 기반 개발 도구와 디자인 플랫폼 간 협업을 강화하는 사례로 평가하고 있다.

AI가 코드를 쓰는 시대…AI 코딩 스타트업 매출 수조원 급성장

비탈릭 부테린 “탈중앙화금융의 핵심은 알고리즘 스테이블코인”

젠슨 황 “AI가 SW 산업 대체한다는 우려? 가장 비논리적”

AI 효과로 사상 최대 실적 낸 네이버, 올해 전략은 ‘AI 에이전트’

오픈AI·앤스로픽, 같은 날 신형 AI 모델 공개…‘에이전트’ 경쟁 본격화