Skip to main content

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.selectiont0];


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 = colorPaletteecolorIndex];

// 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 😁


Reply