@figma-export/output-components-as-es6

@figma-export/output-components-as-es6

Outputter for @figma-export that exports components in javascript file.

With this outputter you can export all components as variables inside a .js file called with the page name.

This is a sample of the output:

$ tree output/
# output/
# ├── icons.js
# └── monochrome.js

For each file you will have a list of export.

// icons.js
export const figmaExport = `<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"> ... </svg>`;
export const figmaLogo = `<svg width="40" height="60" viewBox="0 0 40 60" fill="none" xmlns="http://www.w3.org/2000/svg"> ... </svg>`;

Tip: A component named icon/eye will be exported as variable named iconEye.

.figmaexportrc.js

You can easily add this outputter to your .figmaexportrc.js:

module.exports = {
    commands: [
        ['components', {
            fileId: 'RSzpKJcnb6uBRQ3rOfLIyUs5',
            onlyFromPages: ['icons', 'monochrome', 'unit-test'],
            outputters: [
                require('@figma-export/output-components-as-es6')({
                    output: './output'
                })
            ]
        }],
    ]
}

output is mandatory.

getVariableName, useBase64 and useDataUrl are optional.

const { camelCase } = require('@figma-export/output-components-utils');

...

require('@figma-export/output-components-as-es6')({
    output: './output',
    getVariableName: (options) => camelCase(options.componentName.trim()),
    useBase64: false,
    useDataUrl: false,
})

defaults may change, please refer to ./src/index.ts

Install

Using npm:

npm install --save-dev @figma-export/output-components-as-es6

or using yarn:

yarn add @figma-export/output-components-as-es6 --dev

Options

This task can be configured providing some options:

• output is the path to the output folder.
• variablePrefix and variableSuffix enable you to prepend or append a text to the variable name. This is necessary when your component name is a reserved word (e.g. const, package, ...).
• useBase64 (boolean) will export each components using Base 64 encoding.

// icons.js
export const figmaExport = `PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gLi4uIDwvc3ZnPg==`;

• useDataUrl (boolean) will export each components using Data URL format.

// icons.js
export const figmaExport = `data:image/svg+xml,%3csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3e ... %3c/svg%3e`;