Skip to main content
Solved

How to update single component attribute or variant via plugin?

Su_Khai_Koh

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:

Untitled drawing.jpg

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:

Untitled drawing (1).jpg

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.

Best answer by Gleb

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:

View original
This topic has been closed for replies.

2 replies

Gleb
  • Gleb
  • Power Member
  • 4709 replies
  • Answer
  • June 6, 2021

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:

Su_Khai_Koh
Lea_Delazer1
Lukas.B
4 people like this
  • Su_Khai_Koh
    Su_Khai_Koh
  • Lea_Delazer1
    Lea_Delazer1
  • Lukas.B
    Lukas.B
  • Eric_Helier
    Eric_Helier
Su_Khai_Koh

That works, thank you so much!

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings