Skip to main content
Question

How to update Component Properties?

  • January 24, 2024
  • 4 replies
  • 1063 views

stfn_07

Hi,

I’m just starting with Figma plugins and struggling with reading and editing Component Properties. In a very simple case, I’d like to change all property names and values to lowercase.

I don’t understand how to use editComponentProperty and can’t make sense of the documentation.

Here’s the code that I have so far:

function start() {
  const doc = figma.currentPage;
  const components =  doc.children;

  for (const component of components) {
    
    if (component.type === 'COMPONENT' || component.type === 'COMPONENT_SET') {
      const componentPropertyDefinitions = component.componentPropertyDefinitions;

      for (let propertyName in componentPropertyDefinitions) {
        const propertyDefinition = componentPropertyDefinitions[propertyName];
        propertyName = propertyName.toLowerCase();
        component.editComponentProperty(propertyName, propertyDefinition);
      }
    } 
  }
}

Thanks a lot for your help

This topic has been closed for replies.

4 replies

y_toku
Figmate
  • Community Support
  • 2545 replies
  • January 25, 2024

Hi there,

Thanks for reaching out. I am checking with our internal team. I’ll get back to you as soon as I have any information or updates that I can share.

Thanks for your patience!

Toku


tank666
  • 4873 replies
  • January 25, 2024

The first argument must be the current property name (unmodified). The second argument must be an object containing the new data. For example:

{
    name: 'New property name',
    defaultValue: 'New property value'
}

It is in this object that the values ​​need to be changed.

To change variant properties and values:


stfn_07
  • Author
  • 4 replies
  • January 26, 2024

Thank you for your reply.

First argument acts as an identifier, that makes perfect sense. Second one are the updates, clear.

But why does this still throw an exception? Nothing’s changed but I still can’t write it back. (propertyName look correct to me (e.g. ‘Show Label#2:9’)

component.editComponentProperty(propertyName, propertyDefinition);
const propertyDefinition = componentPropertyDefinitions[propertyName];

Sorry for being so stupid…


tank666
  • 4873 replies
  • January 26, 2024

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