Using components from a design library file within a plugin

Plugin and Widget API Questions
1

I’ve seen a bunch of threads just like what I’m about ask so sorry for the repeat question. I’ve tried everything I read in the other threads and I still can’t create instances of the component in a file outside of the design library.

What I’m trying to achieve is based on the selection made it generates a specific component.
The file that I am linking to is a published design library and I have the key and the component set ID

However, I continue to get this error state in the console

unhandled promise rejection: Throw: Failed to import component set by key ""

figma.ui.onmessage = pluginMessage => {

  const designLibraryFileId = 'key';

  const componentSetId = 'ID';

  figma.importComponentSetByKeyAsync(designLibraryFileId).then((componentSet) => {

    const cartComponentSet = componentSet.findOne(node => node.type == "COMPONENT_SET" && node.name == "Cart Milestones") as ComponentSetNode;
    const defaultVariant = cartComponentSet.defaultVariant as ComponentNode;
    const m2Variant = cartComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Property 1=Cart M2") as ComponentNode;
    const m3Variant = cartComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Property 1=Cart M3") as ComponentNode;
    const m4Variant = cartComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Property 1=Cart M4") as ComponentNode;
    const m5Variant = cartComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Property 1=Cart M5") as ComponentNode;
    const m6Variant = cartComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Property 1=Cart M6") as ComponentNode;

    if(pluginMessage.radioState === "cartM1"){
      defaultVariant.createInstance();
    } else if(pluginMessage.radioState === "cartM2"){
      m2Variant.createInstance();
    } else if(pluginMessage.radioState === "cartM3"){
      m3Variant.createInstance();
    } else if(pluginMessage.radioState === "cartM4"){
      m4Variant.createInstance();
    } else if(pluginMessage.radioState === "cartM5"){
      m5Variant.createInstance();
    } else if(pluginMessage.radioState === "cartM6"){
      m6Variant.createInstance();
    }  
    
    figma.closePlugin();
  }

  )}

Any help would be greatly appreciated.

2

You need to import a specific component set, not the whole library file. And it’s done by component set KEY, not ID.

In general plugins don’t have access to file keys — unless it’s a private plugin but in that case the key is not used in the plugin context, it’s used to communicate with the REST API.

Docs: figma | Plugin API

3

Thanks for the reply. This is for a private internal plugin, so does that change what you called out?

Edit: I made the update you called out but I’m now getting a different error state. Sorry if these are basic questions, I’m very new to typescript.

unhandled promise rejection: TypeError: cannot read property 'defaultVariant' of null
4

This is the latest code I am using.

figma.ui.onmessage = pluginMessage => {

  // Define the key of the component set
  const cartMilestonesSet = 'key';

  figma.importComponentSetByKeyAsync(cartMilestonesSet).then((componentSet) => {

    const cartComponentSet = componentSet.findOne(node => node.type == "COMPONENT_SET" && node.name == "Cart Milestones") as ComponentSetNode;
    const m1Variant = cartComponentSet?.defaultVariant as ComponentNode;
    const m2Variant = cartComponentSet?.findOne(node => node.type == "COMPONENT" && node.name == "Property 1=Cart M2") as ComponentNode;
    const m3Variant = cartComponentSet?.findOne(node => node.type == "COMPONENT" && node.name == "Property 1=Cart M3") as ComponentNode;
    const m4Variant = cartComponentSet?.findOne(node => node.type == "COMPONENT" && node.name == "Property 1=Cart M4") as ComponentNode;
    const m5Variant = cartComponentSet?.findOne(node => node.type == "COMPONENT" && node.name == "Property 1=Cart M5") as ComponentNode;
    const m6Variant = cartComponentSet?.findOne(node => node.type == "COMPONENT" && node.name == "Property 1=Cart M6") as ComponentNode;

    if(pluginMessage.radioState === "cartM1"){
      console.log('m1')
      // m1Variant.createInstance();
    } else if(pluginMessage.radioState === "cartM2"){
      console.log('m2')
      // m2Variant.createInstance();
    } else if(pluginMessage.radioState === "cartM3"){
      console.log('m3')
      // m3Variant.createInstance();
    } else if(pluginMessage.radioState === "cartM4"){
      console.log('m4')
      // m4Variant.createInstance();
    } else if(pluginMessage.radioState === "cartM5"){
      console.log('m5')
      // m5Variant.createInstance();
    } else if(pluginMessage.radioState === "cartM6"){
      console.log('m6')
      // m6Variant.createInstance();
    }  
    
    figma.closePlugin();
  }

  )}

All of the console.log messages print correctly so I think all the logic is correct. But when I try to create an instance of any of these I get the error

[symbol] failed to repair styles

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'defaultVariant')
5

@Gleb would you be able to provide any additional help here?

6

Are you trying to grab a component from the library or the whole library?
If you are trying to grab a specific component from a library you can use this code after you get the component key from the console:

in Figma go to your component and select it, go to Plugins >>Development>>Open Console and paste the following code in at the console prompt and it will return your component key:

figma.currentPage.selection[0].key

Copy the key and replace this text - [insert component key here] - in the code below and use that in your plugin.

async function importNode() {
  let importComponent = await figma.importComponentByKeyAsync("[insert component key here]");
  let instance = importComponent.createInstance();
  await figma.currentPage.appendChild(instance);
}

importNode();
7

You are getting an error in this line. You already imported the component (componentSet) and you are trying to search for it inside of itself. So you are getting undefined as a component set doesn’t (and can’t) contain any other component sets. Just delete these lines and rename componentSet (after then) to cartComponentSet.

Be careful with using type assertions like as ComponentSetNode. As you can see it made TypeScript believe everything is fine as you told it you know that you will be getting a component set but that wasn’t the case when running the code.

Also instead of using cardComponentSet.findOne it’s better to use cardComponentSet.children.find(n => n.name === 'Property 1=Cart M2') as this would already give you the correct type (no need for type assertion and checking the type — component set can only contain component nodes). Plus it won’t search the whole tree of the component set contents which is very slow and unnecessary.

No. You still won’t be using the file key in this context and there is no possibility to import the whole library at once — you need to import components and component sets by keys individually if you need any additional ones to the one you are using here.

Note that while the function @Banry_Lincoln_Frisco provided is correct, it only works to import a singular component, not a component set (variant set). Also you don’t need to await the appendChild method result as it’s a synchronous function, plus you don’t need this line in the function at all as createInstance method already places an instance on the current page.

1 Like
8

@Gleb good to know. I am successfully importing a component set but… I just noticed, it is contained within a component. This may be the source of another issue. LOL

9

@Gleb and @Banry_Lincoln_Frisco thank you so much for all of this info.

I added your suggestions and it is now working. Truly appreciate both your help with this problem.

final code

figma.showUI(__html__);

figma.ui.resize(680,200);

figma.ui.onmessage = pluginMessage => {

  // Define the key of the component set
  const cartMilestonesSet = 'key';

  figma.importComponentSetByKeyAsync(cartMilestonesSet).then((cartComponentSet) => {

    const m1Variant = cartComponentSet.defaultVariant as ComponentNode;
    const m2Variant = cartComponentSet.children.find(n => n.name === 'Property 1=Cart M2') as ComponentNode;
    const m3Variant = cartComponentSet.findOne(node => node.type == "COMPONENT" && node.name === "Property 1=Cart M3") as ComponentNode;
    const m4Variant = cartComponentSet.findOne(node => node.type == "COMPONENT" && node.name === "Property 1=Cart M4") as ComponentNode;
    const m5Variant = cartComponentSet.findOne(node => node.type == "COMPONENT" && node.name === "Property 1=Cart M5") as ComponentNode;
    const m6Variant = cartComponentSet.findOne(node => node.type == "COMPONENT" && node.name === "Property 1=Cart M6") as ComponentNode;


    if(pluginMessage.radioState === "cartM1"){
      m1Variant.createInstance();
    } else if(pluginMessage.radioState === "cartM2"){
      m2Variant.createInstance();
    } else if(pluginMessage.radioState === "cartM3"){
      m3Variant.createInstance();
    } else if(pluginMessage.radioState === "cartM4"){
      m4Variant.createInstance();
    } else if(pluginMessage.radioState === "cartM5"){
      m5Variant.createInstance();
    } else if(pluginMessage.radioState === "cartM6"){
      m6Variant.createInstance();
    }  
    
    figma.closePlugin();
  }

  )}
2 Likes