Support Component Instance

[mathewcst]

Hi, thanks for this great library.

One issue I'm facing is that my designer created a page on Figma with all of our icons as "component instance".

If I console.log the figma.ts getComponents for the node type, it returns as instances:

const getComponents = (children = [], filter = () => true, pathToComponent = []) => {
    let components = [];
    children.forEach((node) => {
        console.log(node.type) // INSTANCE
        if (node.type === 'COMPONENT' && filter(node)) {
            components.push(Object.assign(Object.assign({}, node), {
                svg: '', figmaExport: {
                    id: node.id,
                    dirname: (0, path_1.dirname)(node.name),
                    basename: (0, path_1.basename)(node.name),
                    pathToComponent,
                }
            }));
            return;
        }
        if ('children' in node) {
            components = [
                ...components,
                ...getComponents((node.children), filter, [...pathToComponent, { name: node.name, type: node.type }]),
            ];
        }
    });
    return components;
};

Can we support components instances on the CLI? Or is this a super narrow case and I should fork this repo?

Thanks in advance

[marcomontalbano]

Hi @mathewcst, thanks a lot for your feedback!

I'm not sure if we really need to export instances, I'm reporting below a copy of Figma's article that talks about it:

"A component instance is a copy of the component you can reuse in your designs. Instances are linked to the main component and receive any updates made to the component." - Guide to components in Figma

You should ask your designer for the link to the Figma file that contains these "main components". You should be able to export components from that page.

Let me know if you're able to solve this or if you need more information.

[mathewcst]

That's our problem at the moment, @marcomontalbano . The file that contains that icon components, also has another components like a whole sidebar, some logos, etc.

So the solution that worked for us is to "isolate" the icons, as instances, into another page of the same file.

[marcomontalbano]

Ah ok, clear. Why don't you isolate the main icons into a separate page and then reuse them as instances inside the page with sidebar, logo, etc.? Just to validate all possible other solutions.

[mathewcst]

Unfortunately, in our company today, we don't have that option. I understand that's a lot of "me problem" and it's ok if that's not the intention of this library. I'm just proposing this here 'cause it could be the use case for others.

One suggestion would be having in the figmaexport.config.js file a option besides "component" and "style" to export "instances".

[marcomontalbano]

Hi @mathewcst, I'm planning to add the new includeTypes (default to ['COMPONENT']) property to the .figmaexportrc file.

In your specific case, you'll be able to set that property to includeTypes: ['INSTANCE'].

It will be released in v4.8.0. Hope this can help!

[mathewcst]

This is amazing, thank you so much!