Token -> Code

<p>The plugin read elements you select and let you export them into Html with SACSS.</p><p><br></p><p>If the element with Auto layout it goes to <code>flex</code>.</p><p><br></p><p>* SACSS「 Static Atomic css 」: Each css selector with only one css rules.</p><p><br></p><h2><strong>Five Tabs:</strong></h2><p><br></p><ol><li>HTML: Elements =&gt; HTML;</li><li>CSS: Element Style =&gt; CSS;</li><li>Token: get Base Token Info;</li><li>Config: Config the whole project;</li><li>Help: for help;</li></ol><p><br></p><p>There are 2 way to use Token to code.</p><p><br></p><h2>1. Pure way:</h2><p><br></p><p>This way you need config nothing.</p><p><br></p><p>Just open plugin and select the element. The element will transform to the Static Atomic CSS like below.</p><p><br></p><ul><li><code>font-size</code>：<code> .fs12{ font-size: 12px; }</code>;</li><li><code>font-weight</code>：<code>.fw700{ font-weight: 700; }</code>;</li><li><code>font-style</code>：<code>fsi{ font-style: italic; };</code></li><li><code>line-height</code>：<code>.lh16{ line-height: 16px; }</code>;</li><li><code>text-align</code>：<code>tac{ text-align: center; }</code>;</li><li><code>text-transform</code>：<code>.ttc{ text-transform: capitalize; };</code></li><li><code>padding</code>: <code>.pb16{ padding-bottom:16px; }</code></li><li><code>flex: .df{ display:flex; }</code></li><li><code>...</code></li></ul><p><br></p><p>you need `$ npm install sacss` first.</p><p><br></p><p><a href="https://www.npmjs.com/package/sacss" rel="noreferrer noopener nofollow" target="_blank">https://www.npmjs.com/package/sacss</a></p><p><br></p><p>All style in SACSS will ignore.</p><p><br></p><p>Wanna known more about SACSS?</p><p><br></p><p><a href="https://s-acss.github.io/" rel="noreferrer noopener nofollow" target="_blank">https://s-acss.github.io/</a></p><p><br></p><h2>2. Custom way:</h2><p><br></p><p>You can custom each token through the figma token id.</p><p><br></p><p>When the generator match the rules, it will turn out to be the code as you custom.</p><p><br></p><p>The other stuff you don't give alias will use SACSS instead.</p><h2><br></h2><h2><strong>2.1 Custom Base node</strong></h2><p><br></p><pre class="ql-syntax" spellcheck="false">{ "tokens": { [id]: { "_tokenName": "effet1", "_tokenType": "EFFECT", "DEFAULT": { "className": ["g_shadow1"], "_ignoreClassName": [] } } } } </pre><p><br></p><p>this will output the node with `g_shadow` class</p><p><br></p><h2><strong>2.1 Custom depend the node type</strong></h2><p><br></p><pre class="ql-syntax" spellcheck="false">{ "tokens": { [id]: { "_tokenName": "figma node name", "_tokenType": "COMPONENT", "DEFAULT": { "type": "primary", "size": "large", "tagName": "Button", "className": [], "children": true, "_ignoreClassName": [], "_renderHeight": true, "_renderWidth": true } } } } </pre><p><br></p><p>it will render like :</p><p><br></p><p>`&lt;Button type="primary" size="large"&gt;button&lt;/Button&gt;`</p><p><br></p><p>Component will ignore Height and Width default, if you wanna it you can set <code><em>renderHeight</em></code><em> add `</em>_<em>renderWidth</em>` to be true</p><p><br></p><h2><strong>Token</strong></h2><p><br></p><ul><li>fill</li><li>text</li><li>effect</li><li>stroke</li><li>grid</li><li>effect</li><li>component</li><li>padding</li><li>flex</li></ul><p><br></p><p>Anything can turn out to be code is calling Token.</p><p><br></p><h2>FAG</h2><p><br></p><p>1. I can't open the plugin of SACSS in the first time?</p><p>Try 3 times and wait.</p><p><br></p><p>2. How to ignore some element?</p><p>Just set those element name with `_` start.</p><p>exp: `_header`</p>