How to update Component Properties?

Plugin and Widget API
1

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

2

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

3

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:

1 Like
4

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…

5

Your problem is with the second argument, not the first. You are trying to access a constant that has not yet been declared.

Also, the object returned by componentPropertyDefinitions has properties that the editComponentProperty method does not support.

Please see the developer documentation: