https://github.com/bitovi/eggstractor
A figma plugin that lets you extract styles to mixins for various CSS frameworks
https://github.com/bitovi/eggstractor
css figma figma-plugin sass
Last synced: about 1 year ago
JSON representation
A figma plugin that lets you extract styles to mixins for various CSS frameworks
- Host: GitHub
- URL: https://github.com/bitovi/eggstractor
- Owner: bitovi
- Created: 2025-01-08T15:40:05.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-18T14:25:08.000Z (over 1 year ago)
- Last Synced: 2025-03-29T05:23:07.864Z (over 1 year ago)
- Topics: css, figma, figma-plugin, sass
- Language: TypeScript
- Homepage: https://www.figma.com/community/plugin/1464625803208186094
- Size: 440 KB
- Stars: 18
- Watchers: 22
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://www.figma.com/community/plugin/1464625803208186094/eggstractor) is available for free download in the Figma community, and includes a [demo file](https://www.figma.com/community/file/1472329589982734868) that syncs with a [demo GitHub repo](https://github.com/bitovi/eggstractor-demo).
### 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](CONTRIBUTING.md) for details on how to get started.
## Documentation
For detailed documentation about how to use Eggstractor, please see our [Documentation](docs/DOCS.md).
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](https://bitovi.atlassian.net/wiki/spaces/Eggstractor/overview).
## About
Eggstractor is an open source project by Bitovi.
Need some help?
[Chat with us on Discord](https://discord.com/channels/1007137664606150746/1044404122004242433 "https://discord.com/channels/1007137664606150746/1044404122004242433") | [Send feature requests](https://github.com/bitovi/eggstractor/issues/new "https://github.com/bitovi/eggstractor/issues/new") | [Email us](mailto:support@bitovi.com "mailto:support@bitovi.com")
Need pros to help design & build your design system or app? [That’s us](https://www.bitovi.com/services/product-design-consulting "https://www.bitovi.com/services/product-design-consulting")!