This is a Figma plugin for importing/exporting nested json or JS objects to figma color and text styles.

This plugin will be published to figma store soon. Otherwise please follow online guides for installing development plugins.

The tool accepts the following inputs as long as the key, value pairs point to a color. (RGB, HEX, HSL, etc)

• JSON URL endpoint
• JSON
• JS Object

below is an example JS Object input:

{
  button: {
    primary: {
      base: {
        default: "#5b81cb",
        hover: "rgb(25,41,21)",
        pressed: "hsl(100,21,43)",
        disabled: "#81808D",
      },
    },
  },
};

This tool also allows you to export local color and text styles as a nested JSON object to your clipboard.

Text styles

Text styles are exported as a nested JSON object that follows the React CSSProperties API which can be consumed in a component's style prop.

Color styles

currently only solid paints are exported.