AIRGAP StudioAIRGAP Studio

Airgap Bridge

디자인에서 코드로의 변환을 담당하는 Bridge 확장 기능의 3탭 인터페이스를 설명합니다.

개요

AIRGAP Bridge는 디자인에서 코드로의 변환을 담당하는 3탭 파이프라인입니다. Figma 실시간 연결(Prototype), 결정론적 코드 변환(Production), W3C DTCG 디자인 토큰 관리(Style Guide)를 하나의 인터페이스에서 제공합니다.

Prototype 탭 — Figma 실시간 연결

Figma Desktop과 MCP 프로토콜로 실시간 연결하여 디자인 데이터를 조회합니다.

주요 기능

  • 실시간 노드 속성 조회 — Figma의 컴포넌트, 프레임, 텍스트 등의 속성을 실시간으로 참조
  • Quick Actions — 선택한 노드에서 바로 활용 가능한 단축 작업
    • 컴포넌트 스캐폴드 생성 → Assistant에 전달
    • CSS 추출
    • 에셋 다운로드

오프라인 .fig 파싱

Figma Desktop이 없는 환경에서는 .fig 파일을 드래그 앤 드롭하여 내장 파서로 오프라인 파싱할 수 있습니다. 네이티브 바이너리 기반의 파서가 .fig 파일 구조를 분석하여 노드 트리와 속성을 추출합니다.

Figma MCP 연동에는 Figma Desktop 앱과 MCP 플러그인이 필요합니다. 오프라인 .fig 파싱은 추가 설치 없이 동작합니다.

Production 탭 — 디자인→코드 변환

Figma 디자인을 프로덕션 코드로 변환합니다. 두 가지 변환 엔진을 제공합니다.

결정론적 변환 엔진 (~95% 충실도)

  • Auto-layout → Flexbox 1:1 매핑으로 정확한 레이아웃 재현
  • 컴포넌트 구조, 스타일, 반응형 속성을 코드로 변환
  • React / HTML / CSS 형식으로 즉시 출력

AI 폴백 엔진 (~70-80% 충실도)

  • 오프라인 파서 + Qwen3 조합으로 완전 오프라인 변환
  • 결정론적 엔진으로 처리할 수 없는 복잡한 디자인에 사용
  • AI가 디자인 의도를 해석하여 코드 생성

Style Guide 탭 — 디자인 토큰 관리

W3C DTCG 표준 디자인 토큰을 가져오고 변환하는 기능을 제공합니다.

토큰 가져오기

  • JSON 파일 — W3C DTCG 형식의 토큰 JSON 직접 가져오기
  • Figma Variables API — Figma에서 정의한 Variables를 자동 추출

토큰 변환 엔진

W3C 표준 토큰 변환 엔진이 다양한 출력 형식을 지원합니다.

출력 형식설명
Tailwind v4 @themeTailwind CSS v4 테마 토큰
CSS Custom PropertiesCSS 변수 형식
SCSS VariablesSCSS 변수 형식
JSON 모듈JS/TS에서 사용 가능한 JSON

KRDS 프리셋

한국 정부 표준 디자인 시스템(KRDS) 프리셋이 내장되어 있습니다. 표준형과 확장형 두 가지를 제공하며, 정부 웹사이트 개편 시 KRDS 토큰을 자동으로 적용할 수 있습니다.

확장 간 연동

Bridge는 다른 AIRGAP 확장과 긴밀하게 연동됩니다.

연동 대상방향설명
DesignerBridge → Designer토큰 컨텍스트 자동 푸시, UI 생성에 디자인 토큰 반영
AssistantBridge → Assistant컴포넌트 스캐폴드 전달, 비즈니스 로직 주입

설정

Ctrl+,로 설정을 열고 airgapBridge를 검색합니다.

설정 키설명기본값
Figma Personal Access TokenFigma API 인증 토큰—
Ollama URLOllama 서버 URL (Designer 설정 공유)http://localhost:11434

Figma PAT는 VS Code SecretStorage에 암호화 저장됩니다.

관련 문서