Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zouhangwithsweet/fubukicss-tool
A browser extension to get CSS from Figma in one step.
https://github.com/zouhangwithsweet/fubukicss-tool
chrome css figma
Last synced: 10 days ago
JSON representation
A browser extension to get CSS from Figma in one step.
- Host: GitHub
- URL: https://github.com/zouhangwithsweet/fubukicss-tool
- Owner: zouhangwithsweet
- License: gpl-3.0
- Created: 2024-02-22T11:10:08.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-01-14T01:44:34.000Z (about 1 month ago)
- Last Synced: 2025-02-07T21:34:42.335Z (12 days ago)
- Topics: chrome, css, figma
- Language: TypeScript
- Homepage: https://chromewebstore.google.com/detail/fubukicss-tool/behnfolmiinfhphfdolomedncdnogcim
- Size: 748 KB
- Stars: 332
- Watchers: 3
- Forks: 21
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# fubukicss-tool
A browser extension to **get TailwindCSS/UnoCSS/CSS from Figma in one step.**
## Usage
> [!IMPORTANT]
>![]()
>![]()
>
> On March 19, Figma removed the `window.figma` in view-only mode pages (which the Fubukicss extension relies on to function properly). After our proactive communication, the Figma team promised to re-add the `window.figma` interface within a few weeks. During the waiting period, Fubukicss cannot work properly in view-only mode. You can use it in edit mode by using the “Duplicate to your drafts” feature and use it in edit mode.
>
> You can follow [this post](https://forum.figma.com/t/figma-removed-window-figma-on-view-only-pages-today/67292) to get the latest updates.Check it on chrome store [fubukicss-tool](https://chrome.google.com/webstore/detail/behnfolmiinfhphfdolomedncdnogcim)
or download zip file from here [fubukicss-stage](https://fubukicss.zouhangoo7241.workers.dev/)## Motivation
Due to the recent introduction of charges for Figma's dev mode, which restricts the direct export of CSS, I've developed this browser extension.
## Features
- [x] Export Figma styles to CSS
- [x] Export Figma styles to tailwindcss / unocss
- [x] Export Figma Frame Node to image
- [x] List Figma colors
## Development
Install dependencies
```bash
pnpm i
```Setup dev mode
```bash
pnpm dev
```Build
```bash
pnpm build
```## Credits
- [figma-viewer-chrome-plugin](https://github.com/leadream/figma-viewer-chrome-plugin)
- [transform-to-unocss-core](https://github.com/Simon-He95/transform-to-unocss-core)