디자인 시스템이 있는데 AI는 왜 버튼을 다시 만들까요?
Figma 화면을 코딩 에이전트에 넘겼더니 이미 있는 컴포넌트 대신 비슷한 React와 CSS를 새로 만들어버릴 때가 있습니다. 화면은 얼추 맞아도 개발자는 올바른 import 경로와 prop을 찾아 코드를 다시 고쳐야 하죠. 디자인 시스템은 있지만 에이전트가 그 위치를 모르는 상황입니다.
Coinbase는 같은 디자인과 의도적으로 모호한 프롬프트, Sonnet 4.6 모델, 매회 초기화한 빈 코드베이스를 사용해 Code Connect 유무를 조건별로 세 번 비교했습니다. Code Connect를 사용한 조건에서 평균 토큰은 11.5%, 구현 시간은 22.3%, 비용은 22.5% 감소했고, 세 번 모두 세 지표가 개선됐다고 보고했습니다.
다만 한 디자인을 대상으로 한 소규모 자체 평가이며 실행별 원시 데이터, 분산, 통계적 검정은 공개되지 않았습니다. 모든 팀이 22.5%를 아낀다는 뜻은 아니에요. 가져갈 발견은 프로덕션 컴포넌트를 출발점에 놓으면 에이전트의 검색·추측·재작성을 줄일 수 있다는 작동 원리입니다.
Code Connect는 정답 코드의 위치를 알려줍니다
Code Connect는 Figma 컴포넌트와 코드베이스의 실제 컴포넌트를 연결합니다. 이 연결을 Figma MCP 서버가 읽으면 실제 import, 컴포넌트 이름, 현재 디자인 속성값이 반영된 코드 조각을 에이전트에 전달할 수 있습니다.
| 구현 과정 | 연결 정보가 없을 때 | Code Connect가 있을 때 |
|---|---|---|
| 컴포넌트 선택 | 저장소를 검색하거나 비슷한 UI를 새로 작성 | 매핑된 프로덕션 컴포넌트부터 참조 |
| 속성 변환 | Figma 속성을 보고 코드 API를 추측 | 정의된 prop 변환을 사용 |
| 스타일 처리 | 새 CSS나 유사한 값을 만들 수 있음 | 기존 컴포넌트와 토큰을 재사용하기 쉬움 |
| 수정 작업 | 검색·디버깅·교체가 이어질 수 있음 | 초기 후보가 좁아져 불필요한 탐색이 줄어듦 |
Coinbase의 공개 디자인 시스템 저장소에는 Web React, React Native, Android Compose, iOS SwiftUI 구현이 별도 패키지로 존재합니다. 같은 이름의 버튼도 플랫폼마다 import 경로와 API가 다를 수 있으므로, 컴포넌트 이름 목록보다 실제 구현을 가리키는 연결이 더 유용합니다.
첫 성공은 컴포넌트 하나를 Inspect에 띄우는 것입니다
처음부터 Coinbase의 Stepper를 흉내 내거나 전체 라이브러리를 연결할 필요는 없습니다. Figma 속성과 프로덕션 API를 직접 확인할 수 있는 Button 하나로 시작하세요. 다음 절차의 템플릿은 공식 구조를 바탕으로 만든 입력 예시이며, Coinbase가 사용한 실제 매핑은 아닙니다.
현재 Code Connect는 Figma Organization 또는 Enterprise 플랜의 Full·Dev seat에서 제공됩니다. 시작 전 루트 컴포넌트가 있는 Figma 라이브러리, 실제 컴포넌트 저장소, Node.js 18 이상, Code Connect Write와 File content Read 범위가 설정된 개인 액세스 토큰을 준비해야 합니다.
- CLI를 설치합니다. 저장소에서 Node.js 버전을 확인한 뒤
npm install --global @figma/code-connect@latest를 실행하세요. - 설정 파일을 만듭니다. 저장소 루트의
figma.config.json에 아래 최소 설정을 넣습니다. 다른 위치에 템플릿을 둘 경우include패턴을 그 경로에 맞게 바꾸세요.
{
"codeConnect": {
"include": ["**/*.figma.ts"],
"label": "React",
"language": "jsx"
}
}- 루트 컴포넌트 URL을 복사합니다. Figma에서 연결할 Button의 루트 컴포넌트를 우클릭하고 Copy link to selection을 선택하세요.
Button.figma.ts를 작성합니다. 아래 예시의 URL,Label·Disabled·Size라는 Figma 속성명, enum 값,ButtonAPI와 import 경로를 팀의 실제 값으로 교체하세요.id도 저장소 안에서 겹치지 않는 값으로 정합니다.
// url=<Copy link to selection으로 복사한 루트 컴포넌트 URL>
import figma from 'figma'
const instance = figma.selectedInstance
const label = instance.getString('Label')
const disabled = instance.getBoolean('Disabled')
const size = instance.getEnum('Size', {
Large: 'large',
Medium: 'medium',
Small: 'small',
})
export default {
example: figma.code`
<Button size={${size}} disabled={${disabled}}>
${label}
</Button>
`,
imports: ['import { Button } from "components/Button"'],
id: 'button',
}
- 원본 코드와 대조합니다. Figma 속성명이 정확한지, enum의 각 선택지가 실제 prop 값으로 변환되는지, import 경로와 기본값이 현재 프로덕션 코드와 일치하는지 확인하세요. 잘못된 연결은 틀린 답을 더 빠르게 전달할 수 있습니다.
- 인증하고 게시합니다. 개인 액세스 토큰을 저장소나 명령 기록에 직접 적지 말고 조직의 비밀 관리 방식으로
FIGMA_ACCESS_TOKEN에 로드합니다. 저장소 루트에서npx figma connect publish를 실행하세요. - 렌더링된 코드 조각을 확인합니다. CLI가 반환한 컴포넌트 URL을 열고 Dev Mode로 전환한 뒤 Inspect 패널을 확인하세요. 첫 성공 기준은 정의한 import와 현재 Figma 속성값이 반영된 코드 조각이 표시되는 것입니다.
Inspect는 매핑 정의를 편집하는 화면이 아닙니다.
Inspect에 표시된 결과 코드 조각과 Button.figma.ts 원본을 나란히 비교하세요. import와 prop 값이 기대와 다르면 템플릿의 속성명·enum 변환·코드 API를 수정하고 다시 게시합니다. 여기까지 성공해도 AI 코딩 비용이 줄었다고 판단할 수는 없습니다.
비용 비교는 게시 성공 뒤의 선택 단계입니다
Code Connect 게시와 AI 코딩 비교는 별개의 작업입니다. 비교하려면 지원되는 코딩 클라이언트에 Figma MCP 원격 서버를 별도로 연결하고 Figma 계정으로 인증해야 합니다. 클라이언트별 설정은 공식 원격 서버 설치 문서에서 선택할 수 있습니다.
기준선은 Code Connect가 게시되지 않은 격리된 평가 노드에서 먼저 기록하세요. 운영 라이브러리의 연결을 해제하지 말고 복제 파일이나 별도 평가 노드를 사용합니다. 연결 전후에 같은 디자인 링크, 프롬프트, 모델, 저장소 초기 상태와 캐시 조건을 유지해야 합니다.
이 Figma 디자인을 현재 저장소에 구현해줘: <동일한 Figma 디자인 링크>. 저장소에 이미 있는 디자인 시스템 컴포넌트를 우선 사용하고, 구현 후 빌드와 테스트 결과를 알려줘.
이 요청문은 비교 입력의 예시입니다. 두 조건에서 문구를 바꾸지 말고, 실행마다 입력·출력·캐시 생성·캐시 읽기 토큰, 실제 청구액, 완료 시간, 도구 호출 수를 기록하세요. 토큰과 비용의 확인 위치는 사용하는 클라이언트와 과금 경로에 따라 다르므로, 비교 전에 팀이 접근할 수 있는 로그나 청구 기록을 정해야 합니다.
성공 여부에는 올바른 기존 컴포넌트와 디자인 토큰을 사용했는지, 빌드와 테스트를 통과했는지도 포함하세요. 비용만 내려갔지만 UI를 원시 CSS로 다시 만들었다면 검색 비용을 줄인 성공으로 보기 어렵습니다.
22.5%는 목표치가 아니라 비교 가설입니다
토큰 감소율과 비용 감소율은 같을 필요가 없습니다. Claude는 기본 입력, 캐시 쓰기, 캐시 읽기, 출력 토큰에 서로 다른 단가를 적용하며 사용량도 구분해 기록합니다. Coinbase가 실행별 토큰 유형과 비용 계산식을 공개하지 않았기 때문에 11.5%와 22.5% 사이의 차이를 외부에서 재계산할 수는 없습니다.
Figma의 별도 평가에서도 개선 방향은 같았습니다. React 기반 디자인 시스템 두 개의 27개 테스트 사례에서 Code Connect 사용 시 중앙값 토큰 사용량은 29.5%, 작업 시간은 19.6% 감소했고, 코드 품질 중앙값은 1~4점 척도에서 2점에서 3점으로 올랐습니다. Coinbase 평가와 모델·과제·집계 방식이 다르므로 두 결과를 합쳐 하나의 평균 절감률로 만들면 안 됩니다.
눈여겨볼 변수는 연결 커버리지입니다. Figma 평가에서 MCP 응답 중 Code Connect 조각 비중이 평균 20%였던 예제 시스템은 약 6%였던 내부 시스템보다 개선 폭이 컸습니다. 두 비율은 권장 목표치가 아니라 서로 다른 시스템의 관찰값이에요. 자체 결과도 전체 평균만 보지 말고 화면에 포함된 디자인 시스템 컴포넌트와 실제 연결 비중에 따라 나눠봐야 합니다.
연결 파일도 컴포넌트와 함께 관리하세요
파일럿에서 검색과 재작성이 줄었다면 반복 사용량과 오류 빈도가 높은 컴포넌트부터 연결 범위를 넓히세요. Coinbase는 오래된 매핑과 미연결 컴포넌트가 있던 상태에서 Claude Code와 관련 스킬을 사용해 약 4시간 만에 수백 개 모바일·웹 컴포넌트로 범위를 확장했다고 설명합니다. 이는 Coinbase의 자체 보고이며 다른 팀의 예상 작업시간으로 쓰면 안 됩니다.
새 컴포넌트를 출시하거나 prop을 바꿀 때 Code Connect 템플릿도 같은 변경에서 검토하는 편이 좋습니다. Coinbase도 컴포넌트를 만들거나 수정할 때 대응 템플릿을 동기화한다고 설명합니다. 최신 연결은 검색을 줄이는 자산이지만, 오래된 연결은 낡은 import와 prop을 빠르게 퍼뜨리는 부채가 됩니다.
