colorMapToOptions

info

This API is only available in FigJam

The colorMapToOptions takes in a ColorPalette, a map from color names to values, and returns WidgetPropertyMenuColorSelectorOption[]. This helper function enables developers to use figma.constants.colors.*, official FigJam color palettes, in the PropertyMenu.

Signature

colorMapToOptions(colorPalette: { [key: string]: string }): WidgetPropertyMenuColorSelectorOption[]

Remarks

Usage Example:

colorMapToOptions example

const { widget } = figma
const { colorMapToOptions, useSyncedState, usePropertyMenu, Text } = widget

function colorPaletteExample() {
  const [color, setColor] = useSyncedState("theme", figma.constants.colors.figJamBase.black)
  usePropertyMenu(
    [
      {
        itemType: 'color-selector',
        propertyName: 'colors',
        tooltip: 'Color selector',
        selectedOption: color,
        options: [
          ...figma.widget.colorMapToOptions(figma.constants.colors.figJamBase)
          {option: '#f5427b', tooltip: 'Hot Pink'}
        ],
      },
    ],
    ({propertyName, propertyValue}) => {
      if (propertyName === "colors") {
        setColor(propertyValue)
      }
    },
  )
  return (
    <Text fill={color}>
      String(color)
    </Text>
  )
}

widget.register(colorPaletteExample)