Giter VIP home page Giter VIP logo

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


Table of Contents

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

dependabot[bot] avatar jan-dh avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

figma-tailwindcss's Issues

[BUG]

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

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.

[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

  1. Create the following style

image

  1. 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 :)

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

  1. Right click element
  2. Run plugin
  3. Nothing happens

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

[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

[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.

image

Steps to reproduce

  1. open a fig file
  2. right click open menu
  3. open Figma-Tailwindcss

[BUG] xs font size not exported correctly

Description

The export preview of font sizes looks like this:
image

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

  1. Launch the plugin
  2. Choose a base font size

Additional info

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

Colors not grouped?

Description

We have a list of colors that start with the same prefix, but they don't seem to be grouped.
Screenshot from 2021-09-23 09-31-24@2x
Screenshot from 2021-09-23 09-32-02@2x
Screenshot from 2021-09-23 09-31-57@2x

Steps to reproduce

  1. Create a new design file
  2. Create local color presets with names like "Red 100", "Red 200", "Red 300"
  3. 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] 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...

  • Figma version: 90
    Build 4
    Copyright © 2020 Figma, Inc.

  • OS version:

Mac OSX Catalina 10.15.7

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.