Update website and documentation

marcomontalbano · May 23, 2023 · aa1d4e5 · aa1d4e5
1 parent f506c00
commit aa1d4e5
Show file tree

Hide file tree

Showing 13 changed files with 62 additions and 14 deletions.
diff --git a/.figmaexportrc.example.local.ts b/.figmaexportrc.example.local.ts
@@ -11,6 +11,7 @@ import { FigmaExportRC, StylesCommandOptions, ComponentsCommandOptions } from '.
 import outputStylesAsCss from './packages/output-styles-as-css';
 import outputStylesAsLess from './packages/output-styles-as-less';
 import outputStylesAsSass from './packages/output-styles-as-sass';
+import outputStylesAsStyleDictionary from './packages/output-styles-as-style-dictionary';
 import transformSvgWithSvgo from './packages/transform-svg-with-svgo';
 import outputComponentsAsEs6 from './packages/output-components-as-es6';
 import outputComponentsAsSvg from './packages/output-components-as-svg';
@@ -29,6 +30,9 @@ const styleOptions: StylesCommandOptions = {
         }),
         outputStylesAsSass({
             output: './output/styles/sass'
+        }),
+        outputStylesAsStyleDictionary({
+            output: './output/styles/style-dictionary'
         })
     ]
 };

diff --git a/README.md b/README.md
@@ -27,7 +27,7 @@ You can export your Figma Components as SVG and use them inside your website.
 
 ### Styles
 
-You can export your Figma Styles into different output like `.sass` format, `.scss` format or you can create your own outputter.
+You can export your Figma Styles into different output like `.sass` format, `.scss` format, [`Style Dictionary`](https://amzn.github.io/style-dictionary/#/) tokens or you can create your own outputter.
 
 > If you want to keep the style of your Figma file in-sync with the `.css` of your website, this is a must-have.
 

diff --git a/packages/cli/README.md b/packages/cli/README.md
@@ -157,5 +157,6 @@ or install an official outputter:
 | Package | Version |
 |---------|---------|
 | [`@figma-export/output-styles-as-css`](/packages/output-styles-as-css) | [![npm](https://img.shields.io/npm/v/@figma-export/output-styles-as-css.svg?maxAge=3600)](https://www.npmjs.com/package/@figma-export/output-styles-as-css) |
+| [`@figma-export/output-styles-as-style-dictionary`](/packages/output-styles-as-style-dictionary) | [![npm](https://img.shields.io/npm/v/@figma-export/output-styles-as-style-dictionary.svg?maxAge=3600)](https://www.npmjs.com/package/@figma-export/output-styles-as-style-dictionary) |
 | [`@figma-export/output-styles-as-sass`](/packages/output-styles-as-sass) | [![npm](https://img.shields.io/npm/v/@figma-export/output-styles-as-sass.svg?maxAge=3600)](https://www.npmjs.com/package/@figma-export/output-styles-as-sass) |
 | [`@figma-export/output-styles-as-less`](/packages/output-styles-as-less) | [![npm](https://img.shields.io/npm/v/@figma-export/output-styles-as-less.svg?maxAge=3600)](https://www.npmjs.com/package/@figma-export/output-styles-as-less) |
diff --git a/packages/output-components-as-es6/src/index.test.ts b/packages/output-components-as-es6/src/index.test.ts
@@ -11,8 +11,8 @@ import * as FigmaExport from '@figma-export/types';
 import * as figmaDocument from '../../core/src/lib/_config.test';
 import * as figma from '../../core/src/lib/figma';
 
-import fs = require('fs');
-import outputter = require('./index');
+import fs from 'fs';
+import outputter from './index';
 
 describe('outputter as es6', () => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

diff --git a/packages/output-components-as-svg/src/index.test.ts b/packages/output-components-as-svg/src/index.test.ts
@@ -2,9 +2,9 @@ import sinon from 'sinon';
 import { expect } from 'chai';
 import * as figmaDocument from '../../core/src/lib/_config.test';
 import * as figma from '../../core/src/lib/figma';
-import fs = require('fs');
 
-import outputter = require('./index');
+import fs from 'fs';
+import outputter from './index';
 
 describe('outputter as svg', () => {
     beforeEach(() => {

diff --git a/packages/output-components-as-svgr/src/index.test.ts b/packages/output-components-as-svgr/src/index.test.ts
@@ -5,9 +5,9 @@ import nock from 'nock';
 import { camelCase, kebabCase } from '@figma-export/utils';
 import * as figmaDocument from '../../core/src/lib/_config.test';
 import * as figma from '../../core/src/lib/figma';
-import fs = require('fs');
 
-import outputter = require('./index');
+import fs from 'fs';
+import outputter from './index';
 
 describe('outputter as svgr', () => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

diff --git a/packages/output-components-as-svgstore/src/index.test.ts b/packages/output-components-as-svgstore/src/index.test.ts
@@ -4,9 +4,8 @@ import { expect } from 'chai';
 import * as figmaDocument from '../../core/src/lib/_config.test';
 import * as figma from '../../core/src/lib/figma';
 
-// eslint-disable-next-line import/order
-import fs = require('fs');
-import outputter = require('./index');
+import fs from 'fs';
+import outputter from './index';
 
 describe('outputter as svgstore', () => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

diff --git a/packages/output-styles-as-css/README.md b/packages/output-styles-as-css/README.md
@@ -44,7 +44,7 @@ const { kebabCase } = require('@figma-export/utils');
 require('@figma-export/output-styles-as-css')({
     output: './output',
     getFilename: () => '_variables',
-    getVariableName: (style) => kebabCase(style.name).toLowerCase(),
+    getVariableName = (style, descriptor) => `${kebabCase(style.name).toLowerCase()}${descriptor != null ? `-${descriptor}` : ''}`,
 })
 ```
 

diff --git a/packages/output-styles-as-less/README.md b/packages/output-styles-as-less/README.md
@@ -44,7 +44,7 @@ const { kebabCase } = require('@figma-export/utils');
 require('@figma-export/output-styles-as-less')({
     output: './output',
     getFilename: () => '_variables',
-    getVariableName: (style) => kebabCase(style.name).toLowerCase(),
+    getVariableName = (style, descriptor) => `${kebabCase(style.name).toLowerCase()}${descriptor != null ? `-${descriptor}` : ''}`,
 })
 ```
 

diff --git a/packages/output-styles-as-sass/README.md b/packages/output-styles-as-sass/README.md
@@ -45,7 +45,7 @@ require('@figma-export/output-styles-as-sass')({
     output: './output',
     getExtension: () => 'SCSS',
     getFilename: () => '_variables',
-    getVariableName: (style) => kebabCase(style.name).toLowerCase(),
+    getVariableName = (style, descriptor) => `${kebabCase(style.name).toLowerCase()}${descriptor != null ? `-${descriptor}` : ''}`,
 })
 ```
 

diff --git a/packages/output-styles-as-style-dictionary/README.md b/packages/output-styles-as-style-dictionary/README.md
@@ -45,7 +45,7 @@ require('@figma-export/output-styles-as-style-dictionary')({
     output: './output',
     getExtension: () => 'JSON',
     getFilename: () => 'base',
-    getVariableName: (style) => kebabCase(style.name).toLowerCase(),
+    getVariableName = (style, descriptor) => `${kebabCase(style.name).toLowerCase()}${descriptor != null ? `-${descriptor}` : ''}`,
 })
 ```
 

diff --git a/packages/website/src/output-styles/AsStyleDictionary.jsx b/packages/website/src/output-styles/AsStyleDictionary.jsx
@@ -0,0 +1,42 @@
+import Code from '../components/Code';
+import CodeBlock from '../components/CodeBlock';
+
+const props = {
+    title: (
+        <>
+            Export your styles as <code className="figma-gradient with-opacity-10">Style Dictionary</code> tokens
+        </>
+    ),
+    description: (
+        <>
+            <div>
+                Once exported, you can configure a{' '}
+                <a target="_blank" rel="noreferrer" href="https://amzn.github.io/style-dictionary/#/">
+                    Style Dictionary
+                </a>{' '}
+                project and use the generated <code>base.json</code>.
+            </div>
+        </>
+    ),
+    code: `
+        module.exports = {
+            commands: [
+                ['styles', {
+                    fileId: 'fzYhvQpqwhZDUImRz431Qo',
+                    outputters: [
+                        // https://www.npmjs.com/package/@figma-export/output-styles-as-style-dictionary
+                        require('@figma-export/output-styles-as-style-dictionary')({
+                            output: './output/style-dictionary',
+                        })
+                    ]
+                }]
+            ]
+        }
+`,
+};
+
+const AsStyleDictionary = () => (
+    <CodeBlock {...props} />
+);
+
+export default AsStyleDictionary;
diff --git a/packages/website/src/output-styles/FigmaStyles.jsx b/packages/website/src/output-styles/FigmaStyles.jsx
@@ -1,6 +1,7 @@
 import AsCss from './AsCss';
 import AsSass from './AsSass';
 import AsLess from './AsLess';
+import AsStyleDictionary from './AsStyleDictionary';
 
 const FigmaStyles = () => (
     <div className="section-block container text-center">
@@ -55,6 +56,7 @@ const FigmaStyles = () => (
         </div>
 
         <AsCss />
+        <AsStyleDictionary />
         <AsSass />
         <AsLess />
     </div>