디자인 핸드오프는 2016년경부터 인간 개발자에게는 해결된 문제였습니다. Zeplin, InVision Inspect, Avocode, Figma의 자체 Dev Mode — 모두 같은 일을 합니다: 개발자에게 노드를 클릭하고 속성을 읽을 수 있는 웹 인터페이스를 제공합니다.

"개발자"가 AI 에이전트일 때 그 워크플로우는 완전히 무너집니다.

이 글은 그 이유, 에이전트에게 실제로 필요한 것, 그리고 근사한 코드가 아닌 올바른 코드를 생성하는 핸드오프 워크플로우를 구조화하는 방법을 설명합니다. 해답은 figmascope — Figma 파일에서 직접 구조화된 컨텍스트 번들을 내보내는 브라우저 기반 도구입니다. 단계별 워크플로우는 Figma to Claude Code 또는 Figma to Cursor를 참고하세요.

디자인 핸드오프의 가정

2023년 이전에 만들어진 모든 핸드오프 도구는 동일한 암묵적 가정을 합니다: 다른 쪽 끝에 인간이 있어서 클릭하고, 값을 읽고, 판단을 내린다. 도구의 역할은 숙련된 개발자가 디자이너와 끊임없이 컨텍스트를 전환하지 않아도 작업할 수 있을 만큼 정보를 명확하게 노출하는 것입니다.

이 가정은 이러한 도구의 전체 UX에 내재되어 있습니다:

이 중 어느 것도 틀리지 않습니다. 인간 개발자 워크플로우에 올바릅니다. 에이전트에게는 잘못된 인터페이스일 뿐입니다.

에이전트가 디자인에서 실제로 필요한 것

디자인 작업을 받는 AI 에이전트에게 필요한 것:

  1. 무언가를 하기 전에 읽는 스펙 — 제약 조건, 범위, 토큰 네이밍 컨벤션, 버전 메모. 패널 위에 마우스를 올려서 암시되는 것이 아니라 명시적으로 작성된 것.
  2. 타입 명시 토큰 사전 — 원시 hex 값과 픽셀 숫자가 아니라 값이 있는 명명된 타입 토큰. 에이전트는 #d96a3a가 color.accent임을 알아야 정확한 Tailwind 클래스 이름이나 CSS custom property를 생성할 수 있습니다.
  3. 전체 화면 레이아웃 트리 — 모든 노드의 계층 구조, 레이아웃 관계, 크기, 토큰 참조. 요청에 따라 한 번에 한 노드가 아닌 메모리의 전체 트리.
  4. 통합 문자열 — 리소스 키가 있는 모든 텍스트 콘텐츠, 정규화됨. 개별 노드에 흩어지지 않음.
  5. 시각적 기준 — 에이전트가 출력을 비교할 수 있는 참조 렌더. 2×의 디자인 스크린샷.
  6. 컴포넌트 이름 — 생성된 코드가 사용해야 하는 정규 식별자. 임의로 생성된 이름이 아닌.

전통적인 핸드오프 도구는 에이전트가 사용할 수 있는 형태로 이 중 어느 것도 제공하지 않습니다. figmascope 앱은 이 모든 것을 하나의 zip으로 생성합니다 — Figma URL을 붙여 넣으면 번들을 받습니다. 업로드 없음, 백엔드 없음. 토큰 형식은 AI 에이전트를 위한 디자인 토큰 내보내기에서 자세히 다룹니다.

스크린샷이 실패하는 이유

사람들이 가장 빠르게 시도하는 해결책: Figma에서 PNG를 내보내고 "이 화면을 구현하세요"와 같은 프롬프트와 함께 에이전트에 전달. 에이전트는 코드를 생성합니다. 때로는 비슷해 보입니다. 하지만:

이러한 오류는 각각 작습니다. 합쳐지면 상당한 수동 수정이 필요한 컴포넌트가 됩니다 — 에이전트를 사용함으로써 얻는 대부분의 시간 절약을 무효화합니다.

예시가 포함된 자세한 내용은 AI 코드젠에서 스크린샷이 실패하는 이유를 참고하세요.

스크린샷은 에이전트에게 디자인이 어떻게 보이는지 알려줍니다. 구조화된 컨텍스트는 디자인이 무엇인지 알려줍니다.

전통적인 핸드오프 도구 평가

Zeplin

Zeplin의 주요 인터페이스는 개발자가 노드별로 디자인을 검사하는 웹 앱입니다. 파일에서 색상과 타이포그래피를 집계하는 "Styleguide" 기능이 있습니다 — 토큰 내보내기와 가장 가까운 것. 머신 읽기 가능한 레이아웃 트리를 내보내지 않습니다. "Connected Components" 기능은 Storybook 컴포넌트를 Figma 프레임에 연결합니다 — 문서화에 유용하지만 에이전트가 새 코드를 생성하는 데 도움이 되지 않습니다.

Figma Dev Mode

핸드오프에 대한 Figma의 네이티브 답변. 코드 패널은 선택된 노드에서 CSS를 생성하고 Variables가 설정된 경우 Variable 이름을 표시합니다. 인간 개발자를 위해 잘 설계되었습니다. 파일 수준 내보내기를 지원하지 않고, 레이아웃 트리를 생성하지 않으며, 코드 스니펫은 CSS 전용(프레임워크 독립적 토큰이 아님)입니다. Dev Mode 시트가 필요합니다.

Avocode

Avocode는 Abstract에 인수된 후 2022년에 서비스를 종료했습니다. "디자인 핸드오프 도구" 검색 결과에 여전히 나타나고 일부 비교 트래픽을 유도하기 때문에 언급합니다. 더 이상 사용할 수 없습니다.

Locofy, Builder.io, Anima

이러한 도구들은 Figma 디자인에서 직접 실제 프레임워크 코드(React, Next.js, HTML)를 생성하려 합니다. 문제 공간에 더 가깝습니다 — 출력이 속성 패널이 아닌 코드여야 한다는 것을 이해합니다. 하지만 에이전트에게 제공하는 컨텍스트가 아닌 배포하는 코드를 생성합니다. 도구가 직접 코드를 생성할 때 "이미 구축한 UserAvatar 컴포넌트를 재사용하여 Settings 화면을 구현하세요"라고 요청할 수 없습니다. 구조화된 컨텍스트를 제공한다면 Claude Code나 Cursor에게는 요청할 수 있습니다.

자세한 비교는 figmascope vs Locofy와 figmascope vs Builder.io를 참고하세요.

에이전트 친화적 핸드오프의 모습

에이전트 친화적 핸드오프는 전통적 핸드오프와 구별되는 세 가지 속성이 있습니다:

1. UI가 아닌 파일 아티팩트

핸드오프 아티팩트는 코드 옆에 저장소에 있는 버전 관리 파일(또는 파일 집합)입니다. 로그인이 필요한 공유 링크가 아닙니다. 웹 앱의 패널이 아닙니다. JSON, PNG, Markdown 파일이 있는 design/ 디렉토리입니다.

이는 여러 가지 결과를 가져옵니다:

2. 렌더링된 텍스트가 아닌 타입 명시 데이터

tokens.json의 디자인 토큰은 타입이 명시됩니다 — $type: "color", $type: "dimension" — Markdown 테이블의 단순 문자열이 아닙니다. screens/*.json의 레이아웃 IR은 명시적 노드 종류(stack, overlay, absolute, leaf)와 $ref 표기법을 사용하는 토큰 참조를 가집니다. strings.json의 문자열은 사람이 읽을 수 있는 레이블이 아닌 점 표기법 키를 가집니다.

타입 명시 데이터는 에이전트가 프로그래밍 방식으로 추론할 수 있음을 의미합니다: "같은 배경 위에 있어 보이는 모든 노드"가 아닌 "background.$ref == color.surface인 모든 노드는 동일한 배경 색상을 사용합니다."

3. 에이전트가 먼저 읽는 스펙 문서 포함

CONTEXT.md는 디자이너와 에이전트 사이의 계약입니다. 다음을 설명합니다:

전통적인 핸드오프에는 동등한 것이 없습니다. Dev Mode에는 프레임별 "개발자 메모" 필드가 있지만 구조 없이 디자이너가 임시로 작성합니다. CONTEXT.md는 파일의 실제 콘텐츠에서 일관되게 생성됩니다.

단계별 핸드오프 워크플로우

  1. 디자이너가 프레임을 준비 완료로 표시 — Figma에서 디자이너가 구현 준비가 된 프레임을 표시합니다(네이밍 컨벤션, "ready" 레이블, 팀이 사용하는 방식).
  2. 개발자가 figmascope를 실행 — figmascope.dev에서 파일 URL과 PAT를 붙여 넣고, 내보내기를 클릭하고, zip을 다운로드합니다.
  3. design/에 압축 해제 — unzip figmascope-<fileKey>.zip -d design/
  4. design/을 저장소에 커밋 — 번들이 핸드오프 아티팩트입니다. PR에는 design 번들과 구현이 모두 포함됩니다.
  5. 에이전트가 구현 — Claude Code 또는 Cursor를 design/CONTEXT.md와 관련 화면 JSON으로 지정합니다. 에이전트는 번들의 토큰 값, 컴포넌트 이름, 문자열을 사용하는 코드를 생성합니다.
  6. 검토 및 반복 — 개발자가 screens/*.png와 비교하여 검토하고, 부족한 부분을 기록하고, 프롬프트를 개선합니다.

디자인이 변경되면 2단계부터 반복합니다. _meta.json 타임스탬프는 Figma 파일이 마지막으로 수정된 시점 대비 번들이 마지막으로 생성된 시점을 알려줍니다 — 간단한 최신 상태 확인.

{
  "figmascopeVersion": "1.0.0",
  "fileKey": "ABC123",
  "exportedAt": "2026-05-11T09:14:00Z",
  "figmaLastModified": "2026-05-10T18:30:00Z",
  "frameCount": 8,
  "warnings": [
    {
      "code": "layout-mode-none-inferred",
      "message": "Frame 'Modal' has no auto-layout; child positions inferred from absolute coordinates.",
      "nodeId": "2:34"
    }
  ]
}

변하지 않는 것

에이전트 친화적 핸드오프는 디자인 검토를 대체하지 않습니다. 에이전트는 구조화된 컨텍스트에서 구현하고, 인간은 여전히 출력을 검증합니다. 인터랙션 상태, 애니메이션, 반응형 동작, 접근성 — 이것들은 정적 디자인 데이터만으로 에이전트가 근사할 수는 있지만 보장할 수 없는 판단력이 필요합니다.

구조화된 컨텍스트는 또한 디자이너-개발자 대화를 대체하지 않습니다. 토큰이 모호하게 명명되거나, 컴포넌트가 정적 프레임이 제시하는 것과 다르게 브레이크포인트에 걸쳐 동작한다면 대화가 필요합니다. CONTEXT.md는 파일에 있는 것을 캡처합니다. 파일이 다루지 않는 경우에 디자이너가 의도한 것은 추론하지 않습니다.

변하는 것: 안정적인 디자인에서 정적 화면 레이아웃의 구현이 수 시간의 수동 프로세스에서 프롬프트-검토 워크플로우로 바뀝니다. 에이전트가 기계적 번역을 처리하고, 개발자가 판단 결정을 처리합니다.

체크리스트: 디자인 핸드오프가 에이전트 친화적인가요?

이 중 대부분이 없다면 에이전트는 좋은 컨텍스트에서 처음부터 시작하는 것보다 더 많은 수정이 필요한 코드를 생성합니다. figmascope가 생성하는 번들은 하나의 내보내기로 이 모든 것을 충족합니다. 각 체크리스트 항목에 대한 사례 연구와 심층 분석은 figmascope 블로그를 방문하거나 Dev Mode 및 플러그인과의 직접 비교는 Figma 인스펙터 대안을 참고하세요.