Eggstractor

This plugin generates SCSS variables and mixins from Figma, it also enables you to create a new branch, commit, and push your changes to GitHub.

Features

• Extracts colors, background colors, padding, margin, font size, line height, font weight, opacity, and more from current page.
• Generates SCSS variables for each color.
• Handles text nodes to extract font colors.
• Outputs the generated SCSS code to the plugin UI.

Development

Use npm run dev to run the webpack compiler in watch mode.

Figma plugin

The Eggstractor Figma plugin is available for free download in the Figma community, and includes a demo file that syncs with a demo GitHub repo.

Local plugin

Alternately, you can build your own, local plugin for private use. You will need to use Figma Desktop for this.

1. Run npm run dev or npm run build to build the plugin
2. In Figma, go to Plugins → Development → Import plugin from manifest…
3. Select the manifest.json file.
4. The plugin will now be available under Plugins → Development.

Local visualizer

This is to view the generated CSS in a browser.

1. Run npm run start:server to start the local server
2. Open http://localhost:3000 in your browser

Contributing

We welcome contributions! Please see our Contributing Guide for details on how to get started.

Documentation

For detailed documentation about how to use Eggstractor, please see our Documentation.

For general-purpose information on getting started with using Eggstractor, including a step-by-step guide to a working demo, see our Getting Started Guide.

About

Eggstractor is an open source project by Bitovi.

Need some help?
Chat with us on Discord | Send feature requests | Email us

Need pros to help design & build your design system or app? That’s us!