Asset name on transformer arguments

[evandroguedes-belvo]

I am working on a custom transformer to transform components SVGs based on the asset name on Figma. Example:

• icon/mono > remove fills
• icon/color > do nothing …

Is there any way to get the asset name on transformers?

[marcomontalbano]

Hi @evandroguedes-belvo, unfortunately this is not possible. Transformers implement StringTransformer

type StringTransformer = (str: string) => Promise<string | undefined>

A transformer receives a string and returns another string.

This could be an interesting improvement for the future.

[evandroguedes-belvo]

Hi @evandroguedes-belvo, unfortunately this is not possible. Transformers implement StringTransformer

type StringTransformer = (str: string) => Promise<string | undefined>

A transformer receives a string and returns another string.

This could be an interesting improvement for the future.

Hi @marcomontalbano

Got it. Thanks for having that into consideration. Do you have any tips for that implementation? I can help.

[marcomontalbano]

I'm looking into it.

Transformers are applied here L130: https://github.com/marcomontalbano/figma-export/blob/e3321288eb569007f1719677c0e080ba073287d5/packages/core/src/lib/figma.ts#L111-L143

Inside here I don't have information about component, I have only a list of ids. We should change this.

[marcomontalbano]

Hi @evandroguedes-belvo, I've a suggestion for you. Instead of naming your assets with icon/mono/... or icon/color/..., you could have these as pages and then related icons inside these two pages.

In this way you can have two different configurations:

// .figmaexportrc.js
module.exports = {
  commands: [

    ['components', {
      fileId: 'xxx',
      onlyFromPages: ['icon/mono'],
      transformers: [
        require('@figma-export/transform-svg-with-svgo')({
          plugins: [
            {
              name: 'removeAttrs',
              params: {
                attrs: '(fill|stroke)'
              }
            }
          ]
        })
      ],
      outputters: [
        require('@figma-export/output-components-as-svg')({
          output: './output'
        })
      ]
    }],

    ['components', {
      fileId: 'xxx',
      onlyFromPages: ['icon/color'],
      outputters: [
        require('@figma-export/output-components-as-svg')({
          output: './output'
        })
      ]
    }]

  ]
}

Let me know

[evandroguedes-belvo]

Hey, @marcomontalbano thank you so much for your suggestion and your time on this. Yeah, I asked the design team about that. It is not as easy as it seems but they are doing it. :)

[marcomontalbano]

That's great! For the moment I stop this development since I prefer current interface string => string, but I'll open a discussion about it and let's see the feedback from the community.

[evandroguedes-belvo]

Super nice. You rock, many thanks!