Skip to main content

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();

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();

figma.com

Reply


Terms & ConditionsCookie settings