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: about 1 month 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 (9 months ago)
• Default Branch: main
• Last Pushed: 2024-08-26T09:40:09.000Z (3 months ago)
• Last Synced: 2024-09-29T05:42:53.837Z (about 2 months ago)
• Topics: chrome, css, figma
• Language: TypeScript
• Homepage: https://chromewebstore.google.com/detail/fubukicss-tool/behnfolmiinfhphfdolomedncdnogcim
• Size: 507 KB
• Stars: 305
• Watchers: 3
• Forks: 19
• Open Issues: 1
• 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

![image](https://pbs.twimg.com/media/GHtXze9aAAAZr1I?format=png&name=900x900)

## 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)