How to get variant component key?

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:

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.

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?

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

2 Likes

Amazing, you rock!

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

1 Like