AI로 디자인 시스템을 통째로 만들 수 있다? 아직은 아니에요. 하지만 디자인 시스템의 가장 지루한 일 — 토큰 감사, 문서화, 일관성 검증 — 을 AI에 맡기면 50배는 빨라져요. UI Collective의 Kirk이 실제로 쓰는 워크플로우를 공개했는데, 핵심은 Figma MCP + Cursor 조합이에요.

3초 요약
Figma 디자인 토큰 테이블 → Cursor Rule 자동 생성 → 감사 Command 실행 → 변수 오류 자동 탐지 → 문서 자동 생성

이게 뭔데?

AI와 디자인 시스템의 현재 상태를 솔직하게 정리하면 이래요. AI가 못 하는 것이 아직 많거든요:

  1. 변수 라이브러리를 처음부터 만드는 것
    "SaaS 헬스테크 스타트업용 변수 라이브러리 만들어줘" — 안 돼요. 상당한 입력값과 반복 작업이 필요해요.
  2. 디자인 시스템으로 Figma 디자인을 만드는 것
    Figma Make도 시도하지만 정확도가 떨어져요. 패딩 138.07px, 텍스트 스타일 미적용 같은 문제가 발생해요.
  3. 컴포넌트를 만드는 것
    AI가 디자인은 만들지만, 오토 레이아웃 프레임 대신 그룹을 쓰는 등 실전에서 못 쓰는 결과물이 나와요.

그러면 AI가 잘하는 것은 뭘까요? 감사(audit)와 문서화(documentation)예요. 사람이 하면 눈이 빠지는 반복 검증 작업을 AI가 순식간에 처리해요.

Figma MCP란?

Model Context Protocol(MCP)을 통해 Cursor AI가 Figma 파일을 직접 읽을 수 있게 해주는 연결이에요. 디자인 파일의 컬러, 패딩, 폰트, 컴포넌트 구조를 AI가 실시간으로 파악하죠. 설정은 Cursor 설정 → MCP → Figma 서버 추가만 하면 돼요.

뭐가 달라지는 건데?

기존에 디자인 시스템의 토큰이 제대로 적용되었는지 확인하려면, 디자이너가 컴포넌트 하나하나를 클릭하면서 변수를 검증해야 했어요. 대시보드 하나에 수백 개 요소가 있다면? 끔찍하죠.

수동 감사 AI 자동 감사 (Figma MCP + Cursor)
소요 시간 컴포넌트당 수 분 전체 페이지 수 초
정확도 사람 눈에 의존 (실수 가능) 규칙 기반 자동 탐지
일관성 감사자마다 다름 동일한 규칙으로 항상 동일한 결과
스케일 페이지 많을수록 비례 증가 페이지 수에 거의 무관

Kirk의 실전 워크플로우는 두 가지 핵심 자동화로 나뉘어요:

자동화 1: 디자인 토큰 감사

Figma에 정리된 토큰 테이블(토큰 이름, 라이트/다크 모드 값, 설명)을 Cursor에 Figma 링크로 전달하면, AI가 자동��로 Cursor Rule을 생성해요. 이 Rule은 "surface-default는 배경에만, text-primary는 텍스트에만" 같은 변수 사용 규칙이에요.

그다음 재사용 가능한 Command를 만들어요. @check-variables를 호출하고 Figma 링크를 붙이면, AI가 해당 디자인의 모든 요소를 분석해서 잘못된 변수를 찾아내요. 예를 들어 "텍스트에 border 변수가 적용됨 → text-primary-on-color를 써야 합니다", "border가 하드코딩된 hex값 → border-default를 적용하세요" 같은 구체적 수정안을 제시해요.

자동화 2: 컴포넌트 문서 생성

Figma 컴포넌트의 링크를 전달하면, AI가 컴포넌트를 분석해서 이름, 목적, 사용 시점, 미사용 시점, 접근성 가이드라인, 속성, 변형을 자동으로 문서화해요. 이걸 Zero Height나 Supernova 같은 문서 사이트에 바로 올릴 수 있어요.

주의할 점

AI가 생성한 문서는 출발점이지 완성품이 아니에요. 반드시 검토하고 맥락을 추가해야 해요. AI가 컴포넌트의 용도를 추측할 때 확인을 요청하도록 Rule에 명시하는 게 중요해요.

핵심만 정리: 시작하는 법

  1. Cursor 설치 + Figma MCP 연결
    cursor.com에서 다운로드하고, Figma MCP 카탈로그에서 "Add MCP to Cursor" 클릭. Figma 개인 액세스 토큰을 환경변수로 설정해요.
  2. 토큰 테이블 준비
    Figma에 토큰 이름, 라이트/다크 모드 값, 설명이 정리된 테이블이 있어야 해요. 없다면 지금 만드세요 — AI 자동화의 기초 입력값이에요.
  3. Cursor Rule 생성
    토큰 테이블의 Figma 링크를 Cursor에 전달하고 "이걸로 변수 사용 규칙을 만들어줘"라고 요청해요. AI가 각 토큰의 용도와 맥락을 정리한 Rule 파일을 생성해요.
  4. 재사용 Command 만들기
    Cursor 설정 → Rules and Commands에서 "check-variables" Command를 만들어요. Figma 링크를 입력받아 변수를 감사하는 단계별 지시를 넣어요.
  5. 실행 + 반복
    디자인이나 컴포넌트의 Figma 링크로 Command를 호출하면 즉시 감사 결과가 나와요. 문서화도 같은 방식으로 Command를 만들어 활용해요.
🔗

더 깊이 파고 싶다면

AI + Design Systems in 2026 (영상)
UI Collective의 Kirk이 실제 워크플로우를 31분간 시연.
Figma MCP + Cursor 기초 세팅
Figma MCP 연결과 첫 번째 디자인-투-코드 워크플로우.
Figma MCP + Cursor AI 설정 가이드
단계별 MCP 서버 설정과 활용 프롬프트 예시.
UI Collective Academy
디자인 시스템 거버넌스 코스와 커뮤니티.
Figma → Cursor 워크플로우 설정 가이드
트렌딩 워크플로우의 상세 설정 튜토리얼.