Clean CSS Exporter

About this plugin

# Clean CSS Exporter — Get production-ready CSS from Figma in one click.

Select any element on the canvas and instantly get clean, formatted CSS. Text and box elements are handled automatically with the right properties for each.

## Key Features

* Extract CSS from any selected element — text or box

* Smart property detection — outputs the right properties for each element type

* Syntax highlighting with dark / light theme support

* Toggle properties on/off to control what gets copied

* Include or exclude selector ( .class { } )

* Multi-select support — outputs each element's styles with comments

* Settings auto-save and persist across sessions

## Settings

* Properties — Turn each CSS property on/off

* Basic — Set default values and skip output when values match defaults

* Advanced — Units (px/rem, px/relative), color format (hex/rgb), rounding, shorthand

* CSS Variables — Auto-replace values with variable names (Pro)

* System — UI theme (Light / Dark / Auto)

## Pro Features (Coming Soon)

The following features will be available as a Pro plan in a future update. Currently all features are available for free while we prepare the Pro plan.

* Drag & drop to reorder property output

* Default value + skip for font-weight, line-height, letter-spacing (line-height also has separate AUTO skip)

* Number rounding (decimal places, method, conversion order)

* Notation options (trim trailing zeros, omit zero units, omit leading zero)

* Shorthand output for padding / border

* CSS variables — auto-replace matching values across 15 property types

## How to Use

1. Select elements on the Figma canvas

2. Right-click → Plugins → Clean CSS Exporter

3. Copy the generated CSS to your clipboard

4. Open settings (⚙️) to customize output

Built with TypeScript · Figma Plugin API

This plugin is free to use. A Pro plan will be available in a future update via an external payment system.