diff --git a/.figmaexportrc.example.local.ts b/.figmaexportrc.example.local.ts
index 7ca72a33..0b9c2ca7 100755
--- 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
index 5ed7145b..d9e336cc 100644
--- 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
index ac67d12c..f43f918a 100644
--- 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
index 1d12f681..bcd7ba3b 100644
--- 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
index e14ad396..2af3f1de 100644
--- 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
index a7e9c347..bd550d03 100644
--- 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
index 807a00ee..7815171b 100644
--- 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
index f67ea565..db68fafd 100644
--- 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
index ff7095b8..392b6f48 100644
--- 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
index 754d1394..8b0611d2 100644
--- 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
index cfa44e50..d1ad3019 100644
--- 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
new file mode 100644
index 00000000..806fd8a0
--- /dev/null
+++ 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 Style Dictionary
tokens
+ >
+ ),
+ description: (
+ <>
+
base.json
.
+