Back to Plugins
Local Variables to Tailwind & CSS

Local Variables to Tailwind & CSS

Export Your Color Tokens to Tailwind Config and CSS Variables Effortlessly

tailwindcssdesign tokenscolor managementcolor spacecsstokenstailwindcss variablesfigmadesign systemfrontend tools

Plugin Preview

Local Variables to Tailwind & CSS preview

About this plugin

Easily export your Figma color tokens into Tailwind config and CSS variables with this plugin.


Features

  1. Multiple Collections: Organize tokens across various projects effortlessly.
  2. Nested Folders: Support for deeper folder structures within your design system.
  3. Cross-Collection References: Reuse and link tokens across different collections.
  4. Multi-Color Space Support: Export colors in multiple formats (e.g., RGB, HSL).
  5. Output Formats:
  6. CSS File: All Figma variables compiled as CSS variables.
  7. JSON File: Color tokens optimized for Tailwind configuration.


Version

This is a beta release, offering a first look at these features with further enhancements planned. Ideal for teams building modular, cross-platform design systems.



This plugin is provided as-is, without any guarantees or warranties. The developer is not responsible for any issues, errors, or damages caused by the use of this plugin. Please use it at your own risk and ensure proper testing before applying it to production environments.

Plugin Details

Version3
CreatedOctober 16, 2024
Last UpdatedOctober 21, 2024
CategorySoftware development
CreatorDavid Montero
Stats21 installs, 3 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:build/ui.js
  • main:build/main.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none