AIRGAP StudioAirgap Bridge
Learn about the Bridge extension's 3-tab interface for design-to-code conversion.
Overview
AIRGAP Bridge is a 3-tab pipeline for design-to-code conversion. It provides a live Figma connection (Prototype), deterministic code conversion (Production), and W3C DTCG design token management (Style Guide) — all within a single interface.
Prototype Tab — Live Figma Connection
Connects to Figma Desktop in real time via the MCP protocol to query design data.
Key Features
- Real-time node property inspection — Reference properties of Figma components, frames, text, etc. in real time
- Quick Actions — Shortcut actions directly available from selected nodes
- Generate component scaffold → Pass to Assistant
- Extract CSS
- Download assets
Offline .fig Parsing
In environments without Figma Desktop, you can drag and drop .fig files for offline parsing with the built-in parser. The native binary parser analyzes the .fig file structure and extracts node trees and properties.
Figma MCP integration requires the Figma Desktop app and MCP plugin. Offline .fig parsing works without any additional installation.
Production Tab — Design-to-Code Conversion
Converts Figma designs into production code. Two conversion engines are available.
Deterministic Conversion Engine (~95% fidelity)
- Auto-layout → Flexbox 1:1 mapping for accurate layout reproduction
- Converts component structure, styles, and responsive properties to code
- Instant output in React / HTML / CSS formats
AI Fallback Engine (~70-80% fidelity)
- Fully offline conversion using the offline parser + Qwen3 combination
- Used for complex designs that the deterministic engine cannot handle
- AI interprets design intent to generate code
Style Guide Tab — Design Token Management
Provides functionality for importing and converting W3C DTCG standard design tokens.
Token Import
- JSON files — Directly import W3C DTCG format token JSON
- Figma Variables API — Automatically extract Variables defined in Figma
Token Conversion Engine
The W3C standard token conversion engine supports various output formats.
| Output Format | Description |
|---|---|
Tailwind v4 @theme | Tailwind CSS v4 theme tokens |
| CSS Custom Properties | CSS variable format |
| SCSS Variables | SCSS variable format |
| JSON Module | JSON usable from JS/TS |
KRDS Preset
A built-in preset for the Korean Government Design System (KRDS) is included. It offers both standard and extended variants, allowing automatic application of KRDS tokens when revamping government websites.
Extension Integration
Bridge integrates closely with other AIRGAP extensions.
| Target | Direction | Description |
|---|---|---|
| Designer | Bridge → Designer | Auto-push token context, reflect design tokens in UI generation |
| Assistant | Bridge → Assistant | Pass component scaffolds, inject business logic |
Settings
Open settings with Ctrl+, and search for airgapBridge.
| Setting Key | Description | Default |
|---|---|---|
| Figma Personal Access Token | Figma API authentication token | — |
| Ollama URL | Ollama server URL (shared with Designer settings) | http://localhost:11434 |
The Figma PAT is stored encrypted in VS Code SecretStorage.
Related Documentation
- Airgap Designer - AI UI Designer
- Airgap Assistant - AI coding assistant
- Airgap UI Library - Offline component library