Figma Plugin
One of the best ways to export the selected colors on Realtime Colors is through the Figma Plugin . It's a quick and easy method for designers and developers to apply colors directly on the design and build a design system.
![Realtime Colors Figma Plugin](/images/figma-plugin.png)
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.
![Realtime Colors Figma Plugin](/images/figma-plugin.gif)
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.
![Realtime Colors Figma Plugin Color Styles](/images/color-styles.png)
You can use these color styles in your design using the style picker.
![Realtime Colors Figma Plugin Color Styles](/images/color-style-picker.gif)
Now, you can generate a new palette with a new URL, and all the colors in the design will automatically update.
![Realtime Colors Figma Plugin Automatic Update Color Styles](/images/figma-plugin-automatic-color-styles.gif)
Learn more about managing, viewing, and sharing color styles on Figma .
Updated on June 8, 2023