const iframe = document.getElementById("figma-embed-iframe");
const variant1Button = document.getElementById("btn-variant-1");
const variant2Button = document.getElementById("btn-variant-2");
const variantDefaultButton = document.getElementById("btn-variant-default");
const instanceNodeId = "1:10";
const variant1Id = "1:8";
const variant2Id = "1:14";
const variantDefaultId = "1:6";
function changeComponentInstanceToVariant(newVariantId) {
iframe.contentWindow.postMessage(
{
type: "CHANGE_COMPONENT_STATE",
data: {
nodeId: instanceNodeId,
newVariantId: newVariantId,
},
},
"https://www.figma.com"
);
}
variant1Button.addEventListener("click", () => {
changeComponentInstanceToVariant(variant1Id);
});
variant2Button.addEventListener("click", () => {
changeComponentInstanceToVariant(variant2Id);
});
variantDefaultButton.addEventListener("click", () => {
changeComponentInstanceToVariant(variantDefaultId);
});