피그마, 디자인·코딩 작업 환경 AI로 통합

피그마가 디자인과 코드 개발을 한번에 작업할 수 있는 환경을 마련했다.

피그마는 '피그마 메이크'를 통해 디자인과 실제 코드 환경을 연결하고 AI 기반 실시간 편집을 지원하는 기능을 공개했다고 9일 밝혔다.

피그마 메이크는 피그마 베타 데스크톱 앱에서 디자인 작업부터 코드 기반 프로토타이핑과 프로덕션 배포 준비까지 한 흐름으로 이어지도록 지원한다.

피그마가 디자인과 코드 개발을 한번에 작업할 수 있는 환경을 마련했다. (피그마)

이번 업데이트 핵심은 실제 운영 환경 또는 테스트용 코드 저장소를 피그마 메이크에 직접 연결할 수 있다는 점이다. 저장소가 연결되면 피그마 메이크가 로컬 개발 서버를 자동 실행하고, 필요한 외부 프로그램을 설치해 실제 사용자와 같은 데이터와 환경을 기반으로 애플리케이션을 피그마 안에서 확인할 수 있다.

사용자는 피그마 메이크에서 코드베이스를 시각적으로 편집하고 변경 사항을 제품에 반영할 수 있다. 여러 디자인 시안을 비교·검토하고 프로토타입으로 동작을 확인한 뒤 확정된 변경 사항을 실제 제품 환경에 적용하는 식이다.

시각적 편집 기능도 강화됐다. 사용자는 코드 요소나 화면 영역을 선택해 레이아웃, 색상, 글꼴 크기, 위치, 효과 등을 조정할 수 있으며 에이전트가 관련 코드 파일을 찾아 수정한다.

인터랙션이나 애니메이션 등 화면 동작 변경이 필요한 경우에는 렌더링된 화면 위 요소에 직접 주석을 달 수 있다. 사용자는 텍스트나 음성으로 변경 내용을 설명하거나 이미지를 추가하고 피그마 프레임을 연결해 에이전트에 더 구체적인 지시를 전달할 수 있다.

피그마 메이크는 채팅 기반 수정과 반복 작업도 지원한다. 사용자는 코딩 에이전트와 대화하며 변경 사항을 만들 수 있고 수정 내용은 미리보기 화면에 즉시 반영된다.

개발 협업에 필요한 깃 워크플로도 포함됐다. 사용자는 디자인 작업과 함께 코드 분기 생성, 변경 사항 저장, 코드 검토 요청 제출 등을 수행할 수 있으며 코드 변경 사항은 풀 리퀘스트를 열기 전까지 로컬 커밋으로 저장된다.

피그마 메이크에서 만든 화면과 페이지, 구성 요소는 피그마 캔버스에 레이어로 붙여넣을 수 있다. 팀원과 피그마 에이전트가 캔버스에서 수정한 내용은 다시 메이크로 가져와 코드에 반영할 수 있다.

피그마는 AI 에이전트가 더 많은 코드를 생성하고 디자인 판단의 중요성이 커지는 환경에 맞춰 시각적이고 협업 중심적인 제품 개발 워크플로우를 강화할 계획이다. 작업이 디자인에서 시작되든 코드에서 시작되든 사용자가 현재 단계에 맞는 도구를 쓸 수 있도록 지원하겠다는 방향이다.