Return categorized components

[riboher]

Hi there!

First of all thanks for this great library. I've been using it extensively for the last months and it has eased the process of exporting tokens of our Figma files.

One thing that I would like to do in the future is exporting each of my tokens categorized by their parent token name to avoid possible collisions in naming. That doesn't necessarily mean that the components should be returned grouped by this property during the getComponents function, but maybe have an extra property with that name so we can group them later.

I'm guessing this operations should be done when iterating through each of the children of the page. The type of the component could be checked so if it's FRAME, that said property could be added so we know at all times that reference in its children components. Does that make sense to you?

children.forEach((component) => {
        if (component.type === 'COMPONENT' && filter(component)) {
            components.push({
                ...component,
                svg: '',
                figmaExport: {
                    id: component.id,
                    dirname: dirname(component.name),
                    basename: basename(component.name),
                },
            });
            return;
        }

        if ('children' in component) {
            components = [
                ...components,
                ...getComponents((component.children), filter),
            ];
        }
    });

Sorry in advanced if I'm not explaining myself in great detail, I'd be glad to provide more insights to this if you find this feedback useful and are open to implement it (I'm glad to provide the changes myself in a PR if that suits you).

Thank you!

[marcomontalbano]

Hi @riboher, thanks a lot for your feedback, this idea looks interesting!
Could you share a Figma file containing your actual structure (not the real one you are using in your project, but a similar one) and your expected result so that I can better understand your needs? In this way, I'll also have a file to run some tests.
Thanks in advance!

[alejandrofdiaz]

Hi there!

I see figma exports use files API to obtain the information about components (here https://github.com/marcomontalbano/figma-export/blob/master/packages/core/src/lib/export-components.ts#L23), is there a reason why don't use components API instead?

It contains super useful information about ancestors already called containing_frame documented here.

It tells what is the name of the page containing the component plus the frame name, which allows you to use this information to place your component using a similar hierarchy in your FS after exporting the tokens.

[marcomontalbano]

Hi @alejandrofdiaz, I started working on this project even before the components API was available. At that moment I had to rely on files API.
But yours is a good suggestion. I would like to start working on a major release and this one could be one of the changes.

[alejandrofdiaz]

This was my first guess actually 😂 I remember 2 years ago trying to obtain files from Figma, looked at the API, and decided to rely on figma-export instead because the documentation was not so clear.

The only problem I see here is that replacing Files API with Components API will introduce a lot of breaking changes because Component return type is not equal to the Node return type, so maybe a mild solution can be adopted. Maybe exposing a different function to obtain components via Component API can live altogether with obtaining components via Files API.

I see figma-js already expose a function to obtain File Components, so it should be easy.

[marcomontalbano]

Hi @alejandrofdiaz and @riboher, first of all, thanks for your contribution. I just released v4.6.0 which contains this feature.

This feature adds an option called pathToComponent that contains an array of paths to reach the component.

Before today was only possible to organize components into folders based on the page name and the component name. Today is also possible to create folders based on the path to the component.

For example, when you're exporting the component paintcan from the octicons library,

the option pathToComponent will contain:

[
  { name: 'Logos', type: 'GROUP' },
  { name: 'Logos', type: 'FRAME' }
]

Given this, you can setup a folder structure like the following:

outputComponentsAsSvg({
    output: './output/components/svg',
    getDirname: (options) => {
        const pathToComponent = options.pathToComponent.map(p => p.name).join(path.sep)
        return `${options.pageName}${path.sep}${options.dirname}${path.sep}${pathToComponent}`
    },
})

[alejandrofdiaz]

Thank you so much for your support, this is key for our Design System to evolve and enhance synchronicity between Design and Technology team 💜