This page guides you through the essential documentation sections of Inked Colibri — from understanding variable naming conventions to generating CSS exports that mirror your design system.
To make the most of the plugin, it’s best to follow the order below. Each section builds upon the previous one — helping you move from color creation to complete variable management and handoff.
Start by learning how Inked Colibri structures and names variables. The Color Management section covers how color variables are generated, named, and related to each other. Understanding this structure is essential before exploring JSON patterns or variable management workflows.
This section shows how JSON structures come to life inside Figma. You’ll learn how Inked Colibri bridges your JSON definitions with Figma variables and styles, so you can generate, replace, and maintain them efficiently. Understanding JSON from the previous section is key here.
Once you’re familiar with variable naming, explore JSON Schemes. Here, you’ll learn how Inked Colibri represents variables and styles in flat, human-readable JSON structures. You’ll find working examples of size, typography, and layout variable executions — and learn how to communicate these patterns to AI for consistent generation and management.
The final step — preparing your variables for development.
Learn how Inked Colibri exports your variable and style structure into CSS, mirroring your Figma hierarchy.
For example, a Figma variable sizes/xl:12px becomes --sizes-xl: 12px; in CSS, following your nesting pattern automatically.