Token -> Code Figma Plugin

The plugin read elements you select and let you export them into Html with SACSS.

If the element with Auto layout it goes to flex.

* SACSS「 Static Atomic css 」: Each css selector with only one css rules.

Five Tabs:

1. HTML: Elements => HTML;
2. CSS: Element Style => CSS;
3. Token: you can custom the node with token which you select;
4. Config: Config the whole project;
5. Help: for help;

There are 2 way to use Token to code.

1. Pure way:

This way you need config nothing.

Just open plugin and select the element. The element will transform to the Static Atomic CSS like below.

• 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; }
• ...

you need `$ npm install sacss` first.

https://www.npmjs.com/package/sacss

All style in SACSS will ignore.

Wanna known more about SACSS?

https://s-acss.github.io/

2. Custom way:

You can custom each token through the figma token id.

When the generator match the rules, it will turn out to be the code as you custom.

The other stuff you don’t give alias will use SACSS instead.

2.1 Custom Base node

{
  "tokens": {
   [id]: {
      "_tokenName": "effet1",
      "_tokenType": "EFFECT",
      "DEFAULT": {
        "className": ["g_shadow1"],
        "_ignoreClassName": []
      }
    }
  }
}

this will output the node with `g_shadow` class

2.1 Custom depend the node type

{
  "tokens": {
    [id]: {
      "_tokenName": "figma node name",
      "_tokenType": "COMPONENT",
      "DEFAULT": {
        "type": "primary",
        "size": "large",
        "tagName": "Button",
        "className": [],
        "children": true,
        "_ignoreClassName": [],
        "_renderHeight": true,
        "_renderWidth": true
      }
    }
  }
}

it will render like :

`<Button type=”primary” size=”large”>button</Button>`

Component will ignore Height and Width default, if you wanna it you can set renderHeight add `_renderWidth` to be true

Token

• fill
• text
• effect
• stroke
• grid
• effect
• component
• padding
• flex

Anything can turn out to be code is calling 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 element?

Just set those element name with `_` start.

exp: `_header´