Figma Code Connect로 AI 컴포넌트 재사용률 높이기 — 대규모 디자인 시스템에서 매핑하고 측정하기까지

이 글은 Figma Dev Mode를 쓰는 프론트엔드 개발자를 대상으로 합니다. Figma Dev Mode가 처음이라면, 개발자가 Figma에서 컴포넌트를 선택했을 때 CSS 속성이나 코드 스니펫을 확인할 수 있는 기능이라고 이해하면 충분합니다.

디자인 시스템을 열심히 만들어뒀는데, AI 에디터가 그걸 무시하고 새 컴포넌트를 뚝딱 만들어버린 경험이 있으신가요? 저도 처음엔 왜 그런지 몰랐는데, 알고 보니 단순한 이유였습니다. 더 정확히 말하면, 당연한 이유였죠. AI는 우리 코드베이스에 어떤 컴포넌트가 있는지, 어떻게 쓰는지 전혀 모르는 상태에서 작업하기 때문입니다. Figma MCP Server가 있어도 Code Connect 매핑 파일이 없으면 AI에게 전달되는 건 레이아웃 좌표뿐이에요.

Code Connect 매핑 파일을 체계적으로 갖추면 AI가 "추측해서 새 컴포넌트를 생성"하는 게 아니라 "기존 컴포넌트를 import해서 재사용"하는 구조로 전환됩니다. 실제 도입 사례에서 개발자 1인당 주당 98분을 절약하고, 특정 프로젝트에서 개발 시간을 50% 단축했다는 수치가 보고된 이유가 여기에 있습니다. 이 글에서는 수백 개 컴포넌트를 가진 디자인 시스템에서 Code Connect를 체계적으로 적용하는 방법과, 그 효과를 정량적으로 측정하는 방법을 함께 살펴봅니다.

핵심 개념

Code Connect가 AI 코드 생성에서 하는 역할

Code Connect는 Figma 컴포넌트와 실제 코드 컴포넌트를 1:1로 연결하는 매핑 시스템입니다. 컴포넌트 파일 옆에 .figma.ts 파일을 하나 만들어두면, Figma MCP Server가 AI 에디터(Cursor, Claude Code 등)에 단순 레이아웃 좌표가 아닌 실제 import 경로, prop 시그니처, 사용 예시를 전달합니다.

매핑 파일 하나에는 네 가지 정보가 들어갑니다.

정보	역할
Figma 컴포넌트 URL	어떤 Figma 컴포넌트와 연결할지 식별
`source` 필드	실제 코드 파일 위치
Props 매핑	Figma 속성명 ↔ 코드 prop 변환 로직
`example` 함수	Dev Mode와 AI 에디터에 노출할 실제 사용 예시

Figma MCP Server란 AI 코드 에디터가 Figma 파일 정보를 가져올 수 있도록 Model Context Protocol 방식으로 연결해주는 서버입니다. Code Connect 매핑이 있는 컴포넌트에 대해 MCP 툴이 응답할 때, 단순 레이아웃 정보가 아니라 import 경로, props 정의, 코드 예시가 JSON 형태로 함께 포함됩니다. AI는 이 데이터를 보고 "이 컴포넌트가 어디에 있고, 어떻게 쓰는지"를 알게 됩니다.

대규모 적용을 위한 두 가지 접근법

수백 개 컴포넌트를 가진 팀이라면 방식 선택이 중요합니다.

방식	특징	적합한 상황
Code Connect CLI	로컬에서 실행, props 매핑과 동적 코드 예시까지 지원, 정밀도 높음	코드베이스가 이미 있고 세밀하게 제어하고 싶을 때
Code Connect UI	Figma 내에서 실행, GitHub 리포지토리와 직접 연결, AI가 코드 파일 자동 추천, 코딩 불필요	Organization/Enterprise 플랜, 초기 설정을 빠르게 잡을 때

솔직히 CLI 방식이 더 정확하고 유연합니다. UI 방식은 Enterprise 전용이라 제약이 있지만, 초기 진입 장벽이 거의 없어서 설정 공수가 걱정된다면 UI로 큰 그림을 잡고 CLI로 정밀하게 보완하는 전략도 현실적입니다.

실전 적용

figma.config.json으로 매핑 범위 먼저 잡기

처음 Code Connect를 시도할 때 가장 흔히 하는 실수가 .figma.ts 파일부터 만들기 시작하는 것입니다. 저도 처음에 그랬는데, 파일을 다 만들고 나서 figma connect publish를 실행했더니 아무것도 올라가지 않아서 한참 헤맸습니다. CLI가 어디를 봐야 할지 모르기 때문인데, 먼저 프로젝트 루트에 figma.config.json을 설정해두는 것이 순서입니다.

json

{
  "codeConnect": {
    "include": ["src/components/**/*.figma.ts"],
    "label": "React",
    "language": "jsx"
  }
}

모노레포 환경이라면 패키지별로 figma.config.json을 분리해서 각 패키지 범위를 명시해주는 것을 권장합니다. packages/ui/figma.config.json, packages/marketing/figma.config.json 형태로 관리하면 공통 컴포넌트와 도메인별 컴포넌트의 매핑 범위가 섞이지 않습니다.

컴포넌트별 매핑 파일 작성하기

가장 기본이 되는 패턴입니다. Button 컴포넌트를 예시로 보면 이렇게 됩니다.

Figma 컴포넌트 URL은 Figma 파일에서 해당 컴포넌트를 선택한 뒤 우클릭 → "Copy link to selection"으로 복사할 수 있습니다. 형태는 보통 아래와 같습니다.

https://www.figma.com/design/[FILE_KEY]/[FILE_NAME]?node-id=[NODE_ID]

이걸 그대로 figma.connect의 두 번째 인자로 넣어주면 됩니다.

typescript

// Button.figma.ts
import figma from "@figma/code-connect";
import { Button } from "./Button";
 
figma.connect(Button, "https://www.figma.com/design/[FILE_KEY]/[FILE_NAME]?node-id=[NODE_ID]", {
  props: {
    variant: figma.enum("Variant", {
      primary: "primary",
      secondary: "secondary",
    }),
    disabled: figma.boolean("Disabled"),
    label: figma.string("Label"),
  },
  example: ({ variant, disabled, label }) => (
    <Button variant={variant} disabled={disabled}>{label}</Button>
  ),
});

코드 요소	역할
`figma.connect(Button, URL, ...)`	코드 컴포넌트와 Figma 컴포넌트를 연결
`figma.enum("Variant", {...})`	Figma Variant 속성을 코드 prop 값으로 변환
`figma.boolean("Disabled")`	Figma 불리언 레이어를 코드 prop으로 연결
`example` 함수	Dev Mode와 AI 에디터에 노출되는 실제 사용 예시

한 가지 주의할 점은 대소문자입니다. Figma에서 "Variant"로 돼 있는데 코드에서 "variant"로 썼다가 매핑이 조용히 실패하는 경우가 종종 있습니다. Figma 속성명을 정확히 복사해서 쓰는 게 안전합니다.

아이콘처럼 반복 구조가 많은 컴포넌트는 배치 방식으로

아이콘이 300개라고 해서 .figma.ts 파일을 300개 만드는 건 현실적이지 않습니다. 동일한 코드 구조를 공유하는 컴포넌트는 단일 파일에서 루프로 처리하는 배치 방식을 활용할 수 있습니다. 실무에서 자주 맞닥뜨리는 상황인데, 배치 처리 없이 아이콘 개별 파일로 접근했다가 유지보수에서 꽤 고생하는 경우를 봤습니다.

typescript

// icons.figma.ts
import figma from "@figma/code-connect";
import * as Icons from "./icons";
 
const iconMappings = [
  { name: "IconArrow", figmaUrl: "https://www.figma.com/design/[FILE_KEY]/[FILE_NAME]?node-id=[ARROW_NODE_ID]" },
  { name: "IconClose", figmaUrl: "https://www.figma.com/design/[FILE_KEY]/[FILE_NAME]?node-id=[CLOSE_NODE_ID]" },
  // ... 수백 개도 동일한 패턴으로 추가
];
 
iconMappings.forEach(({ name, figmaUrl }) => {
  const IconComponent = Icons[name as keyof typeof Icons];
  // 존재하지 않는 아이콘 이름이 들어올 경우를 방어합니다
  if (!IconComponent) return;
 
  figma.connect(IconComponent, figmaUrl, {
    props: {
      size: figma.enum("Size", { sm: "sm", md: "md", lg: "lg" }),
    },
    example: ({ size }) => <IconComponent size={size} />,
  });
});

Figma 공식 문서도 아이콘 라이브러리에 이 방식을 권장하고 있습니다.

PR마다 컴포넌트 재사용률 자동으로 추적하기

Code Connect를 적용했다면 그 효과를 실제로 측정해야 의미가 있습니다. 실무에서 쓸 수 있는 세 가지 정량 지표가 있습니다.

Coverage(커버리지): 전체 컴포넌트 렌더 수 중 디자인 시스템 컴포넌트 비율. Mews, Supernova 같은 디자인 시스템 팀들이 공개한 사례에서 성숙한 시스템의 기준점으로 80%+를 언급하는 경우가 많습니다.
Detachment Rate(분리율): 디자인 시스템 컴포넌트를 커스텀 변형으로 교체한 비율. 높을수록 디자인 시스템이 현장 요구를 못 따라가고 있다는 신호입니다.
Adoption Rate(채택율): 디자인 시스템을 사용 중인 활성 프로젝트 비율.

AI 생성 코드 전용으로는 PR 단위 추적이 가장 실용적입니다. GitHub Actions로 PR마다 Omlet CLI를 실행하면 컴포넌트 변동 리포트를 자동으로 생성할 수 있습니다.

yaml

# .github/workflows/component-report.yml
name: Component Report
on: [pull_request]
jobs:
  omlet-scan:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Run Omlet scan
        run: npx omlet scan --output pr-report.json
      - name: Comment PR with report
        uses: actions/github-script@v6
        with:
          script: |
            const report = require('./pr-report.json');
            // 실제 Omlet 출력 스키마는 버전마다 다를 수 있으므로
            // 먼저 pr-report.json 구조를 로컬에서 한 번 확인해보는 걸 권장합니다
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: `## 컴포넌트 재사용 리포트\n\`\`\`json\n${JSON.stringify(report, null, 2)}\n\`\`\``
            });

"Component Not Found" 패턴 모니터링도 유용합니다. AI가 존재하지 않는 컴포넌트를 새로 만든 커밋을 감지하면, 어떤 컴포넌트의 매핑이 빠져 있는지 역으로 파악할 수 있습니다.

장단점 분석

장점

항목	내용
AI 재사용 정확도 향상	매핑 없이는 AI가 컴포넌트 존재 자체를 모르고 새로 생성함. 매핑 후 MCP가 실제 경로와 props를 JSON으로 전달해 기존 컴포넌트 재사용률이 크게 높아짐
Dev Mode 스니펫 자동화	디자이너가 Figma에서 컴포넌트 선택 시 실제 프로덕션 코드 예시를 즉시 확인 가능
레거시 컴포넌트 사용 억제	매핑 파일이 있는 컴포넌트만 AI가 참조하므로 구버전 컴포넌트가 자연스럽게 배제됨
멀티프레임워크 지원	React, Vue, Angular, Web Components, SwiftUI, Compose 등 폭넓게 지원
시간 절약 효과	Figma 공식 블로그에서 인용된 도입 사례 기준, 개발자 1인당 주당 98분 절약 및 특정 프로젝트 개발 시간 50% 단축 보고

단점 및 주의사항

항목	내용	대응 방안
초기 설정 공수	컴포넌트 수백 개 보유 시 `.figma.ts` 작성이 상당한 작업량	아이콘 등 동일 패턴은 배치 방식 활용, Code Connect UI로 초기 자동 추천 병행
Props 매핑 불일치	Figma 속성명과 코드 prop명이 다르면 매핑 유지 비용 발생	디자이너-개발자 간 속성 명명 규칙을 미리 정립
Enterprise 제한	Code Connect UI는 Organization/Enterprise 플랜에만 제공	CLI 방식으로 동일 목적 달성 가능
Design Token 연동 미완	W3C Design Tokens Format을 Code Connect에 직접 연결하는 기능 미지원	Style Dictionary를 별도 파이프라인으로 병행 운영

Style Dictionary란 Figma 토큰을 다양한 플랫폼의 코드 변수(CSS Custom Properties, JS 상수 등)로 변환해주는 오픈소스 파이프라인 도구입니다.

실무에서 가장 흔한 실수

figma.config.json 없이 .figma.ts부터 만들기: 파일을 아무리 작성해도 CLI가 어디서 찾아야 할지 모르면 업로드가 되지 않습니다. config 설정을 먼저 잡아두는 것이 출발점입니다.
Figma 속성명과 코드 prop명 대소문자 혼용: Figma에서 "Variant"라고 돼 있을 때 코드에서 "variant"로 쓰면 매핑이 조용히 실패합니다. 에러도 없이 넘어가서 원인을 찾기 어려운 경우가 많습니다.
측정 없이 도입으로 끝내기: Code Connect 도입 자체가 목적이 아니라 AI 재사용률 향상이 목적입니다. Omlet이나 GitHub Actions 기반 리포트를 함께 설정해두지 않으면 개선이 실제로 일어나고 있는지 확인할 방법이 없습니다.

마치며

매핑 커버리지가 올라갈수록 AI는 단순히 코드를 생성하는 도구가 아니라, 팀이 쌓아온 컴포넌트 자산을 잘 이해하는 협업 도구로 바뀝니다. 그 전환을 만드는 핵심이 Code Connect 매핑 파일이고, 그 전환이 실제로 일어나고 있는지를 숫자로 확인하는 것이 측정입니다.

지금 바로 시작할 수 있는 3단계입니다.

pnpm add @figma/code-connect로 패키지를 설치하고, 프로젝트 루트에 figma.config.json을 만들어 "include": ["src/components/**/*.figma.ts"] 범위를 먼저 잡아둡니다. 이게 모든 것의 출발점입니다.
팀에서 가장 자주 쓰이는 컴포넌트 5~10개를 골라 .figma.ts 파일을 작성한 뒤, figma connect publish 명령으로 Figma에 업로드합니다. Dev Mode에서 스니펫이 보이는지 확인해보시면 매핑이 제대로 연결됐는지 바로 알 수 있습니다.
Omlet을 연결하거나 GitHub Actions에 컴포넌트 리포트 스텝을 추가해, Code Connect 매핑 전후로 AI가 만든 PR에서 신규 컴포넌트 생성 빈도가 어떻게 달라지는지 2~4주 동안 추적해봅니다. 숫자가 달라지는 걸 보는 순간 다음 컴포넌트 매핑 작업이 훨씬 즐거워집니다.

참고 자료

Figma Code Connect로 AI 컴포넌트 재사용률 높이기 — 대규모 디자인 시스템에서 매핑하고 측정하기까지 | DEV BAK - 기술블로그

Figma Code Connect로 AI 컴포넌트 재사용률 높이기 — 대규모 디자인 시스템에서 매핑하고 측정하기까지

핵심 개념

Code Connect가 AI 코드 생성에서 하는 역할

매핑 파일 하나에는 네 가지 정보가 들어갑니다.

정보	역할
Figma 컴포넌트 URL	어떤 Figma 컴포넌트와 연결할지 식별
`source` 필드	실제 코드 파일 위치
Props 매핑	Figma 속성명 ↔ 코드 prop 변환 로직
`example` 함수	Dev Mode와 AI 에디터에 노출할 실제 사용 예시

Figma MCP Server란 AI 코드 에디터가 Figma 파일 정보를 가져올 수 있도록 Model Context Protocol 방식으로 연결해주는 서버입니다. Code Connect 매핑이 있는 컴포넌트에 대해 MCP 툴이 응답할 때, 단순 레이아웃 정보가 아니라 import 경로, props 정의, 코드 예시가 JSON 형태로 함께 포함됩니다. AI는 이 데이터를 보고 "이 컴포넌트가 어디에 있고, 어떻게 쓰는지"를 알게 됩니다.

대규모 적용을 위한 두 가지 접근법

수백 개 컴포넌트를 가진 팀이라면 방식 선택이 중요합니다.

방식	특징	적합한 상황
Code Connect CLI	로컬에서 실행, props 매핑과 동적 코드 예시까지 지원, 정밀도 높음	코드베이스가 이미 있고 세밀하게 제어하고 싶을 때
Code Connect UI	Figma 내에서 실행, GitHub 리포지토리와 직접 연결, AI가 코드 파일 자동 추천, 코딩 불필요	Organization/Enterprise 플랜, 초기 설정을 빠르게 잡을 때

실전 적용

figma.config.json으로 매핑 범위 먼저 잡기

json

{
  "codeConnect": {
    "include": ["src/components/**/*.figma.ts"],
    "label": "React",
    "language": "jsx"
  }
}

컴포넌트별 매핑 파일 작성하기

가장 기본이 되는 패턴입니다. Button 컴포넌트를 예시로 보면 이렇게 됩니다.

Figma 컴포넌트 URL은 Figma 파일에서 해당 컴포넌트를 선택한 뒤 우클릭 → "Copy link to selection"으로 복사할 수 있습니다. 형태는 보통 아래와 같습니다.

https://www.figma.com/design/[FILE_KEY]/[FILE_NAME]?node-id=[NODE_ID]

이걸 그대로 figma.connect의 두 번째 인자로 넣어주면 됩니다.

typescript

// Button.figma.ts
import figma from "@figma/code-connect";
import { Button } from "./Button";
 
figma.connect(Button, "https://www.figma.com/design/[FILE_KEY]/[FILE_NAME]?node-id=[NODE_ID]", {
  props: {
    variant: figma.enum("Variant", {
      primary: "primary",
      secondary: "secondary",
    }),
    disabled: figma.boolean("Disabled"),
    label: figma.string("Label"),
  },
  example: ({ variant, disabled, label }) => (
    <Button variant={variant} disabled={disabled}>{label}</Button>
  ),
});

코드 요소	역할
`figma.connect(Button, URL, ...)`	코드 컴포넌트와 Figma 컴포넌트를 연결
`figma.enum("Variant", {...})`	Figma Variant 속성을 코드 prop 값으로 변환
`figma.boolean("Disabled")`	Figma 불리언 레이어를 코드 prop으로 연결
`example` 함수	Dev Mode와 AI 에디터에 노출되는 실제 사용 예시

아이콘처럼 반복 구조가 많은 컴포넌트는 배치 방식으로

typescript

// icons.figma.ts
import figma from "@figma/code-connect";
import * as Icons from "./icons";
 
const iconMappings = [
  { name: "IconArrow", figmaUrl: "https://www.figma.com/design/[FILE_KEY]/[FILE_NAME]?node-id=[ARROW_NODE_ID]" },
  { name: "IconClose", figmaUrl: "https://www.figma.com/design/[FILE_KEY]/[FILE_NAME]?node-id=[CLOSE_NODE_ID]" },
  // ... 수백 개도 동일한 패턴으로 추가
];
 
iconMappings.forEach(({ name, figmaUrl }) => {
  const IconComponent = Icons[name as keyof typeof Icons];
  // 존재하지 않는 아이콘 이름이 들어올 경우를 방어합니다
  if (!IconComponent) return;
 
  figma.connect(IconComponent, figmaUrl, {
    props: {
      size: figma.enum("Size", { sm: "sm", md: "md", lg: "lg" }),
    },
    example: ({ size }) => <IconComponent size={size} />,
  });
});

Figma 공식 문서도 아이콘 라이브러리에 이 방식을 권장하고 있습니다.

PR마다 컴포넌트 재사용률 자동으로 추적하기

Code Connect를 적용했다면 그 효과를 실제로 측정해야 의미가 있습니다. 실무에서 쓸 수 있는 세 가지 정량 지표가 있습니다.

Coverage(커버리지): 전체 컴포넌트 렌더 수 중 디자인 시스템 컴포넌트 비율. Mews, Supernova 같은 디자인 시스템 팀들이 공개한 사례에서 성숙한 시스템의 기준점으로 80%+를 언급하는 경우가 많습니다.
Detachment Rate(분리율): 디자인 시스템 컴포넌트를 커스텀 변형으로 교체한 비율. 높을수록 디자인 시스템이 현장 요구를 못 따라가고 있다는 신호입니다.
Adoption Rate(채택율): 디자인 시스템을 사용 중인 활성 프로젝트 비율.

yaml

# .github/workflows/component-report.yml
name: Component Report
on: [pull_request]
jobs:
  omlet-scan:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Run Omlet scan
        run: npx omlet scan --output pr-report.json
      - name: Comment PR with report
        uses: actions/github-script@v6
        with:
          script: |
            const report = require('./pr-report.json');
            // 실제 Omlet 출력 스키마는 버전마다 다를 수 있으므로
            // 먼저 pr-report.json 구조를 로컬에서 한 번 확인해보는 걸 권장합니다
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: `## 컴포넌트 재사용 리포트\n\`\`\`json\n${JSON.stringify(report, null, 2)}\n\`\`\``
            });

장단점 분석

장점

항목	내용
AI 재사용 정확도 향상	매핑 없이는 AI가 컴포넌트 존재 자체를 모르고 새로 생성함. 매핑 후 MCP가 실제 경로와 props를 JSON으로 전달해 기존 컴포넌트 재사용률이 크게 높아짐
Dev Mode 스니펫 자동화	디자이너가 Figma에서 컴포넌트 선택 시 실제 프로덕션 코드 예시를 즉시 확인 가능
레거시 컴포넌트 사용 억제	매핑 파일이 있는 컴포넌트만 AI가 참조하므로 구버전 컴포넌트가 자연스럽게 배제됨
멀티프레임워크 지원	React, Vue, Angular, Web Components, SwiftUI, Compose 등 폭넓게 지원
시간 절약 효과	Figma 공식 블로그에서 인용된 도입 사례 기준, 개발자 1인당 주당 98분 절약 및 특정 프로젝트 개발 시간 50% 단축 보고

단점 및 주의사항

항목	내용	대응 방안
초기 설정 공수	컴포넌트 수백 개 보유 시 `.figma.ts` 작성이 상당한 작업량	아이콘 등 동일 패턴은 배치 방식 활용, Code Connect UI로 초기 자동 추천 병행
Props 매핑 불일치	Figma 속성명과 코드 prop명이 다르면 매핑 유지 비용 발생	디자이너-개발자 간 속성 명명 규칙을 미리 정립
Enterprise 제한	Code Connect UI는 Organization/Enterprise 플랜에만 제공	CLI 방식으로 동일 목적 달성 가능
Design Token 연동 미완	W3C Design Tokens Format을 Code Connect에 직접 연결하는 기능 미지원	Style Dictionary를 별도 파이프라인으로 병행 운영

Style Dictionary란 Figma 토큰을 다양한 플랫폼의 코드 변수(CSS Custom Properties, JS 상수 등)로 변환해주는 오픈소스 파이프라인 도구입니다.

실무에서 가장 흔한 실수

figma.config.json 없이 .figma.ts부터 만들기: 파일을 아무리 작성해도 CLI가 어디서 찾아야 할지 모르면 업로드가 되지 않습니다. config 설정을 먼저 잡아두는 것이 출발점입니다.
Figma 속성명과 코드 prop명 대소문자 혼용: Figma에서 "Variant"라고 돼 있을 때 코드에서 "variant"로 쓰면 매핑이 조용히 실패합니다. 에러도 없이 넘어가서 원인을 찾기 어려운 경우가 많습니다.
측정 없이 도입으로 끝내기: Code Connect 도입 자체가 목적이 아니라 AI 재사용률 향상이 목적입니다. Omlet이나 GitHub Actions 기반 리포트를 함께 설정해두지 않으면 개선이 실제로 일어나고 있는지 확인할 방법이 없습니다.

마치며

지금 바로 시작할 수 있는 3단계입니다.

pnpm add @figma/code-connect로 패키지를 설치하고, 프로젝트 루트에 figma.config.json을 만들어 "include": ["src/components/**/*.figma.ts"] 범위를 먼저 잡아둡니다. 이게 모든 것의 출발점입니다.
팀에서 가장 자주 쓰이는 컴포넌트 5~10개를 골라 .figma.ts 파일을 작성한 뒤, figma connect publish 명령으로 Figma에 업로드합니다. Dev Mode에서 스니펫이 보이는지 확인해보시면 매핑이 제대로 연결됐는지 바로 알 수 있습니다.
Omlet을 연결하거나 GitHub Actions에 컴포넌트 리포트 스텝을 추가해, Code Connect 매핑 전후로 AI가 만든 PR에서 신규 컴포넌트 생성 빈도가 어떻게 달라지는지 2~4주 동안 추적해봅니다. 숫자가 달라지는 걸 보는 순간 다음 컴포넌트 매핑 작업이 훨씬 즐거워집니다.

핵심 개념

Code Connect가 AI 코드 생성에서 하는 역할

대규모 적용을 위한 두 가지 접근법

실전 적용

figma.config.json으로 매핑 범위 먼저 잡기

컴포넌트별 매핑 파일 작성하기

아이콘처럼 반복 구조가 많은 컴포넌트는 배치 방식으로

PR마다 컴포넌트 재사용률 자동으로 추적하기

장단점 분석

장점

단점 및 주의사항

실무에서 가장 흔한 실수

마치며

참고 자료

핵심 개념

Code Connect가 AI 코드 생성에서 하는 역할

대규모 적용을 위한 두 가지 접근법

실전 적용

figma.config.json으로 매핑 범위 먼저 잡기

컴포넌트별 매핑 파일 작성하기

아이콘처럼 반복 구조가 많은 컴포넌트는 배치 방식으로

PR마다 컴포넌트 재사용률 자동으로 추적하기

장단점 분석

장점

단점 및 주의사항

실무에서 가장 흔한 실수

마치며

참고 자료

추천 포스트

Figma MCP Server + Claude Code/Cursor 연동: 디자인 URL 하나로 React 컴포넌트 만들기

같은 GPU에서 LLM 서빙 처리량을 2~4배 향상시키는 다섯 가지 추론 최적화 기법 — 양자화부터 Speculative Decoding까지

AI 에이전트 모니터링·평가 체계 구축: 프로덕션에서 조용히 망가지는 품질을 DeepEval·Langfuse로 잡아내는 법

Figma MCP로 디자인-코드 반복 주기 최대 80% 단축하기: Model Context Protocol과 AI 코딩 에이전트 실전 연동

AI 에이전트에 코딩 규칙과 디자인 규칙을 동시에 적용하는 Claude Code 팀 설정 — CLAUDE.md와 DESIGN.md 병용법

DESIGN.md: AI 코딩 에이전트가 브랜드 디자인 규칙을 스스로 따르게 만드는 에이전트 네이티브 파일 포맷