Recently, there is a need in my work, which is to make a color scale legend in figma according to the parameters in the json file.
Since there are many elements, the color scale configuration files of different elements are different. It would take a lot of time to manually copy and paste one color at a time, so I asked chatGPT to help me realize it. But I use GPT-3, and there are always various problems in the generated ones, and it only supports the form of color strings. If the color is changed to hexadecimal or RGB format, it will not recognize it.
So Xiaohu helped me write a script that can recognize the RGB format, which can be used in the Scripter plug-incolorStops of figma, just replace the content of the json file in it when using it .
I can finally free my hands, otherwise, as before, I would have to enter 3 values for each color block in the legend, and my fingers would be useless.
const colorStops = {
"stops": [
{
"stop": "rgb(90, 70, 115)",
"value": -60
},
{
"stop": "rgb(127, 59, 183)",
"value": -24
},
{
"stop": "rgb(22, 101, 172)",
"value": -15
},
{
"stop": "rgb(70, 151, 223)",
"value": -8
},
{
"stop": "rgb(98, 168, 232)",
"value": -4
},
{
"stop": "rgb(140, 212, 210)",
"value": 0
},
{
"stop": "rgb(60, 153, 90)",
"value": 4
},
{
"stop": "rgb(234, 228, 124)",
"value": 8
},
{
"stop": "rgb(234, 192, 73)",
"value": 16
},
{
"stop": "rgb(217, 137, 81)",
"value": 26
},
{
"stop": "rgb(204, 88, 48)",
"value": 32
},
{
"stop": "rgb(140, 44, 11)",
"value": 40
},
{
"stop": "rgb(51, 0, 0)",
"value": 60
}
],
"fieldName": "O"
}
// Create a frame for each color stop
colorStops.stops.forEach((stop, index) => {
const frame = createFrame();
// Set the frame size
frame.resize(80, 16);
// Set the frame background color
const [r, g, b] = stop.stop.match(/\d+/g).map(Number);
const color = {
r: r / 255, g: g / 255, b: b / 255 };
frame.fills = [{
type: 'SOLID', color: color }];
// Position the frame
frame.x = 0;
frame.y = index * 16;
// Add a text node with the color value
const textNode = createText();
textNode.characters = `${
stop.value}`;
textNode.x = 8;
textNode.y = 0;
// Add the text node to the frame
frame.appendChild(textNode);
// Add the frame to the Figma page
figma.currentPage.appendChild(frame);
The generated effect is as follows:
Manually adjust the style, plus autolayout, it can be used as a reusable color component.
