피그마 디자인 시스템 구축을 위한 AI 에이전트 활용

구분	주요 내용
주제	AI 에이전트(Claude Code)를 활용한 피그마 디자인 토큰 및 시스템 자동 구축
핵심 도구	Claude Code, Figma MCP, CC Figma Tokens 스킬, Stitch
주요 성과	디자인 토큰 생성, 200여 개의 변수 자동 등록, 파운데이션 및 UI 컴포넌트 제작
핵심 가치	반복적인 디자인 시스템 구축 작업의 자동화 및 효율성 극대화

최근 디자인 업계에서는 구글의 디자인 관련 파일이나 클로드의 시스템 기능처럼 디자인 시스템을 자동으로 생성하는 기술들이 비약적으로 발전하고 있습니다. 그중에서도 전 세계 UI 디자인 툴 시장을 선도하는 피그마는 AI 에이전트와 결합하여 매우 강력한 자동화 기능을 선보이고 있습니다. 기존에 디자이너들이 수작업으로 일일이 설계하고 등록해야 했던 디자인 토큰, 변수 구조, 그리고 다크 모드 연결 등 복잡하고 반복적인 작업들이 이제는 AI의 도움으로 단 몇 분 만에 해결되는 시대가 되었습니다. 본 정리 글에서는 개발 지식이 부족한 일반인이나 디자이너도 쉽게 따라 할 수 있도록 환경 설정부터 실제 컴포넌트 제작까지의 전 과정을 상세히 살펴보겠습니다.

AI 에이전트 활용을 위한 기본 환경 세팅

전문적인 디자인 자동화 작업을 수행하기 위해서는 먼저 클로드 코드를 실행할 수 있는 환경을 갖추어야 합니다. 클로드 코드는 CLI(명령줄 인터페이스) 환경에서 동작하며, 특정 폴더 내에서만 파일을 생성하거나 읽어오는 특성이 있습니다. 따라서 바탕화면 등에 작업용 빈 폴더를 생성하고 터미널에서 해당 경로로 이동하는 과정이 필요합니다. 이후 기터브에서 제공하는 설치 명령어를 통해 피그마와 클로드를 연결해 주는 MCP(Model Context Protocol)와 디자인 업무 매뉴얼인 각종 스킬들을 설치합니다. 특히 CC 피그마 토큰스라는 추가 스킬은 구조화된 제이슨 파일을 통해 토큰을 생성하는 데 필수적이므로 반드시 포함하는 것이 좋습니다.

단계	수행 작업	비고
1단계	클로드 코드 설치	운영 체제별 터미널 명령어 실행
2단계	작업 폴더 생성 및 이동	CD 명령어를 통한 경로 진입
3단계	피그마 플러그인/MCP 설치	피그마와 AI 모델 연결
4단계	CC Figma Tokens 스킬 추가	제이슨 기반 토큰 자동 생성용

기존 디자인 시안을 활용한 토큰 추출 및 변수 등록

환경 세팅이 완료되었다면 가장 먼저 할 수 있는 작업은 기존에 만들어진 디자인 시안을 분석하여 이를 코드로 구현하거나 토큰화하는 것입니다. 피그마 파일의 링크를 복사하여 클로드 코드에 입력하면 AI 에이전트가 디자인 시안의 픽셀 정보를 분석합니다. 이 과정에서 피그마 임플리멘트 디자인 스킬이 작동하여 시안을 프로덕션 수준의 코드로 변환해 줍니다. 더 나아가 이 시안들에서 사용된 컬러, 간격, 폰트 등의 값을 추출하여 피그마의 변수(Variables)로 자동 등록할 수 있습니다. AI는 원재료 값에 해당하는 프리미티브 컬렉션과 실제 쓰임새를 나타내는 시멘틱 컬렉션으로 구분하여 구조화된 디자인 시스템의 기초를 마련해 줍니다.

제로베이스에서 시작하는 디자인 시스템 자동 완성

단순히 기존 시안을 분석하는 단계를 넘어, 아무것도 없는 상태에서 완벽한 디자인 시스템을 구축하는 것도 가능합니다. 스티치와 같은 도구에서 생성된 디자인 지침서(디자인 MD 파일)를 활용하면 더욱 정교한 작업이 가능합니다. 이 지침서에는 브랜드의 컨셉, 컬러 팔레트, 타이포그래피 규칙 등이 상세히 담겨 있습니다. 클로드 코드에 이 파일을 참조시키고 미리 준비된 정교한 프롬프트를 입력하면, AI는 약 200개에 달하는 변수를 생성하고 이를 피그마 파일에 즉시 등록합니다. 이는 숙련된 디자이너가 수 시간을 투자해야 할 작업을 10분 내외로 단축하는 놀라운 효율을 보여줍니다.

컬렉션 유형	포함 내용	역할
프리미티브	원시 컬러값, 폰트 사이즈, 간격 수치 등	가장 기초가 되는 원재료 데이터
시멘틱	텍스트 컬러, 배경색, 보더 컬러 등	의미론적 이름을 붙여 프리미티브 참조
컴포넌트	버튼 배경, 인풋 테두리 등	특정 UI 요소에 할당되는 최종 변수

파운데이션 문서화와 실전 UI 컴포넌트 제작

등록된 변수와 스타일을 바탕으로 디자인 시스템의 핵심인 파운데이션 문서를 제작할 수 있습니다. 여기에는 컬러 팔레트, 타입 스케일, 간격 테이블, 섀도우 값 등이 시각적으로 보기 좋게 정리됩니다. 이렇게 구축된 토큰 시스템을 기반으로 실제 로그인 폼이나 카드 뉴스 같은 UI 컴포넌트를 생성하면 그 진가가 드러납니다. AI가 생성한 컴포넌트들은 이미 디자인 토큰과 연결되어 있어, 클릭 한 번으로 라이트 모드와 다크 모드를 전환할 수 있습니다. 또한 마스터 컴포넌트로 등록된 경우 인스턴스들을 일괄적으로 제어할 수 있어 유지보수 측면에서도 압도적인 편의성을 제공합니다.

작업 항목	상세 설명	기대 결과
파운데이션 생성	컬러, 타이포그래피 등의 시각적 가이드화	일관된 디자인 원칙 수립
컴포넌트 제작	버튼, 인풋, 카드 등 개별 요소 생성	재사용 가능한 UI 자산 확보
모드 전환 테스트	라이트/다크 모드 변수 연결 확인	테마 대응 자동화 확인
마스터 컴포넌트	요소 수정 시 전체 인스턴스 반영 확인	효율적인 대규모 수정 가능

디자인 토큰과 변수의 개념 이해 및 실무 적용

디자인 토큰은 UI를 구성하는 가장 작은 단위로, 레고 블록과 같습니다. 색상 코드나 특정 수치에 이름을 붙여 관리함으로써 효율성을 높입니다. 변수 기능은 이 토큰들을 실제 디자인 환경에서 유동적으로 사용할 수 있게 해줍니다. 예를 들어 검은색 1번이라는 프리미티브 변수를 버튼 배경색이라는 시멘틱 변수에 연결해 두면, 나중에 브랜드 컬러가 바뀌더라도 프리미티브 값 하나만 수정함으로써 연결된 모든 컴포넌트의 색상을 동시에 변경할 수 있습니다. 이러한 구조는 디자이너와 개발자 간의 소통 비용을 획기적으로 줄여주며, 제품의 목적에 맞게 시스템의 규모를 조절하여 적용하는 것이 중요합니다.