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: 6 days 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 (21 days ago)
• Default Branch: main
• Last Pushed: 2025-01-16T20:04:05.000Z (12 days ago)
• Last Synced: 2025-01-16T21:21:25.710Z (12 days ago)
• Topics: css, figma, figma-plugin, sass
• Language: TypeScript
• Homepage:
• Size: 218 KB
• Stars: 14
• Watchers: 23
• Forks: 0
• Open Issues: 0
• 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. 

### Local plugin

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.