How to set position of imported components?

Plugin and Widget API Questions
1

Hi!
First of all, this is my first time trying to develop a Figma plugin, and I’m making a scaffold plugin for my team.

The idea behind it is to create default pages for the files with the default components all the pages should have.
So I managed to create the pages and import the components through the importComponentByKeyAsync function.

The problem here is that I have a page with 3 imported components and all of them appear at the same place in my page.
I’ve tried a lot of things, but couldn’t manage to find a way to define where I want them to appear, or to move them after being imported.

Is it possible to do this?

–

Just to give more information, here’s a part of the code I’m using to import the components in the pages I need:

async function importNode() {
let importHeader = await figma.importComponentByKeyAsync("KEY");
Page01.appendChild(importHeader.createInstance());
figma.closePlugin();
}

importNode();
2

By default, the node is placed at X = 0, Y = 0 coordinates. Therefore, you need to change the X, Y coordinates.

Example:

async function importNode() {
	let importComponent = await figma.importComponentByKeyAsync(key),
		instance = importComponent.createInstance(),
		page = figma.root.children[1];

	page.appendChild(instance);

	if (page.children.length > 1) {
		let lastChild = page.children.length - 2;
		instance.x = page.children[lastChild].x + page.children[lastChild].width + 40;
	}
}
importNode();
1 Like