| title | Adapters: Overview |
|---|---|
| description | Adapters normalize tool outputs into Variable Design Standard (VDS) format and transform Variable Design Standard (VDS) format into tool inputs. |
Adapters normalize tool outputs into Variable Design Standard (VDS) format and transform Variable Design Standard (VDS) format into tool inputs.
Design tools export variables in formats that include tool-specific metadata and syntax. Variable Design Standard (VDS) defines a canonical format for version control. Adapters bridge the gap between tool formats and the contract.
Adapters MUST:
- Normalize naming to match Variable Design Standard (VDS) naming convention
- Convert reference syntax to canonical format (
{path.to.token}) - Move tool metadata to
$extensions - Validate that output conforms to Variable Design Standard (VDS) rules
Adapters MAY:
- Preserve tool metadata in
$extensionsfor round-trip workflows - Transform types if tool uses different type names
- Handle mode differences between tools
Input adapters convert tool exports into Variable Design Standard (VDS) format.
Examples:
- Figma Variables export → Variable Design Standard (VDS)
- Tokens Studio export → Variable Design Standard (VDS)
Output adapters convert Variable Design Standard (VDS) format into tool or platform formats.
Examples:
- Variable Design Standard (VDS) → Style Dictionary → CSS variables
- Variable Design Standard (VDS) → TypeScript types
- Variable Design Standard (VDS) → Tailwind CSS v4 (
@themedirective)
A typical adapter workflow:
- Read tool export JSON
- Extract tool-specific metadata
- Normalize naming (if needed)
- Convert references to canonical format
- Move metadata to
$extensions - Validate output against Variable Design Standard (VDS)
- Write normalized JSON
If adapters fail:
- Tool metadata leaks into contract properties
- Invalid references break resolution
- Naming violations cause validation failures
- Type mismatches break consumption
- Figma Adapter: Figma Variables export normalization
- Tokens Studio Adapter: Tokens Studio export normalization
- Style Dictionary Adapter: Variable Design Standard (VDS) to CSS/TypeScript/etc.
- Tailwind Adapter: Tailwind theme configuration generation
- Runtime adapter libraries (implement adapters as needed)
- Adapter testing frameworks
- Cross-tool synchronization (handle via version control)