Skip to main content
Solved

How to copy component instance to current page from another page with main component


Branislav_Toman

Hi, I am in a trouble of locating component on a different page than I am currently interacting with plugin.
In a documentation I found a way to select component on a current page with figma.currentPage.selection(), but I need to select component from page UI Kit.

image

Also, I managed to select only whole main component:

image

But I need to select only one variant from there.

Best answer by tank666

You just need to specify which variant you want to create an instance for. For example: buttonsComponent.defaultVariant.createInstance();

I described the logic here:

And I would write this code like this:

let page = figma.root.findChild(node => node.name === 'UI Kit'),
	allComponentSets = page.findAllWithCriteria({types: ['COMPONENT_SET']}),
	componentSet = allComponentSets.find(node => node.name === 'Buttons');
componentSet.defaultVariant.createInstance();
View original

12 replies

tank666
  • 4858 replies
  • September 30, 2022

Find the required PageNode using figma.root, find the desired ComponentSetNode using, for example, findAllWithCriteria, get the id of one of the children and create an instance (figma.getNodeById(id).createInstance()) or get the defaultVariant and create an instance.


Branislav_Toman

Is there any way on finding required PageNode by its name and not id?


tank666
  • 4858 replies
  • October 3, 2022

Yes, of course, just add a condition.
For example:

let page = figma.root.findChild(node => node.name === 'Your page name');

Branislav_Toman

Thanks, that is exactly what I need, but how can work with that variable?
For example finding ComponentSetNode by name outputs me error, that says “Object is possibly null” and won’t let me compile.
image


tank666
  • 4858 replies
  • October 3, 2022

Could you show the code?


Branislav_Toman

I managed to locate ComponentSet on desired Page, but not sure how to work with that variable now and create instance:

const componentPage = figma.root.findChild(PageNode => PageNode.name === 'UI Kit')
      const buttonsComponent = componentPage?.findChild(ComponentSetNode => ComponentSetNode.name === 'Buttons')
      
      buttonsComponent.createInstance()

When I log output of buttonsComponent into console, I get:

image


tank666
  • 4858 replies
  • Answer
  • October 3, 2022

You just need to specify which variant you want to create an instance for. For example: buttonsComponent.defaultVariant.createInstance();

I described the logic here:

And I would write this code like this:

let page = figma.root.findChild(node => node.name === 'UI Kit'),
	allComponentSets = page.findAllWithCriteria({types: ['COMPONENT_SET']}),
	componentSet = allComponentSets.find(node => node.name === 'Buttons');
componentSet.defaultVariant.createInstance();

Branislav_Toman

Thank you very much 🙂 When I try to use your code it won’t let me compile it, until I add question mark behind every variable, because I am getting this error: Object is possibly ‘undefined’.

Is there any other way around it, than this?

let page = figma.root.findChild(node => node.name === 'UI Kit'),
        
    allComponentSets = page?.findAllWithCriteria({types: ['COMPONENT_SET']}),
    componentSet = allComponentSets?.find(node => node.name === 'Buttons')
      
componentSet?.defaultVariant.createInstance()

tank666
  • 4858 replies
  • October 3, 2022

Branislav_Toman

@tank666 one more question:

When I successfully create instance and would like to move it under parent frame like this mainFrame.appendChild(actionButton) I get error:

image

I can’t find anything in documentation about “undefined” InstanceNode.

This is the declaration of actionButton:
let actionButton = locateComponent("Buttons")?.defaultVariant.createInstance()


tank666
  • 4858 replies
  • October 3, 2022

I don’t use Typescript in my work, but you can try this:

let actionButton = (locateComponent("Buttons") as ComponentSetNode).defaultVariant.createInstance()

Or:

mainFrame.appendChild(actionButton as InstanceNode)

Branislav_Toman

Both solutions work like a charm, thank you.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings