jan-dh / figma-tailwindcss Goto Github PK

A plugin that tries to bridge the gap between designs and code. Figma tailwindcss lets you export aspects of a design made in Figma to a javascript theme file that you can import into your tailwindcss config

JavaScript 82.28% HTML 0.03% CSS 17.69%

figma tailwindcss figma-plugin

figma-tailwindcss's Introduction

Figma Tailwindcss

A plugin that tries to bridge the gap between design and code. Figma Tailwindcss lets you export aspects of a design made in Figma to a javascript theme file that can easily be used with Tailwindcss.

The plugin: Figma TailwindCSS

Usage
Roadmap
License

Usage

Creating your theme

The plugin gets it's info from the Local Styles. At this point it picks up:

colors
font-families
text-sizes
box-shadow
border-radius

Colors

Colors are taken from the Figma Local Paint Styles. Colors can be grouped in the export step. If you want to group codes,prefix them with the same name.

Font-families

The plugin will pick up all font-families used in the Local Text Styles.

Text-sizes

All the different font-sizes used in the Local Text Styles will be picked up by the plugin. Pick a base font-size and the rest of the font-size names are calculated accordingly. The logic used:

...
'3xs'
'2xs'
'xs'
'sm'
'base'
'lg'
'xl'
'2xl'
'3xl'
...

The font-sizes the plugin spits out will also be converted into a rem based scale.

Box-shadows

Taken from the effectStyles from your document.

Border-radius

Taken from the nodeStyles from your document.

Importing your theme

Import the theme.js file in to your tailwind.config.js configuration file to use it:

Require syntax

const myTheme = require(./theme);

the require syntax will make sure your custom values get picked up by the Intelligent Tailwind CSS plugin. If you want to use this syntax, remove the export default theme statement from your theme file

Import syntax

import 'myTheme' from './theme

Extending the default theme

You can extend the default theme like so:

module.exports = {
    theme: {
        extend: {
            colors: myTheme.colors
        }
    }

More info on extending the default theme:

Contributing

All feedback is welcome. Feel free to submit issues or suggestions.

The plugin shows you some random messages when you're missing one of the exportable properties. If you want to add your own, feel free to make a Pull Request for this file.

Roadmap

line-height

License

This project is licensed under the terms of the MIT license.

figma-tailwindcss's People

Contributors

Stargazers

Watchers

Forkers

joelbqz blahah therakeshpurohit tribixbite mentorkadriu abdulwahed-dev michalhonc dmilano1 labxd jaycedowns42 mistobaan krishnamani anxndsgn aryamantandon18

figma-tailwindcss's Issues

[Feature] Additional exports

As you mention in your readme you plan to add more exports, here are some requests :

border-radius
padding
marging
leading
gradient (exported as components, I know you've rejected a request regarding components before, this case has a much smaller scope)

Edit :

shadow

Not working with Tailwindcss 2.0.2

In tailwindcss v2.0.2
import theme from './theme';
does not work, because import statements are not allowed.
What worked for me was:
let theme = require('./theme')
In that case in the given theme.js the last line should be
module.exports = theme
instead of
export default theme;

Or am I doing something wrong? Would be cool just to replace the theme.js in the folder for design updates fromg the figma file.

Colors not grouped?

Description

We have a list of colors that start with the same prefix, but they don't seem to be grouped.

Steps to reproduce

Create a new design file
Create local color presets with names like "Red 100", "Red 200", "Red 300"
Export

Additional info

Figma version: Web
OS version: elementary OS 5.1.7 Hera (Built on Ubuntu 18.04.6 LTS)

Extra

Design file: Colors test.fig.zip

[BUG] Plugin crashes when style with background blur is defined

Description

When I have a style with a background blur the plugin crashes on launch. When I remove the style, the plugin works without issue. It's possible this bug occurs with other effects too.

Steps to reproduce

Create the following style

Launch the plugin

Additional info

Figma version: Figma Desktop App version 98.10
OS version: 10.13.6

Extra

The Figma console prints the following:

TypeError: cannot read property 'r' of undefined
    at makeRgb (PLUGIN_13_SOURCE:4490)
    at <anonymous> (PLUGIN_13_SOURCE:4145)
    at forEach (native)
    at <anonymous> (PLUGIN_13_SOURCE:4148)
    at forEach (native)
    at <anonymous> (PLUGIN_13_SOURCE:4155)
    at ./src/js/code.js (PLUGIN_13_SOURCE:4086)
    at call (native)
    at __webpack_require__ (PLUGIN_13_SOURCE:20)
    at <anonymous> (PLUGIN_13_SOURCE:84)
    at <anonymous> (PLUGIN_13_SOURCE:4505)
    at call (native)
    at <eval> (PLUGIN_13_SOURCE:4508)

(anonymous) @ figma_app.6ea79cdb408add9985b2bea7dc54aea9.min.js.br:39

Thanks for the plugin! Keep up the good work :)

How to use this?

How to use this?
There is no How to use this information?
Idea is cool but I don't know what I'm looking at.
I don't know what steps to follow.

[Feature] Configurable base size

Is your feature request related to a problem? Please describe.

I started to convert my figma to html with a base size of 10px instead of 16px (as it's the approach used by many) but now I would like to try your plugin and I can't because I would have to rewrite everything.

Describe the solution you'd like
Make the base size configurable.

Describe alternatives you've considered
Rewrite everything is not acceptable solution.

[BUG]the plugin is NOT working

Description

when i open this plugin in figma. there are nothing auto import. colors, fonts, shadows , nothing.

Steps to reproduce

open a fig file
right click open menu
open Figma-Tailwindcss

Value has no property

Description

Hey @jan-dh I like the idea of your plugin! But currently it seems to be broken. This is the output I get into console

TypeError: value has no property
    at <anonymous> (PLUGIN_13_SOURCE)
    at forEach (native)
    at <anonymous> (PLUGIN_13_SOURCE)
    at <anonymous> (PLUGIN_13_SOURCE)
    at call (native)
    at n (PLUGIN_13_SOURCE)
    at <anonymous> (PLUGIN_13_SOURCE)
    at <anonymous> (PLUGIN_13_SOURCE:1)
    at call (native)
    at <eval> (PLUGIN_13_SOURCE:3)

Steps to reproduce

Right click element
Run plugin
Nothing happens

Is this how I'm supposed to run this ? Thanks.

[BUG]

Can I disable the REM conversion and leave it as-authored?

[BUG] Border radius "default" variant is never generated as 1rem

Description

Thanks for your work on this plugin, it's amazing. 🎉 But I do have one problem. I expected the plugin to calculate the border-radius variants based on the base font-size (like it does with the font-size variants), and I see in the code that that's how it's meant to work, however I've tried it with multiple files now and for some reason the default variant is never 1rem. For example in the file I've shared below I get these values:

 "borderRadius": {
  "none": "0",
  "xs": "0.125rem",
  "sm": "0.25rem",
  "default": "0.3125rem",
  "lg": "0.375rem",
  "xl": "0.5rem",
  "2xl": "0.75rem",
  "3xl": "1rem",
  "4xl": "1.5rem",
  "5xl": "4rem"
 }

Steps to reproduce

Open the example file and run the plugin
Generate everything and check out border-radius in the output
"default" should be "1rem" but it's not

Additional info

Figma version: web app (latest release seems to be from May 17, 2024)
OS version: Windows 10

Extra

File you can test with:
https://www.figma.com/design/7IbQtuI9IvHVKvvH5ppAHv/Official-Tailwind-CSS-Styles-(Community)?node-id=1%3A1180&t=5P4G4s89Djh290qy-1

[BUG] no longer works with new Figma update?

Description

The plugin no longer works, if I select a swatch and run the plugin it says

"running tailwinds"

and then nothing...

OS version:

Mac OSX Catalina 10.15.7

[Feature] Generate text styles as components

Hey, this is an amazing plugin, It would be nice If you could add an option to generate text styles as components:

For Example:

TypeError: cannot read property 'color' of undefined

Description

Gives this error as I run the plugin

[Feature] border-radius

Add border-radius values as possible values

[BUG] xs font size not exported correctly

Description

The export preview of font sizes looks like this:

With 2xs and xs being huge. And the corresponding json that is generated:

 "fontSize": {
  "2xs": "0.75rem",
  "xs": "8rem",
  "sm": "0.875rem",
  "base": "1rem",
  "lg": "1.125rem",
  "xl": "1.25rem",
  "2xl": "1.5rem",
  "3xl": "1.875rem",
  "4xl": "2.25rem",
  "5xl": "3rem",
  "6xl": "3.75rem",
  "7xl": "4.5rem",
  "8xl": "6rem"
 },

Despite the preview being wrong, the json for 2xs is correct. But note the wrong font size for xs, it's missing 0..

Steps to reproduce

Launch the plugin
Choose a base font size

Additional info

Figma version: Figma Desktop App version 98.13
OS version: 10.13.6

jan-dh / figma-tailwindcss Goto Github PK

figma-tailwindcss's Introduction

Figma Tailwindcss

Table of Contents

Usage

Creating your theme

Colors

Font-families

Text-sizes

Box-shadows

Border-radius

Importing your theme

Extending the default theme

Contributing

Roadmap

License

figma-tailwindcss's People

Contributors

Stargazers

Watchers

Forkers

figma-tailwindcss's Issues

Description

Steps to reproduce

Additional info

Extra

Description

Steps to reproduce

Additional info

Extra

Description

Steps to reproduce

Description

Steps to reproduce

Description

Steps to reproduce

Additional info

Extra

Description

Description

Description

Steps to reproduce

Additional info

Recommend Projects

Recommend Topics

Recommend Org