Figma plugin

CSSGen

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

by Ori Ziv

users
36K
likes
528
saves
19K
comments
65
Open in Figma
FreeWorks inFigma DesignDev ModeFigJam
Price
Free
Latest version
v38 · Feb 27, 2024
First published
Aug 12, 2019
Publisher
Ori Ziv
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 35,540 users and 528 likes on the Figma Community.

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 38 · released Feb 27, 2024

The developer didn't publish release notes for this version.

Trust

Permissions and privacy

Network access

This plugin's manifest doesn't declare its network access, which is common for older plugins. Figma shows a warning on the Community page for plugins like this.

Extra permissions

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

Read from the plugin's published manifest.

Compare

CSSGen alternatives

  1. 1

    Figma to Code

    by Bernardo Ferrari

    2.4M users8.9KFree

    Code Conversion Made Easy: Figma to Web & Apps

    View details
  2. 2

    Anima

    by Anima

    1.9M users18KFree

    Anima - AI Design to code, Vibe code, Vibe design

    View details
  3. 3

    Builder.io

    by Steve Sewell

    1.3M users23KFree

    Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.

    View details
  4. 4

    Figma to HTML with Framer

    by Framer

    643K users12KFree

    Convert your Figma design to HTML code in seconds with Framer.

    View details
  5. 5

    SkewDat

    by Unfold

    640K users7.3KFree + $2/mo upgrade

    Skew any layer or group with all layers preserved to edit.

    View details
  6. 6

    Locofy Lightning

    by Locofy.ai

    608K users5.4KFree

    Convert Figma designs to code in a flash: React, React Native, Flutter, HTML/CSS, Angular, Next, Vue

    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.

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 Figma to Code, Anima and Builder.io.

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>

Want it featured on figmaplugins.co? Submit it for review