Skip to main content
Question

Applying a colour variable to a Rectangle with Figma API?


Mark Ockenden
  const allVariables = await figma.variables.getLocalVariablesAsync("COLOR");
  const mainVar = allVariables.find(v => v.name === "Some/Random/color");
  if (!mainVar) {
    console.error("Color variable 'main' not found.");
    return;
  } else {
    console.error("Color found -> ", mainVar);
  } 

 const circle = figma.createRectangle();
  circle.resize(64, 64);
  circle.cornerRadius = 50;
  circle.name = "Color Circle";
  circle.x = component.width - circle.width - 10;
  circle.y = (component.height - circle.height) / 2;
  circle.fills = []; 

Hi all!

I’m struggling to apply a variable from my list to the Rectangle I created with the pluginAPI. All solutions that I come across tend to pull the value of the variable out and apply it to the circle/rectangle. However, I lose the relationship with the list of variables that appear in my fill area/widget. Surely I should be able to apply the ‘key’ of the variable and figma will take the value an apply it to my circle/rectangle automagically? I’ve been stuck on this for a while now and it’s quite frustrating to find anything that points me in the right direction. 

 

Thanks!

 

Mark

0 replies

Be the first to reply!

Reply


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