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
  • 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

image

image

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;
}
Anna_Kapurkina
Gleb
2 people like this
  • Anna_Kapurkina
    Anna_Kapurkina
  • Gleb
    Gleb
111749
  • 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.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
Terms & ConditionsCookie settings

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