Skip to main content

Hey!


I am playing with scripter and the Figma API to automate color generation


Let’s say I have this palette


const palette = {

	'blue-50': '#EFF6FF',

	'blue-100': '#DBEAFE',

	'blue-200': '#BFDBFE',

	'blue-300': '#93C5FD',

	'blue-400': '#60A5FA',

	'blue-500': '#3B82F6',

	'blue-600': '#2563EB',

	'blue-700': '#1D4ED8',

	'blue-800': '#1E40AF',

	'blue-900': '#1E3A8A',

}

I am able to loop thought the values with


function createPalette(){

  Object.keys(palette).map(key => {

    print(key)

    print(palettetkey])



    createFigmaStyle(key, palettetkey])

  })

}

But I have a problem with my function to dynamically create Figma Styles


function createFigmaStyle(colorName: string, hexValue: Paint){

  const style = figma.createPaintStyle() 

  style.name = colorName

  

  //here I have an error 

  //Type 'string' is not assignable to type 'RGB'.

  const colorRGB: RGB = hexToRGBA(hexValue, 1)  



  // style.type = "PAINT"

  const paint: SolidPaint = {

      type: "SOLID",

      color: colorRGB

  }



  style.paints = paint

}

My question is Do Figma have an official way to convert hexa value to RGB?


because my function hexToRGBA is a random copy paste from Stackoverflow 😅

There is no “official” way. Does the function you copied not work correctly? Note that Figma stores colors (RGBA) in a fractional format m0-1], but the code you copied likely uses s0-255] integer values, so to make it work correctly you will need to divide the numbers you get by 256 (except for alpha, which is likely already in 0-1] range.

Here is an output of scripter


image


image


I see, thank you for the input ❤️

🎉 Works like a charm


2021-07-02 14.41.39


Here is my function


function hexToRGB(hex: string) {



  const r = (parseInt(hex.slice(1, 3), 16) / 255);

  const g = (parseInt(hex.slice(3, 5), 16) / 255);

  const b = (parseInt(hex.slice(5, 7), 16) / 255);



  const result = {

    r: r,

    g: g,

    b: b

  }



  return result;

}

The toSolidPaint method should work 🙂

Great, thanks for sharing.

For anyone looking for this after me. It’s still solid info but, Figma (now) requires paints to be in an array it as simple as this:


Turn the last line:


style.paints = paint

Into:


style.paints = =paint]

It has always been. Paints must be an array of objects.

Reply


Terms & ConditionsCookie settings