Dynamically create palette with createPaintStyle - locked on hexToRGBA() JavaScipt function

Plugin and Widget API Questions
1

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(palette[key])

    createFigmaStyle(key, palette[key])
  })
}

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 :sweat_smile:

2

There is no “official” way. Does the function you copied not work correctly? Note that Figma stores colors (RGBA) in a fractional format [0-1], but the code you copied likely uses [0-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.

3

Here is an output of scripter

image
image824×67 4.37 KB

image
image633×865 56.3 KB

4

I see, thank you for the input :heart:

5

:tada: 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;
}
2 Likes
6

The toSolidPaint method should work :slight_smile:

7

Great, thanks for sharing.

8

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]
9

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