How to get variant component key?

Plugin and Widget API Questions
1

Hello,

I have a noob question, I could access to components by their Key, but I couldn’t find a way to do that for variants, If anyone know how to do it?

That’s what i use for importing component to a page:

function current(componentKey) {
return __awaiter(this, void 0, void 0, function* () {
let page = figma.root.findChild((n) => n.name === " Current situation");
let component = yield figma.importComponentByIDAsync(componentKey);
page.appendChild(component.createInstance());
});
}

function setTemplate() {
return __awaiter(this, void 0, void 0, function* () {
setPages();
yield current(“a65cc984884ca221229bfb2686bb69770cdc4edf”);
});
}

I would like to do the same by importing variants instead of just component.

Thanks in advance for any help :pray:

3

A Variant is a Component in a Component Set. Each Variant in the Component Set, like a separate Component, has its own key. Just enter the key of the Variant you need.

4

I could find component keys but I couldn’t find variant one
I probably use the wrong method

I use the inspector plugin from discord to find component keys like that :point_down:
https://drive.google.com/file/d/1WkBRFUsE3OLiYFzSEGmA_YS16VQJ-6mr/view?usp=sharing

But when I inspect variants I have no information on them :point_down:
https://drive.google.com/file/d/1byyvXzPStWf6RXQ0bexnBnwiiO4bMSep/view?usp=sharing
https://drive.google.com/file/d/1IFGKH-zlLRTCYH0cFQgZk2NAPrJbBeEt/view?usp=sharing

Do you know how to get keys?

5

Select the Variant in the Component Set, open the console in Figma, enter figma.currentPage.selection[0].key.

2 Likes
6

Amazing, you rock!

Thanks a lot, i discover another world with the console :star_struck:

1 Like
7

Hi, unfortunately this doesn’t work anymore. Did it change and is there a new way to get the key?
It shows: “VM178:1 Uncaught ReferenceError: figma is not defined”

Many thanks!

8

Please submit a bug report to support.
I noticed that this happens after you reload the file tab. To fix this, you need to run any plugin, and then you can use the Plugin API using the console.

As an alternative to the console, you can use plugins like Scripter.

You can also try to find plugins in the Figma Community that can show information about selected objects on the canvas.

1 Like