0
100
200
300
400
500
600
700
800
900
1000
1100
0
100
200
300
400
500
600
700
800
900
1000
1100
Figma plugin#17 in Developers

CSSGen

Convert your local styles to CSS/SCSS/LESS/SASS/STYLUS

by Ori Ziv

users
35K
likes
525
saves
19K
comments
65
Open in Figma
FreeWorks inFigma DesignDev ModeFigJam
Price
Free
Latest version
v40 · Apr 13, 2025
First published
Aug 12, 2019
Publisher
Ori Ziv
Features

What CSSGen does

What the plugin declares in its manifest.

  • Manifest

    Dev Mode panel

    Adds a panel to Dev Mode's Inspect tab.

  • Manifest

    Figma for VS Code

    Works in Figma for VS Code.

On this page
Overview

About CSSGen

CSSGen is a free Figma plugin published by Ori Ziv in 2019. It works in Figma Design, Dev Mode and FigJam and has 34,988 users and 525 likes on the Figma Community. It ranks #17 in Developers on our lists.

In the developer's words

Effortlessly generate CSS preprocessors (SASS, LESS, SCSS, STYLUS) by extracting variables and mixins from your local Figma styles.

Seamlessly export all utilized styles to enhance. your project with popular CSS preprocessors.

Optimize your design-to-development process and boost dev productivity with CSSGen plugin.

Changelog

What's new

Version 40 · released Apr 13, 2025

  • Added JSON format, Updated code to latest Figma plugin guidlines
Trust

Permissions and privacy

Network access

CSSGen can only connect to the domain declared in its manifest: cdn.buymeacoffee.com.

  • cdn.buymeacoffee.com

Extra permissions

None beyond the standard access to the file you run it in.

Read from the plugin's published manifest.

Rankings

Where CSSGen ranks

Compare

CSSGen alternatives

  1. 1

    Zeplin

    by Zeplin Crew

    291K users2.9KFree + paid features

    Design tools are for designing. Zeplin is for clear, structured design delivery.

    View details
  2. 2

    Inspect Styles

    by max.denaro

    136K users3.9KFree

    Inspect styles from Figma and transform to CSS

    View details
  3. 3

    DesignDoc [Spectral]: Measures, Annotations, and Handoff

    by Marka Plugin Dev

    132K users3KFree

    📐 Effortlessly hand off your Figma designs to the development team

    View details
  4. 4

    Figma Exporter

    by JerryKhw

    112K users490Free

    Easily export assets as PNG/JPG/WebP/SVG/PDF for Web, Android, Flutter, iOS, React Native

    View details
  5. 5

    Tailwind CSS Color Generator

    by Erik de Vries

    108K users3.6KFree

    Create custom Tailwind CSS color scales based on a given Hex code or HSL color

    View details
  6. 6

    Jira

    by Figma Community

    81K users552Free

    Connect Figma Designs to Jira Issues

    View details
FAQ

CSSGen FAQ

What does CSSGen do?

Convert your local styles to CSS/SCSS/LESS/SASS/STYLUS. It's a Figma plugin by Ori Ziv that runs in Figma Design, Dev Mode and FigJam.

Is CSSGen free?

Yes. CSSGen is free to install and run from the Figma Community, with no paid tier listed.

Is CSSGen safe to use?

Figma plugins can only reach the internet through domains listed in their manifest. CSSGen can only connect to the domain declared in its manifest: cdn.buymeacoffee.com. As with any plugin, check the developer's privacy policy before using it on client work.

How do I install CSSGen?

Open it on the Figma Community, or search for it in the Actions menu (Cmd/Ctrl + K) inside any file you can edit. See how to install Figma plugins.

What are the best alternatives to CSSGen?

By user count, the closest alternatives are Zeplin, Inspect Styles and [DesignDoc [Spectral]: Measures, Annotations, and Handoff](/plugins/designdoc-spectral-measures-annotations-and-handoff/). Compare all of them on the best Figma plugins for developers.

For developers

Built this plugin?

Use this page as a landing page for CSSGen: link to it from your site, README or launch posts, or add a badge. Pick a style and copy the code.

CSSGen on figmaplugins.co

Style

Label

Size

Code

<a href="https://figmaplugins.co/plugins/cssgen/" target="_blank" rel="noopener"><img src="https://figmaplugins.co/badges/featured-dark.svg" alt="CSSGen on figmaplugins.co" width="220" height="48"></a>