Figma Make 로컬 코드 연결 공부 정리 | 경계가 어디까지 달라지는 걸까

Figma 블로그에서 Figma Make 관련 발표가 올라왔다. 제목이 “now on your local code”였는데, 처음엔 무슨 말인지 정확히 몰라서 좀 읽어봤다.

지금까지 Figma Make는 Figma 안에서 빠른 프로토타입을 만드는 도구 정도로 알고 있었다. 근데 이번 발표에서 바뀐 건, 실제로 작업 중인 로컬 코드베이스에 직접 연결된다는 거다. 디자이너가 코드에 직접 닿는다는 말이 어떤 의미인지 조금 더 들여다봤다.

1️⃣ 이게 뭐냐?

Figma Make가 로컬 프로젝트와 연결되면, 화면에서 요소를 클릭해서 색상이나 폰트, 레이아웃 속성을 바꿀 수 있다고 한다. AI가 관련 코드를 찾아서 수정해준다. 코드 파일을 직접 열거나 어떤 변수를 수정해야 하는지 알 필요 없이, 시각적으로 편집하면 코드가 따라오는 개념이다.

“Annotations”라는 기능도 생겼다. 화면 위에 직접 주석을 달아서 에이전트에게 맥락을 전달하는 방식인데, 버튼 옆에 “눌렸을 때 이렇게 움직여야 한다”는 식의 설명을 붙여두면 에이전트가 그걸 읽고 코드를 작성해준다고 한다.

git 쪽도 연결된다. 브랜치 생성, 커밋, PR까지 Figma 안에서 처리된다고 되어 있었다. 기존 엔지니어링 리뷰 프로세스는 그대로 유지되는 구조다.

2️⃣ 내가 든 생각

흥미로웠던 건 시각적 편집보다 Annotations 쪽이었다. 인터랙션이나 애니메이션은 텍스트로 설명하기 까다로운 경우가 많은데, 화면에 직접 붙이는 방식으로 에이전트에게 넘긴다는 게 꽤 실용적인 접근인 것 같았다.

디자인 핸드오프에서 늘 어렵다고 느끼는 부분이 “이 요소가 어떻게 움직여야 해요”를 전달하는 거였다. 스펙 문서를 쓰거나, 프로토타입 링크를 보내거나, 직접 설명하거나. Annotations가 그 역할을 일부 대신할 수 있다면 꽤 달라지는 흐름이 생길 것 같았다.

👉🏻 단, 문서 기준으로는 AI가 코드를 어느 수준까지 정확히 수정해주는지가 불분명했다. 예제 위주로 나온 내용은 비교적 간단한 속성 변경이었고, 복잡한 로직이 얽힌 경우에 어떻게 처리되는지는 공부한 내용 기준으로는 잘 모르겠다는 생각이 들었다.

💡 여기서 드는 질문? 디자이너가 코드에 직접 닿을 수 있다고 할 때, 코드 품질에 대한 책임은 어떻게 나뉘는 걸까? 에이전트가 코드를 수정했을 때 그게 적절한 수정인지 판단하는 건 결국 누가 하는 건지가 궁금해졌다.

3️⃣ 더 파보고 싶은 것

로컬 코드에 연결될 때 AI가 코드베이스를 어떻게 인식하는지가 궁금해졌다. 컴포넌트 단위로 파악하는 건지, 파일 전체를 보는 건지. 문서에는 “에이전트가 관련 코드를 찾아서 수정한다”고 되어 있었는데, 그 ‘찾는’ 방식에 대한 설명은 없었다.

지금 React + Next.js 구조를 공부 중이라서, 이 맥락에서 컴포넌트 트리를 어떻게 인식하는지도 더 들여다보고 싶었다.

⭐️ 마지막으로, 디자인-개발 경계에 대해 공부하면서 느낀 점

Figma Make가 로컬 코드로 확장됐다는 발표를 읽고 정리해보니, 이건 기능 추가라기보다 “디자이너가 코드에 얼마나 가까이 있어야 하는가”라는 질문이 다시 올라온 것에 가까웠다.

이런 류의 도구를 볼 때 자꾸 같은 질문을 하게 되는 것 같다 — 경계가 없어지는 게 좋은 건지, 아니면 그냥 경계가 불분명해지는 건지.

---

참고 원문: Figma Make, now on your local code