-
-
Notifications
You must be signed in to change notification settings - Fork 34
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
7a7f675
commit c79345b
Showing
8 changed files
with
512 additions
and
507 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,51 +1,56 @@ | ||
| // @ts-check | ||
|
|
||
| /** @type {import('@figma-export/types').FigmaExportRC} */ | ||
| module.exports = { | ||
| import outputComponentsAsSvg from '@figma-export/output-components-as-svg' | ||
| import outputStylesAsSass from '@figma-export/output-styles-as-sass' | ||
| import transformSvgWithSvgo from '@figma-export/transform-svg-with-svgo' | ||
|
|
||
| commands: [ | ||
| ['styles', { | ||
| fileId: 'fzYhvQpqwhZDUImRz431Qo', | ||
| // version: 'xxx123456', // optional - file's version history is only supported on paid Figma plans | ||
| // onlyFromPages: ['icons'], // optional - Figma page names or IDs (all pages when not specified), | ||
| outputters: [ | ||
| require('@figma-export/output-styles-as-sass')({ | ||
| output: './output' | ||
| }) | ||
| ] | ||
| }], | ||
| /** @type { import('@figma-export/types').StylesCommandOptions } */ | ||
| const styleOptions = { | ||
| fileId: 'fzYhvQpqwhZDUImRz431Qo', | ||
| // version: 'xxx123456', // optional - file's version history is only supported on paid Figma plans | ||
| // ids: ['138:52'], // optional - Export only specified node IDs (the `onlyFromPages` option is always ignored when set) | ||
| // onlyFromPages: ['icons'], // optional - Figma page names or IDs (all pages when not specified) | ||
| outputters: [ | ||
| outputStylesAsSass({ | ||
| output: './output' | ||
| }) | ||
| ] | ||
| } | ||
|
|
||
| ['components', { | ||
| fileId: 'fzYhvQpqwhZDUImRz431Qo', | ||
| // version: 'xxx123456', // optional - file's version history is only supported on paid Figma plans | ||
| onlyFromPages: ['icons'], | ||
| transformers: [ | ||
| require('@figma-export/transform-svg-with-svgo')({ | ||
| plugins: [ | ||
| { | ||
| name: 'preset-default', | ||
| params: { | ||
| overrides: { | ||
| removeViewBox: false, | ||
| } | ||
| } | ||
| }, | ||
| { | ||
| name: 'removeDimensions', | ||
| active: true | ||
| } | ||
| ] | ||
| }) | ||
| ], | ||
| outputters: [ | ||
| require('@figma-export/output-components-as-svg')({ | ||
| output: './output' | ||
| }), | ||
| require('@figma-export/output-components-as-es6')({ | ||
| output: './output' | ||
| }) | ||
| ] | ||
| }] | ||
| ] | ||
| /** @type { import('@figma-export/types').ComponentsCommandOptions } */ | ||
| const componentOptions = { | ||
| fileId: 'fzYhvQpqwhZDUImRz431Qo', | ||
| // version: 'xxx123456', // optional - file's version history is only supported on paid Figma plans | ||
| // ids: ['54:22'], // optional - Export only specified node IDs (the `onlyFromPages` option is always ignored when set) | ||
| onlyFromPages: ['icons'], | ||
| transformers: [ | ||
| transformSvgWithSvgo({ | ||
| plugins: [ | ||
| { | ||
| name: 'preset-default', | ||
| params: { | ||
| overrides: { | ||
| removeViewBox: false, | ||
| } | ||
| } | ||
| }, | ||
| { | ||
| name: 'removeDimensions' | ||
| } | ||
| ] | ||
| }) | ||
| ], | ||
| outputters: [ | ||
| outputComponentsAsSvg({ | ||
| output: './output' | ||
| }) | ||
| ] | ||
| } | ||
|
|
||
| }; | ||
| /** @type { import('@figma-export/types').FigmaExportRC } */ | ||
| export default { | ||
| commands: [ | ||
| ['styles', styleOptions], | ||
| ['components', componentOptions] | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| // @ts-check | ||
|
|
||
| /** | ||
| * If you want to try this configuration you can just run: | ||
| * $ yarn | ||
| * $ yarn build | ||
| * $ node ./packages/cli/bin/run.js use-config .figmaexportrc.example.local.js | ||
| */ | ||
|
|
||
| import path from 'path'; | ||
|
|
||
| import outputStylesAsCss from './packages/output-styles-as-css/dist/index.js'; | ||
| import outputStylesAsLess from './packages/output-styles-as-less/dist/index.js'; | ||
| import outputStylesAsSass from './packages/output-styles-as-sass/dist/index.js'; | ||
| import outputStylesAsStyleDictionary from './packages/output-styles-as-style-dictionary/dist/index.js'; | ||
| import transformSvgWithSvgo from './packages/transform-svg-with-svgo/dist/index.js'; | ||
| import outputComponentsAsEs6 from './packages/output-components-as-es6/dist/index.js'; | ||
| import outputComponentsAsSvg from './packages/output-components-as-svg/dist/index.js'; | ||
| import outputComponentsAsSvgr from './packages/output-components-as-svgr/dist/index.js'; | ||
| import outputComponentsAsSvgstore from './packages/output-components-as-svgstore/dist/index.js'; | ||
|
|
||
| /** @type {import('./packages/types').StylesCommandOptions} */ | ||
| const styleOptions = { | ||
| fileId: 'fzYhvQpqwhZDUImRz431Qo', | ||
| // onlyFromPages: ['icons'], // optional - Figma page names or IDs (all pages when not specified) | ||
| outputters: [ | ||
| outputStylesAsCss({ | ||
| output: './output/styles/css' | ||
| }), | ||
| outputStylesAsLess({ | ||
| output: './output/styles/less' | ||
| }), | ||
| outputStylesAsSass({ | ||
| output: './output/styles/sass' | ||
| }), | ||
| outputStylesAsStyleDictionary({ | ||
| output: './output/styles/style-dictionary' | ||
| }) | ||
| ] | ||
| }; | ||
|
|
||
| /** @type {import('./packages/types').ComponentsCommandOptions} */ | ||
| const componentOptions = { | ||
| fileId: 'fzYhvQpqwhZDUImRz431Qo', | ||
| onlyFromPages: ['icons', 'unit-test', 'icons/octicons-by-github'], | ||
| // concurrency: 30, | ||
| transformers: [ | ||
| transformSvgWithSvgo({ | ||
| plugins: [ | ||
| { | ||
| name: 'preset-default', | ||
| params: { | ||
| overrides: { | ||
| removeViewBox: false, | ||
| } | ||
| } | ||
| }, | ||
| { | ||
| name: 'removeDimensions' | ||
| } | ||
| ] | ||
| }) | ||
| ], | ||
| outputters: [ | ||
| outputComponentsAsEs6({ | ||
| output: './output/components/es6', | ||
| useBase64: true, | ||
| }), | ||
| outputComponentsAsSvg({ | ||
| output: './output/components/svg', | ||
| getDirname: (options) => { | ||
| const pathToComponent = options.pathToComponent.map(p => p.name).join(path.sep) | ||
| return `${options.pageName}${path.sep}${options.dirname}${path.sep}${pathToComponent}` | ||
| }, | ||
| }), | ||
| outputComponentsAsSvgr({ | ||
| output: './output/components/svgr', | ||
| getSvgrConfig: () => ({ | ||
| template: ({ componentName, props, jsx, exports }, { tpl }) => tpl` | ||
| const ${componentName} = (${props}) => (${jsx}); | ||
| ${exports} | ||
| ` | ||
| }) | ||
| }), | ||
| outputComponentsAsSvgstore({ | ||
| output: './output/components/svgstore', | ||
| svgstoreConfig: { | ||
|
|
||
| } | ||
| }) | ||
| ] | ||
| }; | ||
|
|
||
| /** @type {import('./packages/types').FigmaExportRC} */ | ||
| export default { | ||
| commands: [ | ||
| ['styles', styleOptions], | ||
| ['components', componentOptions] | ||
| ] | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,64 +1,59 @@ | ||
| /** | ||
| * If you want to try this configuration you can just run: | ||
| * $ npm install --save-dev typescript ts-node @types/node @figma-export/types | ||
| * $ npm install --save-dev @figma-export/output-styles-as-sass @figma-export/transform-svg-with-svgo @figma-export/output-components-as-svg @figma-export/output-components-as-es6 | ||
| * $ npm install --save-dev typescript tsx @types/node @figma-export/types | ||
| * $ npm install --save-dev @figma-export/output-styles-as-sass @figma-export/transform-svg-with-svgo @figma-export/output-components-as-svg | ||
| */ | ||
|
|
||
| import { FigmaExportRC, StylesCommandOptions, ComponentsCommandOptions } from '@figma-export/types'; | ||
| import { FigmaExportRC, StylesCommandOptions, ComponentsCommandOptions } from '@figma-export/types' | ||
|
|
||
| import outputStylesAsSass from '@figma-export/output-styles-as-sass'; | ||
| import transformSvgWithSvgo from '@figma-export/transform-svg-with-svgo'; | ||
| import outputComponentsAsSvg from '@figma-export/output-components-as-svg'; | ||
| import outputComponentsAsEs6 from '@figma-export/output-components-as-es6'; | ||
| import outputComponentsAsSvg from '@figma-export/output-components-as-svg' | ||
| import outputStylesAsSass from '@figma-export/output-styles-as-sass' | ||
| import transformSvgWithSvgo from '@figma-export/transform-svg-with-svgo' | ||
|
|
||
| const styleOptions: StylesCommandOptions = { | ||
| fileId: 'fzYhvQpqwhZDUImRz431Qo', | ||
| // version: 'xxx123456', // optional - file's version history is only supported on paid Figma plans | ||
| // ids: ['138:52'], // optional - Export only specified node IDs (the `onlyFromPages` option is always ignored when set) | ||
| // onlyFromPages: ['icons'], // optional - Figma page names or IDs (all pages when not specified) | ||
| outputters: [ | ||
| outputStylesAsSass({ | ||
| output: './output' | ||
| }) | ||
| ] | ||
| }; | ||
| fileId: 'fzYhvQpqwhZDUImRz431Qo', | ||
| // version: 'xxx123456', // optional - file's version history is only supported on paid Figma plans | ||
| // ids: ['138:52'], // optional - Export only specified node IDs (the `onlyFromPages` option is always ignored when set) | ||
| // onlyFromPages: ['icons'], // optional - Figma page names or IDs (all pages when not specified) | ||
| outputters: [ | ||
| outputStylesAsSass({ | ||
| output: './output' | ||
| }) | ||
| ] | ||
| } | ||
|
|
||
| const componentOptions: ComponentsCommandOptions = { | ||
| fileId: 'fzYhvQpqwhZDUImRz431Qo', | ||
| // version: 'xxx123456', // optional - file's version history is only supported on paid Figma plans | ||
| // ids: ['54:22'], // optional - Export only specified node IDs (the `onlyFromPages` option is always ignored when set) | ||
| onlyFromPages: ['icons'], | ||
| transformers: [ | ||
| transformSvgWithSvgo({ | ||
| plugins: [ | ||
| { | ||
| name: 'preset-default', | ||
| params: { | ||
| overrides: { | ||
| removeViewBox: false, | ||
| } | ||
| } | ||
| }, | ||
| { | ||
| name: 'removeDimensions', | ||
| active: true | ||
| } | ||
| ] | ||
| }) | ||
| ], | ||
| outputters: [ | ||
| outputComponentsAsSvg({ | ||
| output: './output' | ||
| }), | ||
| outputComponentsAsEs6({ | ||
| output: './output' | ||
| }) | ||
| ] | ||
| }; | ||
| fileId: 'fzYhvQpqwhZDUImRz431Qo', | ||
| // version: 'xxx123456', // optional - file's version history is only supported on paid Figma plans | ||
| // ids: ['54:22'], // optional - Export only specified node IDs (the `onlyFromPages` option is always ignored when set) | ||
| onlyFromPages: ['icons'], | ||
| transformers: [ | ||
| transformSvgWithSvgo({ | ||
| plugins: [ | ||
| { | ||
| name: 'preset-default', | ||
| params: { | ||
| overrides: { | ||
| removeViewBox: false, | ||
| } | ||
| } | ||
| }, | ||
| { | ||
| name: 'removeDimensions' | ||
| } | ||
| ] | ||
| }) | ||
| ], | ||
| outputters: [ | ||
| outputComponentsAsSvg({ | ||
| output: './output' | ||
| }) | ||
| ] | ||
| } | ||
|
|
||
| (module.exports as FigmaExportRC) = { | ||
| commands: [ | ||
| ['styles', styleOptions], | ||
| ['components', componentOptions] | ||
| ] | ||
| }; | ||
| export default { | ||
| commands: [ | ||
| ['styles', styleOptions], | ||
| ['components', componentOptions] | ||
| ] | ||
| } satisfies FigmaExportRC |
Oops, something went wrong.