Skip to main content
Solved

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


flexbox

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 😅

Best answer by flexbox

🎉 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;
}
View original
This topic has been closed for replies.

Gleb
  • Power Member
  • July 2, 2021

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.


flexbox

Here is an output of scripter


flexbox

I see, thank you for the input ❤️


flexbox

🎉 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;
}

111749
  • January 8, 2022

The toSolidPaint method should work 🙂


Rishab_Sain

Great, thanks for sharing.


Kevin_van_Breemaat

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]

tank666

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


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings