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 to get the latest updates.

Check it on chrome store fubukicss-tool or download zip file from here fubukicss-stage

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

• Export Figma styles to CSS
• Export Figma styles to tailwindcss / unocss
• Export Figma Frame Node to image
• List Figma colors

Development

Install dependencies

pnpm i

Setup dev mode

pnpm dev

Build

pnpm build

Credits

• figma-viewer-chrome-plugin
• transform-to-unocss-core