Automatic Change Text Color When Using CSV Populate

Hi,
I’m makeing some text designs and giving each letter a different color (5 different colors and then going back to first color and repeating). Now when I use the Plugin “CSV Populate” (https://www.figma.com/community/plugin/875365065394448755) or “Find and Replace” It does change the text, but the color is no longer 5 different colors but instead the color the of the first letter.

I’ve tryed the “copy properties” but that only copies the text style not the colors.

Is there any way I can apply the colors automatic instead of changing each letter manually again?

Hi there,

Thanks for the post! To confirm what you’d like to achieve, would you like to do kind of this?

Hope to explore a possible solution together!

Thanks,
Toku

Hi Toku,

Yes that is excatly what I’m looking to do.
I do however also want it to color symbols with the exception of spaces if thats possible (.,^'^#_-! and so on).

Sincerely
Christian

Hi Toku,

Yes that is excatly what I’m looking to do.
I do however also want it to color symbols with the exception of spaces if thats possible (.,^'^#_-! and so on).

Sincerely
Christian

Thanks! Though I asked you to clarify, I’m not sure how to achieve it yet. Probably, making an own plugin would be the solution since this is not achievable with the built-in feature, I think. I really hope somebody from community will find the solution!

I have never tryed to code nor make my own plugin. I tryed asking ChatGPT which came with a code for it. But how do I even make that?

Javascript:

// This is the entry point for the Figma plugin
Figma.showUI(html);

// When the plugin is run, this code will execute
Figma.ui.onmessage = (msg) => {
if (msg.type === ‘applyColors’) {
// Get the selected text node
const textNode = Figma.currentPage.selection[0];

if (textNode && textNode.type === 'TEXT') {
  const characters = textNode.characters.split('');

  // Get user-defined color palette
  const colorPalette = msg.colors;

  // Apply colors to each character
  characters.forEach((char, index) => {
    if (char !== ' ') {
      const colorIndex = index % colorPalette.length;
      const color = colorPalette[colorIndex];

      // Set character color
      textNode.setRangeFills(index, index + 1, [{ type: 'SOLID', color }]);
    }
  });

  // Close the plugin
  figma.closePlugin();
} else {
  figma.closePlugin();
}

}
};

Html:

Colorize Text Plugin body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } input { margin-bottom: 10px; } Number of Colors:

Color 1:

Color 2:

Color 3:

Color 4:

Color 5:

Apply Colors

Thanks for replies! Here is a plugin development guide - https://help.figma.com/hc/en-us/articles/360042786733-Create-a-plugin-for-development.

It might take time to learn coding, but I think it’s a great idea to use AI to make a plugin!

I hope these help.

Thanks,
Toku

Thanks alot, I’ll try looking into this :grin:

1 Like