How does it work?

Using this plugin is fairly simple. You can copy the Realtime Colors page URL with your selected colors (use the shortcut Ctrl+S) and paste it in the link input. Then, press Generate and receive a color palette inside a frame named Color Styles.

Color Styles

Once you have a palette, you can also see local color styles created automatically in the Figma file. Consider these color styles as reusable assets across your project.

Color styles allow you to:

• Keep the design consistent by using only colors from local styles;
• Avoid re-entering the same color values for every element;
• Choose colors from a simple dropdown;
• Automatically update all the colors with the same color style names across your designs after generating a new set of colors using a new URL.

If you want to see the color styles, make sure you're not selecting any element by pressing Esc. On the sidebar, you should be able to see the local color styles.

You can use these color styles in your design using the style picker.

Now, you can generate a new palette with a new URL, and all the colors in the design will automatically update.