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.

8 replies

Gleb
  • Gleb
  • Power Member
  • 4710 replies
  • 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
  • flexbox
  • Author
  • 3 replies
  • July 2, 2021

Here is an output of scripter

image

image

flexbox
  • flexbox
  • Author
  • 3 replies
  • July 2, 2021

I see, thank you for the input ❤️

flexbox
  • flexbox
  • Author
  • 3 replies
  • Answer
  • July 2, 2021

🎉 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
  • 12 replies
  • 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
  • tank666
  • 4873 replies
  • July 3, 2023

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 settingsAccessibility statement

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