Building the Engine While Flying the Plane: Launching the Figma MCP Server — Jesse Lumarie, Figma

한 줄 핵심

Figma는 빠르게 변하는 MCP 사양과 불균등한 클라이언트 지원 속에서도 로컬 서버부터 시작해 컨텍스트 표현, 평가, Code Connect, 권한·보안까지 함께 설계하며 실제 제품으로 밀어붙였다.

시간별 요약

1. 0:00
   20% 프로젝트가 없는 회사에서 시작한 20% 프로젝트 Figma의 첫 MCP 서버는 AI 도구가 디자인과 프로덕션 코드를 오가며 컨텍스트를 주고받게 하려는 시도로 시작됐다. 내부 데모를 보고 일주일에 하루씩 직접 붙잡은 실험이 팀으로 확장됐고, 사양이 바뀌는 와중에도 제품 가능성을 확인하며 출발점을 만들었다.
2. 2:02
   고르지 않은 클라이언트 지원과 바뀌는 사양 MCP는 사양이 진행 중이었고 클라이언트마다 지원 범위와 시점이 달라 무엇을 기준으로 만들지 예측하기 어려웠다. 일부는 도구만 지원했고, 어떤 클라이언트는 훨씬 늦게 완성도 높은 지원을 제공했지만, 그럼에도 강력한 제품이 될 가능성은 분명했다.
3. 2:55
   로컬 서버가 개발자에게 준 것 초기 로컬 MCP 서버는 개발자를 핵심 사용자로 삼아 Figma의 dev mode 정보를 코드 에이전트로 바로 넘기는 데 집중했다. component data, spacing, variables 같은 맥락을 제공하면서 Figma, FigJam, Make 등으로 읽기 도구를 확장해 개발 워크플로에 스며들게 했다.
4. 3:52
   씬 그래프를 표현하는 세 가지 방법 씬 그래프를 에이전트에 전달하는 방식으로 내부적으로 세 가지를 검토했다: 추상적이고 간결한 JSX/XML 형태, React Tailwind에 가까운 D2R, 그리고 plain image다. 모델이 React Tailwind 계열 표현에 익숙할 것이라는 가설이 있었고, 단순 이미지보다 구조화된 코드 표현이 더 유리할 수 있다고 봤다.
5. 4:47
   이미지만으로는 충분하지 않았던 이유 이미지는 보조 컨텍스트로는 유용했지만, 단독으로는 HTML/CSS 변환 품질이 좋지 않았다. 처음에는 B64를 그대로 넣어 컨텍스트 윈도우를 망쳤고, 결국 코드 컨텍스트와 현재 노드 이미지의 조합이 더 좋은 결과를 냈다.
6. 5:40
   평가를 한 번 손으로 채점하고 끝낸 이유 초기 평가는 변수 사용, 테마 반영, 위치 정확도 같은 정량 지표와 결과의 미관·판단 품질 같은 정성 지표를 함께 봤다. 하지만 Excel에서 수작업으로 채점하는 방식은 너무 비효율적이어서 웹 앱과 LLM judges를 붙인 반복 가능한 평가 시스템으로 바뀌었고, 점차 인간 개입을 줄였다.
7. 7:32
   Code Connect와 픽셀 퍼펙트만으로는 부족한 이유 픽셀 퍼펙트한 React Tailwind 출력만으로는 접근성이나 국제화가 반영된 실제 코드 컴포넌트를 보장하지 못했다. Code Connect를 통해 디자인을 코드베이스의 실제 컴포넌트에 연결해, 에이전트가 무거운 표현 대신 올바른 버튼 컴포넌트 같은 포인터를 사용하도록 만들었다.
8. 9:24
   질문 유도와 샘플링, 그리고 우회 구현 클라이언트가 완전히 지원하지 않는 elicitation과 sampling을 조합해, 사용자에게 코드 연결을 허용할지 묻고 에이전트가 코드베이스 매칭을 제안하도록 흐름을 만들었다. 직접 구현이 어려운 기능은 툴 호출과 프롬프트를 엮어 우회했고, 추가 선택형 인자를 통해 사용자 환경 신호도 수집했다.
9. 13:55
   로컬 우선 배포 후 원격으로 확장 초기에는 보안, 파일 권한, 과금 남용 방지 때문에 로컬 서버가 가장 빠른 경로였다. Electron 기반 데스크톱 앱과 IPC, node 프로세스를 이용해 로컬에서 먼저 출시한 뒤, 이후 remote server와 write 기능을 추가하며 범위를 넓혔다.
10. 15:43
    이 모든 것이 아직도 얼마나 초기인지 MCP 생태계는 아직 2년 정도밖에 되지 않아 정답이 정해지지 않았고, 제품과 인프라의 많은 부분이 여전히 실험 단계다. Figma는 엔지니어에게 자율성을 주어 MCP와 Make 같은 새 흐름을 직접 만들어 가게 했고, 그 과정 자체가 빠른 학습과 진화를 가능하게 했다.

실무 인사이트

• MCP 서버는 사양이 안정되기 전이라도 로컬 우선으로 출발하면 실제 사용자 피드백을 가장 빨리 확보할 수 있다.
• 에이전트용 컨텍스트는 이미지, 구조화된 코드 표현, 실제 코드 컴포넌트 연결을 계층적으로 설계해야 품질과 효율을 함께 잡을 수 있다.
• 평가는 한 번의 수작업으로 끝내지 말고, 자동화된 반복 평가와 사용자 환경 신호를 함께 넣어 회귀를 조기에 잡아야 한다.