피그마가 디자인 툴에 코드 저장소를 직접 연결했어요

디자이너가 시안을 넘기면, 개발자가 그걸 다시 코드로 옮긴다. 이 핸드오프, 십수 년째 디자인 업계의 숙명 같은 거였잖아요. 피그마가 이번에 그 다리 자체를 없애겠다고 나섰어요.

피그마 메이크(Figma Make)에 실제 코딩 환경을 통째로 붙인 업데이트를 공개했거든요. 디자인부터 구현까지를 따로 떼지 않고 하나의 워크플로우로 묶는다는 거예요. 말로는 쉬운데, 진짜 물건은 그 밑에 깔린 디테일이에요.

화면에서 색을 바꾸면 코드 파일이 고쳐진다

이번 업데이트의 핵심은 두 가지. 로컬 코드베이스 직접 연동, 그리고 시각적 코드 편집이에요. 사용자가 메이크에 실제 운영 환경이나 테스트용 코드 저장소를 연결하면, 시스템이 로컬 개발 서버를 알아서 띄우고 필요한 의존성도 자동으로 깔아줘요. 그러니까 실제 사용자가 보는 것과 똑같은 데이터·환경 위에서 돌아가는 앱을 피그마 안에서 그대로 본다는 거죠.

여기서부터가 재밌어요. 그 화면을 보면서 레이아웃, 색상, 글꼴 크기, 위치, 효과를 마우스로 직접 만지면, 내장된 AI 에이전트가 그 변경에 해당하는 코드 파일을 실시간으로 찾아서 자동으로 고쳐요. 디자이너가 "여기 패딩 좀"이라고 말하는 대신, 그냥 손으로 끌어다 놓으면 코드가 따라온다는 얘기. (예전엔 이게 한 사이클이었죠. 시안 → 스펙 문서 → 개발 → QA → 다시 시안.)

주석으로 지시하고, 음성으로 맥락을 던진다

색이나 간격 같은 단순 조정 말고, 복잡한 상호작용이나 애니메이션을 손봐야 할 때가 있잖아요. 그럴 땐 렌더링된 화면 위의 요소에 직접 주석을 달아서 코딩 에이전트한테 시키면 돼요. 마치 디자인 리뷰에서 "이 버튼 눌렀을 때 좀 더 부드럽게"라고 포스트잇 붙이듯이.

직접 편집과 일반 프롬프트, 그 사이의 유연함을 노린 설계예요. 텍스트로만 지시하는 게 아니라 음성, 이미지, 피그마 프레임까지 붙여서 맥락을 구체적으로 넘길 수 있거든요. 채팅으로 에이전트와 주거니 받거니 반복 수정도 하고, 설정이나 구성에서 문제가 터져도 채팅 패널에서 바로 대응하고요. 솔직히 이 부분은 좀 영리하다 싶었어요. 도구를 하나로 못 박지 않고, 사람이 그때그때 편한 방식을 고르게 둔 거니까.

캔버스와 코드가 양쪽으로 흐른다

연결은 한 방향이 아니에요. 메이크에서 만든 화면이나 페이지, 구성 요소를 복사해서 기존 피그마 디자인 캔버스에 레이어로 붙여넣을 수 있어요. 거기서 팀원들과 의견 나누고 다듬으면 되고요.

반대 방향도 열려 있어요. 캔버스에서 디자인을 고치면 피그마가 그걸 스스로 감지해서, 다시 메이크로 가져오라고 안내하고, 결국엔 실제 코드에까지 반영되도록 끌고 가요. 캔버스 ↔ 메이크 ↔ 코드. 이 세 군데가 끊기지 않고 한 줄로 이어지는 거예요. 디자인과 코드가 서로 다른 진실을 갖던 그 오랜 어긋남을 정조준한 셈이죠.

개발자 영역에도 발을 들였어요

여기까지가 디자이너 얘기였다면, 피그마는 개발자 워크플로우에도 손을 뻗었어요. 실제 엔지니어링 팀이 쓰는 Git 워크플로우를 지원하거든요. 코드 분기 생성, 변경 사항 저장, 코드 검토 요청 같은 개발 작업을 캔버스 안에서 할 수 있어요.

엔지니어링 팀 입장에서도 낯설지 않아요. 일반적인 풀 리퀘스트와 똑같은 방식으로 변경 사항을 검토하면 되니까. 디자이너가 캔버스에서 만든 변경이 PR로 올라오고, 개발자는 평소처럼 리뷰하는 흐름. 디자인 툴이 슬그머니 개발 파이프라인 안으로 들어온 거예요.

28일부터 맥 베타, 크레딧은 안 깎인다

직접 편집, 주석, 채팅, 코드 검토 요청 생성. 이 기능들은 28일부터 맥 사용자용 베타 데스크톱 앱에서 제한된 베타로 풀려요. 베타 기간 동안엔 AI 크레딧이 차감되지 않고요. (공짜로 만져볼 수 있다는 뜻이죠.) 얼리 액세스를 원하면 대기자 명단에 이름 올리면 돼요.

피그마 관계자의 말이 이번 방향을 잘 요약해요. "이번 변화는 AI 에이전트가 더 많은 코드를 생성하고 디자인 판단의 중요성이 높아지는 환경에 맞춘 업데이트"라고요. 그리고 "작업이 시작되는 위치와 관계없이 사용자가 현재 단계에 가장 적합한 도구를 활용할 수 있는 시각적이고 협업 중심적인 제품 개발 워크플로우를 지속적으로 강화해 나갈 계획"이라고 덧붙였어요.

읽으면서 한 가지 걸린 건, AI가 코드를 점점 더 많이 쏟아낼수록 "뭘 만들지"를 정하는 디자인 판단이 오히려 비싸진다는 전제예요. 코드가 흔해지면 값나가는 건 결정이라는 거. 피그마가 디자인 툴을 코드 옆에 바짝 붙인 진짜 이유가 거기 있는 것 같기도 하고요.