# figma2css-app

> # Attention this project is in a very early stage, a lot of things need to be improved, issues are welcome :D

Latest version **0.0.6** (published 2020-07-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install figma2css-app
pnpm add figma2css-app
yarn add figma2css-app
bun add figma2css-app
```

Provides the command `figma2css-app`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2020-07-28 |
| First published | 2020-05-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 17 |
| Unpacked size | 151.6 KB |
| Known vulnerabilities | 0 (+7 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | mmc |

## Links

- npm: https://www.npmjs.com/package/figma2css-app
- npm.io page: https://npm.io/package/figma2css-app

## Dependencies (17)

- [cors](https://npm.io/package/cors.md) ^2.8.5
- [open](https://npm.io/package/open.md) ^7.0.4
- [reload](https://npm.io/package/reload.md) ^3.0.4
- [rollup](https://npm.io/package/rollup.md) ^2.3.4
- [svelte](https://npm.io/package/svelte.md) ^3.0.0
- [express](https://npm.io/package/express.md) ^4.17.1
- [sirv-cli](https://npm.io/package/sirv-cli.md) ^0.4.4
- [commander](https://npm.io/package/commander.md) ^5.1.0
- [supervisor](https://npm.io/package/supervisor.md) ^0.12.0
- [body-parser](https://npm.io/package/body-parser.md) ^1.19.0
- [figma2css-module](https://npm.io/package/figma2css-module.md) ^0.0.4
- [figmafetch-module](https://npm.io/package/figmafetch-module.md) ^1.0.4
- [rollup-plugin-svelte](https://npm.io/package/rollup-plugin-svelte.md) ^5.0.3
- [rollup-plugin-terser](https://npm.io/package/rollup-plugin-terser.md) ^5.1.2
- [@rollup/plugin-commonjs](https://npm.io/package/@rollup/plugin-commonjs.md) ^12.0.0
- [rollup-plugin-livereload](https://npm.io/package/rollup-plugin-livereload.md) ^1.0.0
- [@rollup/plugin-node-resolve](https://npm.io/package/@rollup/plugin-node-resolve.md) ^8.0.0

## Recent versions

- 0.0.6 (latest) — 2020-07-28
- 0.0.5 — 2020-05-23
- 0.0.4 — 2020-05-16
- 0.0.3 — 2020-05-16
- 0.0.2 — 2020-05-16
- 0.0.1 — 2020-05-16
- 1.0.0 — 2020-05-16

## README

#figma2css-app

# Attention
this project is in a very early stage, a lot of things need to be improved, issues are welcome :D

# Use cases

This is very usefull for components or pages that babely change between projects, so you don't have to change the styles everytime
you just need to map them and generate the css

We found that a mixture of generating automacally and also including your own css is the best approach in most cases

We're currently working in the css transformation itself to make it more efficient and precise

##How to use it

```
npm i -g figma2css-app
figma2css-app
```

open your browser in port 5000

# Figma Access token:
how to get an access token:
https://www.figma.com/developers/api#access-tokens

# File id*
you can get it in the file url e.g:
https://www.figma.com/file/acuAbVNviSzackLyfNNBaM/<......>

acuAbVNviSzackLyfNNBaM is the fileId of this url

# Full Output Path
you can put the output path of the generated css file e.g:
```
/home/mmc/my-project/css/figma-generated-css.css
```
if you're running watch mode everytime that the figma file change this file will be changed too :smile:

Click load Data to load the treeview with all the figma elements

Choose the elements that you want to extract the css from, you should also change the name of the element in the design to 
the name of your css class, we plan to change this in the future so you've more freedom to choose the name of the class, but 
for now this is the best approach

Then click **generate css** to generate the css once
or **Watch** to watch the figma file and generate the css everytime the figma file changes

and that's it enjoy


# Development

For development run
```
npm run frontend
npm run backend
```

go to localhost:5000

---
_Source: https://npm.io/package/figma2css-app · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._