Recentemente, surgiu uma necessidade em meu trabalho, que é fazer uma legenda de escala de cores no figma de acordo com os parâmetros do arquivo json.
Como existem muitos elementos, os arquivos de configuração da escala de cores de diferentes elementos são diferentes. Levaria muito tempo para copiar e colar manualmente uma cor de cada vez, então pedi ao chatGPT para me ajudar a realizá-lo. Mas eu uso o GPT-3, e sempre tem vários problemas nos gerados, e ele só suporta a forma de strings de cores.Se a cor for alterada para o formato hexadecimal ou RGB, ele não vai reconhecer.
Então Xiaohu me ajudou a escrever um script que pode reconhecer o formato RGB, que pode ser usado no plug-in ScriptercolorStops do figma, e apenas substituir o conteúdo do arquivo json nele ao usá-lo .
Posso finalmente liberar minhas mãos, caso contrário, como antes, teria que inserir 3 valores para cada bloco de cor na legenda e meus dedos seriam inúteis.
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);
O efeito gerado é o seguinte:
Ajuste manualmente o estilo, além do layout automático, ele pode ser usado como um componente de cor reutilizável.
