Expose the component ID in the ComponentExtras

Currently the function getBasename in the output-components-as-svg module uses only the basename value to generate the file name in output:

https://github.com/marcomontalbano/figma-export/blob/9ac8278779265299e6101ce83717a9ee3b8b75a6/packages/output-components-as-svg/src/index.ts#L16

But if the icons are variants, there may be cases in which two different variants have the same name (because of how Figma assigns the name to the variants). For example, we have a set of icons as component sets, where each one of them has two sizes, (each one is a component, with two variants, and a property with two values sm and md assigned to each one of them).

When we export the icons, even if the icons’ (parent) component set have different names, the variants all have name Size=sm or Size=md so each icon exported overrides the previous one, and we end up with only two files (one called Size=sm.svg` and the other Size=md.svg`.

What I propose here is to expose also the ID of the component (which we know is unique) so that a consumer of the library can create their own unique basename and use the getBasename function (passed to the outputComponentsAsSvg outputter) to override the default behaviour, eg.

getBasename: (options): string => `${options.id}__${options.basename}.svg`

The way in which we can expose it is to add an id key to ComponentExtras type, and then in the getComponents method add the id value to the figmaExport object.

I’ll submit a PR for this small change.

[amcolash]

Sure thing, makes sense. I did take that route and it is working beautifully - I do love the figma API! Thanks again for the module and appreciate your suggestions.

[didoo]

Personally I don’t think we should add too much to the object, apart from the ID. And this is my thinking: with the ID, essentially you can do whatever you want, using the REST APIs. So there’re no need to introduce other meta-data (everyone may have a different need, and in no time the metadata object would become uber-complex).

My suggestion (and that’s what I did on my side) is to use the REST APIs to build an object with all the metadata you need, and then when exporting the assets via Figma-Export use the specific metadata for that component ID for whatever is your need. You can see what I did here: https://github.com/hashicorp/flight/blob/85ea7fc6f22ae675a6d4d54b71adef8454c27135/flight-icons/scripts/sync.ts#L47-L53