Import colors with our Figma plugin

Respresso has a powerful Figma plugin that can handle much more than colors. (E.g. localizations, images and app icons). On this page, we will only discuss how it handles colors.

For more details - like installation instructions and other categories - please view the common docs.

How Respresso finds colors in your design

First of all, colors will be imported only if you kept the color category enabled in the plugin configuration screen. Find out more about these integration options here.

Respresso doesn't scan your artboards or selection to find colors. Instead, it uses your Color Styles, so it won't import colors you don't intend to add. E.g.: colors in your vector arts will not be added unless they are defined in Color Styles.

Respresso can import solid and also gradient colors from your styles, and it will use their name as the key for them. As most platforms has not gradient definitions, Respresso is not storing gradient colors together. Instead, it imports all your stop point colors as a single color but with the same key suffixed with the order (_[n]).

You can find your design's Color Styles in the Design tab within the right menu:

Find your design's color styles in Figma
Find your design's color styles in Figma

In this example, Respresso will import multiple colors. Including the following ones:

  • green: #37BC9B
  • gradient-purple-blue_0: #514A9D
  • gradient-purple-blue_1: #24C6DC

Advices:

  • Name your colors before importing them, as keys are never updated from designer tools.
  • Use source code compatible (English letters, numbers, dot, underscore, hyphen etc.) naming. Like text_color.dark.
  • If you want to update a color in Respresso, just change it's color without changing the name/key.

How Respresso merges your colors with existing colors

Respresso uses a common resource merging process for all the resource categories. Here you can find how it treats colors during that process.

Figma DOES NOT provide proper ids for each color style, so Respresso uses the name/key to update previously imported colors. To use this feature, you just have to update the existing color without changing the name/key so Respresso can link it to the already imported color.

For content matching (identification), Respresso uses all the RGBA values of each color. In addition to this, it can match the RGB values to find an existing color and suffix its key with the alpha value for the imported new color.