Styles2CSV

About this plugin

Disclaimer: This is a new version of a similar plugin, completely rewritten for the new Figma API.

Features

Style Extraction

1. Local Paint Styles: Extract all color styles including solid colors, gradients (linear, radial, conic, diamond)
2. Local Text Styles: Extract typography styles with font family, weight, size, and line height information
3. Local Variables: Extract color variables with mode-specific values for design tokens

Data Processing

1. Multiple Color Formats: Support for RGBA, HEX (AARRGGBB), and HEX (RRGGBB) formats
2. Gradient Support: Full support for all Figma gradient types with proper CSS conversion
3. Mode-Aware Variables: Correctly handles variable modes with readable collection/mode names
4. Comprehensive Metadata: Includes style names, descriptions, types, and mode information

Filtering Options

1. Style Type Filters: Toggle Colors, Typography, and Variables independently
2. Export Settings: Configure color format before export
3. Real-time Updates: Live filtering and preview of exported data

CSV Output Format

The exported CSV contains the following columns:

1. Type - Style type (FILL, FONT)
2. Mode -Variable mode name (if applicable)
3. Name - Style name from Figma
4. Value - Processed style value (color, gradient, or font specification)
5. Description - Style description from Figma

Example Output

CSV