https://github.com/s-acss/figma-token-to-code
Generate the text element to Html with css.
https://github.com/s-acss/figma-token-to-code
acss css-selector figma-plugin figma-plugins sacss
Last synced: 2 months ago
JSON representation
Generate the text element to Html with css.
- Host: GitHub
- URL: https://github.com/s-acss/figma-token-to-code
- Owner: s-acss
- Created: 2019-09-28T13:29:27.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-05T20:43:54.000Z (over 2 years ago)
- Last Synced: 2025-03-24T21:51:11.552Z (3 months ago)
- Topics: acss, css-selector, figma-plugin, figma-plugins, sacss
- Language: TypeScript
- Homepage: https://www.figma.com/community/plugin/759651077059504375/ACSS
- Size: 5.2 MB
- Stars: 12
- Watchers: 1
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Figma Token to Code
Generate the node to Html with CSS.
The plugin read element you select and let you export them into Html with CSS.
If the element with Auto layout it will go to flex.
## Feature
- HTML: Elements => HTML;
- CSS: Element Style => CSS;
- Project: Manage the token you custom and upload;
- Token: All component and styles in current figma file, you can download as JSON and custom them and upload at 「 Project 」;
There are 2 way to use SACSS.
## Pure way:
This way you do not need setting, just open and generator.
The element will transform to the Atomic CSS.
- font-size： .fs12{ font-size: 12px; };
- font-weight：.fw700{ font-weight: 700; };
- font-style：fsi{ font-style: italic; };
- line-height：.lh16{ line-height: 16px; };
- text-align：tac{ text-align: center; };
- text-transform：.ttc{ text-transform: capitalize; };
- padding: .pb16{ padding-bottom:16px; }
- flex: .df{ display:flex; }
* SACSS「 Static Atomic css 」: Each css selector with only one css rules.
you need `$ npm install sacss` first.
[https://www.npmjs.com/package/sacss](https://www.npmjs.com/package/sacss)
## Custom way:
- You can give each local style name a alias as the css selector in Token.
- When the generator match the rules, it will turn out to be the html and the CSS.
- Even you can custom a Component.
The other stuff you don't give alias will use SACSS instead
## Token
- fill
- text
- effect
- stroke
- grid
- effect
- component
- padding
- flex
All of them are token.
## FAG
1. I can't open the plugin of SACSS in the first time?
Try 3 times and wait.
2. How to ignore some local styles name?
Just set those style name with `_` start.
exp: `_Header`
4. I wanna knonw more about SACSS in code
[https://ziven27.github.io/sacss](ziven27.github.io/sacss)