CSS Export
Export design tokens with developer-friendly naming conventions for seamless CSS integration
The Problem: Translating Figma design tokens and variables into usable CSS is often manual, error-prone, and inconsistent.
The Inked Colibri Solution: Automatically generate CSS that mirrors your Figma variable and style architecture.
CSS Export – Mimics Your Figma Structure
As shown in the image, a simple Figma path like:
Layout/Settings/Mobile Min : 320
are converted to the CSS variable:
--layout-settings-mobile-min: 320px;
How To Export
Two export modes are available:
- Color Tokens :Export your full color system.
- Design Tokens: Export all defined design tokens for complete integration.
Key Benefits:
- Consistency: Maintains naming and structure from Figma to code.
- Efficiency: Eliminates manual CSS variable creation.
- Scalable: Works seamlessly with any size design system.