Figma Support Forum

How to update single component attribute or variant via plugin?

Hello, I’m new to Figma and also plugin development.
I’m trying to create a plugin that can change the value of an attribute (or variant?) in the selected component.

For example, I’m trying to use the plugin to toggle an attribute called Dark mode. When I’m toggling it manually, like using the mouse pointer, I can do it with correct behavior:

But when I looked into the mainComponent object, I only see mainComponent.name has any reference to this Dark mode string (i.e Dark mode=true), and if I were to modify the mainComponent.name to something like Dark mode=false, it change the name reference from Text Button to a long string, which is not the behavior I was looking for:

How can I make the plugin to only update the Dark mode attribute while preserving all other attributes and keeping the name as Text Button?

Thanks in advance.

Each variant is a simple regular component. You can use the new swapComponent method to swap between them. For example:

let instance = figma.currentPage.selection[0]
let variantSet = instance.mainComponent.parent // if not local, you need to import it
instance.swapComponent(variantSet.findChild(
    n => n.name.match(/* some pattern to match correct parameters */)
))

Docs:

1 Like

That works, thank you so much!