Problem Context (Pain Point)

Designers often need to create a large number of variables and styles for design systems. Manually generating and linking each variable is time-consuming and prone to errors. Even AI-assisted generation can sometimes produce inconsistent or incomplete results if the structure isn't clear.

How Inked Colibri Solves It (Feature Overview)

The JSON Schemes feature provides a clear, flat JSON structure to define all variables and styles in your design system. Designers can generate a full set of variables and text styles, or hand off a starting point to AI, while maintaining clarity and control over the final output. This makes creation, review, and updates straightforward and predictable.

Why Use JSON Schemes

• Simplifies variable management — a single flat JSON file is easier to read and maintain.
• Supports AI-assisted generation safely — clear structure reduces hallucinations and missing parts.
• Flexible for multiple style types — can define text styles, color variables, and numeric values consistently.

Understanding the JSON Structure

Flat JSON: Avoid nested structures to simplify human reading.

• "variables" — for general variables like colors, fonts, sizes.
• "textStyles" — for text-specific styles such as font family, weight, or size.

Variable paths:

"Type/Font Family/Primary" — specifies the hierarchy and where the variable will appear in your design system.

Value and Type:

• "value" — starting value (hex code, string, number, or reference to another variable).
• "type" — "string" for font names, "color" for hex values, "number" for numerical values like spacing or font size.

Example JSON Variable

{
  "variables": {
    "Type/Font Family/Primary": {
      "type": "string",
      "value": "Arial",
      "description": "Primary font family"
    }
  }
}

Best Practices

• Always use flat structure — no nested objects.
• Double-check that types match the value (string, number, color).
• Include a description for each variable to make the JSON human-readable.
• Use AI-assisted generation as a helper, but verify the output for missing paths or incorrect types.

To Easily Test Out How It Works

You can test JSON schemes with this order:

Size Variables (Variable-to-Variable Binding Example)

1. Go to docs/json-schemes/size
2. Execute Sizes (var) by copying and executing the JSON scheme inside the plugin:
   • Choose the variable section
   • Copy and paste the JSON
   • Click Process Variable
   • This creates a Figma collection with direct values
3. Then execute Generic Sizes (var):
   • Copy and paste the Generic Sizes JSON
   • Click Process Variable
   • This uses the first execution variables — a perfect example of variable-to-variable binding

Typography Variables (Style-to-Variable Binding Example)

1. Go to docs/json-schemes/typography
2. Execute Type Setting Variables first:
   • Choose the variable section
   • Copy and paste the JSON
   • Click Process Variable
3. Then execute Typography styles:
   • Choose the style section
   • Copy and paste the Typography styles JSON
   • Click Process
   • This uses Generic Size variables and Type Setting Variables while generating styles — demonstrating style-to-variable binding

Result / Takeaway

By using JSON Schemes, designers gain a clear, reliable way to define variables and text styles. This ensures consistency, readability, and scalable design system management, while allowing AI assistance without losing control over structure or accuracy.