Merge pull request #161 from marcomontalbano/export-ids-directly

Add support to exporting components and styles by node IDs
marcomontalbano · Feb 12, 2024 · 4c10a8c · 4c10a8c
2 parents b323aba + 8da55e2
commit 4c10a8c
Show file tree

Hide file tree

Showing 17 changed files with 46,624 additions and 35,571 deletions.
diff --git a/.figmaexportrc.example.js b/.figmaexportrc.example.js
@@ -4,7 +4,7 @@ module.exports = {
         ['styles', {
             fileId: 'fzYhvQpqwhZDUImRz431Qo',
             // version: 'xxx123456', // optional - file's version history is only supported on paid Figma plans
-            // onlyFromPages: ['icons'], // optional - Figma page names (all pages when not specified)
+            // onlyFromPages: ['icons'], // optional - Figma page names or IDs (all pages when not specified)
             outputters: [
                 require('@figma-export/output-styles-as-sass')({
                     output: './output'

diff --git a/.figmaexportrc.example.local.ts b/.figmaexportrc.example.local.ts
@@ -20,7 +20,7 @@ import outputComponentsAsSvgstore from './packages/output-components-as-svgstore
 
 const styleOptions: StylesCommandOptions = {
     fileId: 'fzYhvQpqwhZDUImRz431Qo',
-    // onlyFromPages: ['icons'], // optional - Figma page names (all pages when not specified)
+    // onlyFromPages: ['icons'], // optional - Figma page names or IDs (all pages when not specified)
     outputters: [
         outputStylesAsCss({
             output: './output/styles/css'

diff --git a/.figmaexportrc.example.ts b/.figmaexportrc.example.ts
@@ -14,7 +14,8 @@ import outputComponentsAsEs6 from '@figma-export/output-components-as-es6';
 const styleOptions: StylesCommandOptions = {
     fileId: 'fzYhvQpqwhZDUImRz431Qo',
     // version: 'xxx123456', // optional - file's version history is only supported on paid Figma plans
-    // onlyFromPages: ['icons'], // optional - Figma page names (all pages when not specified)
+    // 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'
@@ -25,6 +26,7 @@ const styleOptions: StylesCommandOptions = {
 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({

diff --git a/README.md b/README.md
@@ -176,7 +176,8 @@ module.exports = {
         ['styles', {
             fileId: 'fzYhvQpqwhZDUImRz431Qo',
             // version: 'xxx123456', // optional - file's version history is only supported on paid Figma plans
-            // onlyFromPages: ['icons'], // optional - Figma page names (all pages when not specified)
+            // 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: [
                 require('@figma-export/output-styles-as-sass')({
                     output: './output/styles'
@@ -187,6 +188,7 @@ module.exports = {
         ['components', {
             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'],
             // filterComponent: (component) => !/^figma/.test(component.name), // optional
             transformers: [

diff --git a/packages/cli/src/commands/components.ts b/packages/cli/src/commands/components.ts
@@ -14,12 +14,14 @@ export const addComponents = (prog: Sade, spinner: Ora) => prog
     .option('-c, --concurrency', 'Concurrency when fetching', 30)
     .option('-r, --retries', 'Maximum number of retries when fetching fails', 3)
     .option('-o, --output', 'Output directory', 'output')
-    .option('-p, --page', 'Figma page names (all pages when not specified)')
+    .option('-i, --ids', 'Export only these node IDs (`--page` is always ignored when set)')
+    .option('-p, --page', 'Figma page names or IDs (all pages when not specified)')
     .option('-t, --types', 'Node types to be exported (COMPONENT or INSTANCE)', 'COMPONENT')
     .option('--fileVersion', `A specific version ID to get. Omitting this will get the current version of the file.
                          https://help.figma.com/hc/en-us/articles/360038006754-View-a-file-s-version-history`)
     .example('components fzYhvQpqwhZDUImRz431Qo -O @figma-export/output-components-as-svg')
     .example('components fzYhvQpqwhZDUImRz431Qo -O @figma-export/output-components-as-svg -t COMPONENT -t INSTANCE -o dist')
+    .example('components fzYhvQpqwhZDUImRz431Qo -O @figma-export/output-components-as-svg -o dist -i 54:22 -i 138:52')
     .action(
         (fileId, {
             fileVersion,
@@ -32,6 +34,7 @@ export const addComponents = (prog: Sade, spinner: Ora) => prog
 
             const outputter = asArray<string>(opts.outputter);
             const transformer = asArray<string>(opts.transformer);
+            const ids = asArray<string>(opts.ids);
             const page = asArray<string>(opts.page);
             const types = asUndefinableArray<string>(opts.types) as IncludeTypes;
 
@@ -45,6 +48,7 @@ export const addComponents = (prog: Sade, spinner: Ora) => prog
                 concurrency,
                 retries,
                 token: process.env.FIGMA_TOKEN || '',
+                ids,
                 onlyFromPages: page,
                 includeTypes: types,
                 transformers: requirePackages<FigmaExport.StringTransformer>(transformer),

diff --git a/packages/cli/src/commands/styles.ts b/packages/cli/src/commands/styles.ts
@@ -11,7 +11,8 @@ export const addStyles = (prog: Sade, spinner: Ora) => prog
     .describe('Export styles from a Figma file.')
     .option('-O, --outputter', 'Outputter module or path')
     .option('-o, --output', 'Output directory', 'output')
-    .option('-p, --page', 'Figma page names (all pages when not specified)')
+    .option('-i, --ids', 'Figma node IDs (`--page` is always ignored when set)')
+    .option('-p, --page', 'Figma page names or IDs (all pages when not specified)')
     .option('--fileVersion', `A specific version ID to get. Omitting this will get the current version of the file.
                          https://help.figma.com/hc/en-us/articles/360038006754-View-a-file-s-version-history`)
     .example('styles fzYhvQpqwhZDUImRz431Qo -O @figma-export/output-styles-as-css')
@@ -22,6 +23,7 @@ export const addStyles = (prog: Sade, spinner: Ora) => prog
             ...opts
         }) => {
             const outputter = asArray<string>(opts.outputter);
+            const ids = asArray<string>(opts.ids);
             const page = asArray<string>(opts.page);
 
             spinner.info(`Exporting ${fileId} as [${outputter.join(', ')}]`);
@@ -32,6 +34,7 @@ export const addStyles = (prog: Sade, spinner: Ora) => prog
                 fileId,
                 version: fileVersion,
                 token: process.env.FIGMA_TOKEN || '',
+                ids,
                 onlyFromPages: page,
                 outputters: requirePackages<FigmaExport.StyleOutputter>(outputter, { output }),
 

diff --git a/packages/core/src/integration.test.ts b/packages/core/src/integration.test.ts
@@ -8,7 +8,7 @@ describe('@figma-export/core', () => {
         const pageNodes = await exportComponents({
             fileId: 'fzYhvQpqwhZDUImRz431Qo',
             token: process.env.FIGMA_TOKEN ?? '',
-            onlyFromPages: ['unit-test'],
+            onlyFromPages: ['138:28'],
             // eslint-disable-next-line @typescript-eslint/no-empty-function
             log: () => {},
         });