Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jan-dh/figma-tailwindcss
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
https://github.com/jan-dh/figma-tailwindcss
figma figma-plugin tailwindcss
Last synced: 3 days ago
JSON representation
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
- Host: GitHub
- URL: https://github.com/jan-dh/figma-tailwindcss
- Owner: jan-dh
- Created: 2019-12-08T22:00:59.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-05-22T12:40:52.000Z (8 months ago)
- Last Synced: 2025-01-09T01:43:33.408Z (10 days ago)
- Topics: figma, figma-plugin, tailwindcss
- Language: JavaScript
- Homepage:
- Size: 1.98 MB
- Stars: 184
- Watchers: 5
- Forks: 17
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome - jan-dh/figma-tailwindcss - 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)
README
# 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](https://www.figma.com/community/plugin/785619431629077634/Figma-Tailwindcss)
---
## Table of Contents
- [Usage](#usage)
- [Roadmap](#roadmap)
- [License](#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:
```javascript
...
'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](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss). 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:
- https://tailwindcss.com/docs/theme#extending-the-default-theme
- https://www.youtube.com/watch?v=0l0Gx8gWPHk&ab_channel=TailwindLabs
## Contributing
All feedback is welcome. Feel free to submit [issues or suggestions](https://github.com/jan-dh/figma-tailwindcss/issues).
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](https://github.com/jan-dh/figma-tailwindcss/blob/master/src/js/helpers/randomMessages.js).
## Roadmap
- line-height
## License
This project is licensed under the terms of the MIT license.