From 2a826ffdbbf0d65bd843ff8930bf085c7216c93b Mon Sep 17 00:00:00 2001 From: Marco Montalbano Date: Mon, 7 Sep 2020 21:46:27 +0200 Subject: [PATCH 1/4] Usage of .figmaexportrc.ts (#74) --- README.md | 19 +++++++++++++++ package.json | 2 +- packages/core/src/lib/export-components.ts | 11 +-------- packages/core/src/lib/export-styles.ts | 9 +------- packages/types/src/commands.ts | 27 ++++++++++++++++++++++ packages/types/src/index.ts | 1 + 6 files changed, 50 insertions(+), 19 deletions(-) create mode 100644 packages/types/src/commands.ts diff --git a/README.md b/README.md index 0261da39..8bb1d1a4 100644 --- a/README.md +++ b/README.md @@ -228,6 +228,25 @@ If needed you can also provide a different configuration file. } ``` +#### TypeScript + +If you prefer, you can create a `.figmaexportrc.ts` and use TypeScript instead. +For doing so, you just need to install a few new dependencies in your project, + +```sh +npm install --save-dev typescript ts-node @types/node @figma-export/types +``` + +and slightly change your `package.json` + +```diff +{ + "scripts": { ++ "figma:export": "ts-node ./node_modules/.bin/figma-export use-config .figmaexportrc.ts" + } +} +``` + ## :books: More Packages For the list of all official packages or if you want to create your own transformer or outputter you can continue reading [CLI Documentation](/packages/cli#readme). diff --git a/package.json b/package.json index c0c50ade..7c8e6e86 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ }, "scripts": { "predebug": "yarn build", - "debug": "./packages/cli/bin/run use-config", + "debug": "./packages/cli/bin/run use-config .figmaexportrc.ts", "preinstall": "node -e \"if(process.env.npm_execpath.indexOf('yarn') === -1) throw new Error('You must use Yarn to install, not NPM')\"", "clean": "rm -rf node_modules/ output/ */*/node_modules */*/output */*/dist */*/tsconfig.tsbuildinfo", "postinstall": "lerna bootstrap", diff --git a/packages/core/src/lib/export-components.ts b/packages/core/src/lib/export-components.ts index 9f1e6bec..28610c2e 100644 --- a/packages/core/src/lib/export-components.ts +++ b/packages/core/src/lib/export-components.ts @@ -3,15 +3,6 @@ import { Document } from 'figma-js'; import { getClient, getPages, enrichPagesWithSvg } from './figma'; -type Options = { - token: string; - fileId: string; - onlyFromPages?: string[]; - transformers?: FigmaExport.StringTransformer[]; - outputters?: FigmaExport.ComponentOutputter[]; - log?: (msg: string) => void; -} - export const components = async ({ token, fileId, @@ -22,7 +13,7 @@ export const components = async ({ // eslint-disable-next-line no-console console.log(msg); }, -}: Options): Promise => { +}: FigmaExport.ExportComponentsOptions): Promise => { const client = getClient(token); log('fetching document'); diff --git a/packages/core/src/lib/export-styles.ts b/packages/core/src/lib/export-styles.ts index 1f95f590..44c4964a 100644 --- a/packages/core/src/lib/export-styles.ts +++ b/packages/core/src/lib/export-styles.ts @@ -3,13 +3,6 @@ import * as FigmaExport from '@figma-export/types'; import { getClient } from './figma'; import { fetchStyles, parseStyles } from './figmaStyles'; -type Options = { - token: string; - fileId: string; - outputters?: FigmaExport.StyleOutputter[]; - log?: (msg: string) => void; -} - export const styles = async ({ token, fileId, @@ -18,7 +11,7 @@ export const styles = async ({ // eslint-disable-next-line no-console console.log(msg); }, -}: Options): Promise => { +}: FigmaExport.ExportStylesOptions): Promise => { const client = getClient(token); log('fetching styles'); diff --git a/packages/types/src/commands.ts b/packages/types/src/commands.ts new file mode 100644 index 00000000..8bdbab4b --- /dev/null +++ b/packages/types/src/commands.ts @@ -0,0 +1,27 @@ +import { StringTransformer, ComponentOutputter } from './global'; +import { StyleOutputter } from './styles'; + +type ExportComponents = { + fileId: string; + onlyFromPages?: string[]; + transformers?: StringTransformer[]; + outputters?: ComponentOutputter[]; +} + +type ExportStyles = { + fileId: string; + outputters?: StyleOutputter[]; +} + +type ExportOptions = { + token: string; + log?: (msg: string) => void; +} + +export type ExportComponentsOptions = ExportOptions & ExportComponents + +export type ExportStylesOptions = ExportOptions & ExportStyles + +export type CommandUseConfig = { + commands: (['components', ExportComponents] | ['styles', ExportStyles])[] +} diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts index 30232e86..50bb0ba9 100644 --- a/packages/types/src/index.ts +++ b/packages/types/src/index.ts @@ -1,2 +1,3 @@ export * from './global'; export * from './styles'; +export * from './commands'; From f811d1e72bc11d10d71a9cef7fa4c1b94d88cf2c Mon Sep 17 00:00:00 2001 From: Marco Montalbano Date: Thu, 17 Sep 2020 00:15:38 +0200 Subject: [PATCH 2/4] Rename 'types' related to CLI (#74) --- .figmaexportrc.example.js | 9 +++++ .figmaexportrc.example.ts | 43 ++++++++++++++++++++++ packages/core/src/lib/export-components.ts | 4 +- packages/core/src/lib/export-styles.ts | 4 +- packages/types/src/commands.ts | 22 +++++------ 5 files changed, 67 insertions(+), 15 deletions(-) create mode 100644 .figmaexportrc.example.ts diff --git a/.figmaexportrc.example.js b/.figmaexportrc.example.js index 61a448d8..be81f227 100644 --- a/.figmaexportrc.example.js +++ b/.figmaexportrc.example.js @@ -1,6 +1,15 @@ module.exports = { commands: [ + ['styles', { + fileId: 'RSzpKJcnb6uBRQ3rOfLIyUs5', + outputters: [ + require('@figma-export/output-styles-as-sass')({ + output: './output' + }) + ] + }], + ['components', { fileId: 'RSzpKJcnb6uBRQ3rOfLIyUs5', onlyFromPages: ['icons', 'monochrome'], diff --git a/.figmaexportrc.example.ts b/.figmaexportrc.example.ts new file mode 100644 index 00000000..4ca48b47 --- /dev/null +++ b/.figmaexportrc.example.ts @@ -0,0 +1,43 @@ +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'; + +const styleOptions: StylesCommandOptions = { + fileId: 'RSzpKJcnb6uBRQ3rOfLIyUs5', + outputters: [ + outputStylesAsSass({ + output: './output' + }) + ] +}; + +const componentOptions: ComponentsCommandOptions = { + fileId: 'RSzpKJcnb6uBRQ3rOfLIyUs5', + onlyFromPages: ['icons', 'monochrome'], + transformers: [ + transformSvgWithSvgo({ + plugins: [ + { removeViewBox: false }, + { removeDimensions: true } + ] + }) + ], + outputters: [ + outputComponentsAsSvg({ + output: './output' + }), + outputComponentsAsEs6({ + output: './output' + }) + ] +}; + +(module.exports as FigmaExportRC) = { + commands: [ + ['styles', styleOptions], + ['components', componentOptions] + ] +}; diff --git a/packages/core/src/lib/export-components.ts b/packages/core/src/lib/export-components.ts index 28610c2e..1d9c2fac 100644 --- a/packages/core/src/lib/export-components.ts +++ b/packages/core/src/lib/export-components.ts @@ -3,6 +3,8 @@ import { Document } from 'figma-js'; import { getClient, getPages, enrichPagesWithSvg } from './figma'; +type Options = FigmaExport.BaseCommandOptions & FigmaExport.ComponentsCommandOptions; + export const components = async ({ token, fileId, @@ -13,7 +15,7 @@ export const components = async ({ // eslint-disable-next-line no-console console.log(msg); }, -}: FigmaExport.ExportComponentsOptions): Promise => { +}: Options): Promise => { const client = getClient(token); log('fetching document'); diff --git a/packages/core/src/lib/export-styles.ts b/packages/core/src/lib/export-styles.ts index 44c4964a..786bf85d 100644 --- a/packages/core/src/lib/export-styles.ts +++ b/packages/core/src/lib/export-styles.ts @@ -3,6 +3,8 @@ import * as FigmaExport from '@figma-export/types'; import { getClient } from './figma'; import { fetchStyles, parseStyles } from './figmaStyles'; +type Options = FigmaExport.BaseCommandOptions & FigmaExport.StylesCommandOptions; + export const styles = async ({ token, fileId, @@ -11,7 +13,7 @@ export const styles = async ({ // eslint-disable-next-line no-console console.log(msg); }, -}: FigmaExport.ExportStylesOptions): Promise => { +}: Options): Promise => { const client = getClient(token); log('fetching styles'); diff --git a/packages/types/src/commands.ts b/packages/types/src/commands.ts index 8bdbab4b..4e62506d 100644 --- a/packages/types/src/commands.ts +++ b/packages/types/src/commands.ts @@ -1,27 +1,23 @@ import { StringTransformer, ComponentOutputter } from './global'; import { StyleOutputter } from './styles'; -type ExportComponents = { +export type BaseCommandOptions = { + token: string; + log?: (msg: string) => void; +} + +export type ComponentsCommandOptions = { fileId: string; onlyFromPages?: string[]; transformers?: StringTransformer[]; outputters?: ComponentOutputter[]; } -type ExportStyles = { +export type StylesCommandOptions = { fileId: string; outputters?: StyleOutputter[]; } -type ExportOptions = { - token: string; - log?: (msg: string) => void; -} - -export type ExportComponentsOptions = ExportOptions & ExportComponents - -export type ExportStylesOptions = ExportOptions & ExportStyles - -export type CommandUseConfig = { - commands: (['components', ExportComponents] | ['styles', ExportStyles])[] +export type FigmaExportRC = { + commands: (['styles', StylesCommandOptions] | ['components', ComponentsCommandOptions])[] } From 5737c1728fc3f1ceb7d2e15a8b4ff650860e2086 Mon Sep 17 00:00:00 2001 From: Marco Montalbano Date: Thu, 17 Sep 2020 09:46:39 +0200 Subject: [PATCH 3/4] Update README.md (#74) --- .figmaexportrc.example.ts | 6 ++++++ README.md | 4 +++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/.figmaexportrc.example.ts b/.figmaexportrc.example.ts index 4ca48b47..aff6bb6f 100644 --- a/.figmaexportrc.example.ts +++ b/.figmaexportrc.example.ts @@ -1,3 +1,9 @@ +/** + * 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 + */ + import { FigmaExportRC, StylesCommandOptions, ComponentsCommandOptions } from '@figma-export/types'; import outputStylesAsSass from '@figma-export/output-styles-as-sass'; diff --git a/README.md b/README.md index 8bb1d1a4..ce7bc98b 100644 --- a/README.md +++ b/README.md @@ -231,7 +231,7 @@ If needed you can also provide a different configuration file. #### TypeScript If you prefer, you can create a `.figmaexportrc.ts` and use TypeScript instead. -For doing so, you just need to install a few new dependencies in your project, +For doing so, you just need to install a few new dependencies in your project. ```sh npm install --save-dev typescript ts-node @types/node @figma-export/types @@ -247,6 +247,8 @@ and slightly change your `package.json` } ``` +You can take a look at [.figmaexportrc.example.ts](/.figmaexportrc.example.ts) for more details. + ## :books: More Packages For the list of all official packages or if you want to create your own transformer or outputter you can continue reading [CLI Documentation](/packages/cli#readme). From 96001fa0491f8f4da14c4a56a490338df1153ca4 Mon Sep 17 00:00:00 2001 From: Marco Montalbano Date: Thu, 17 Sep 2020 18:24:54 +0200 Subject: [PATCH 4/4] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ce7bc98b..56e1f6fc 100644 --- a/README.md +++ b/README.md @@ -247,7 +247,7 @@ and slightly change your `package.json` } ``` -You can take a look at [.figmaexportrc.example.ts](/.figmaexportrc.example.ts) for more details. +Take a look at [.figmaexportrc.example.ts](/.figmaexportrc.example.ts) for more details. ## :books: More Packages