Figma Color Styles Not Showing: Here’s How to Fix it

One of the most recent tools widely used in recent years is Figma. Figma has been embraced by designers of all experience levels, from amateurs to experts, thanks to its user-friendly interface and potent capabilities. The popularity of Figma can be ascribed to its simplicity of usage. However, occasionally color styles might not be present in the Figma library. Users find this to be highly troublesome because there is not enough information to help them fix the problem. We have compiled a list of possible explanations for the Figma Color Styles Not Showing issue occurrence and solutions. To learn more, keep reading.

What is Figma?

Figma is a potent UI/UX design tool for interacting with team members and producing designs. Its high-fidelity mock-up, interactive prototype, and code-generation features are used to create vector drawings, displays, and apps. Even if you download the app, Figma always remains online. Multiple team members can make modifications to a project in real-time, and anyone seeing your designs will always see the most recent versions.

Figma is simple to use for novices and provides complex features for more seasoned designers thanks to its intuitive UI. Figma is gradually becoming a top substitute for well-liked programs like Adobe Experience Design and Sketch.

There are a few causes for this:

  • Instead of merely offering design, it also includes UI and prototyping
  • Individuals can use it free of cost which makes it even better
  • It has robust vector characteristics
  • It offers a native desktop app that can be downloaded
  • It is online

Figma Color Styles System

There are a few important considerations you must make when it comes to site design. The color scheme you will pick for your website is one of those things. Although you might have a basic notion of the colors you want to use, using a color style in Figma can help you hone your selections and give your site a unified appearance.

A set of colors that can be applied to an element exist in Figma. Global and local color styles are the two different categories. While local color styles can be applied to particular elements, global color styles can be applied to any element.

You can select from a wide range of colors when designing a color style, including RGB, CMYK, HEX, and Pantone. Additionally, you can design your unique colors. After choosing a color, you may give the color style a name and save it for later use.

Overall, in Figma, color styles are a fantastic way to organize colors. They enable you to produce a palette of colors that you may reuse again in your design. In Figma, the color styles panel, which is accessed via the right-hand toolbar, is where color styles may be created and controlled.

Despite all of its fantastic features, Figma color styles may occasionally fail to show up in your color styles panel, which can be problematic for the users. Let’s examine some potential causes and solutions.

How to Fix Figma Color Styles Not Showing Issue?

Some possible causes of Figma colors not appearing and solutions to the problems are listed down below.

1. The color style was unintentionally deleted by you

You may unintentionally delete your saved color styles and be unaware of them. This is a pretty straightforward issue that can be solved quickly.

Solution: Check the version history of your project to see whether you mistakenly erased the color style. If that was the case, you can restore it once more.

2. On the current live page, the color style is absent

Sometimes the color styles may not be showing on the live page while it is available globally or in its saved folder.

Solution: Use the global styles panel to locate the color style and apply it to the current live page, or open the folder containing the saved color style and use it on the live page.

3. No elements are given to the color style

Even when color styles are present, they might not be always applied to any elements. Therefore, it might not display on the live page.

Solution: A minimum of one element on the live page must have the color style applied.

4. There is no global color style set for the hue

Sometimes, the color style might not be set to global. It might not be seen as a result. You will need to convert the local color style to the global color style in that situation.

Solution: Follow these procedures to change a local color style into a global color style:

  • Click the “Create style” button
  • Select “Create Global Style”

5. The panel for color styles is not visible

The color styles panel sometimes might not be visible because of which color styles might not be showing on the live page.

Solution: Take the following actions:

  • The “C” key can be used to turn the panel on and off.
  • Additionally, you can also toggle the panel on and off by clicking the color styles icon in the toolbar.

6. The color styles are hidden

The color styles may be hidden which is why it is not been shown.

Solution: Take the following actions:

  • To reveal a hidden style, click the “…” button next to the color style
  • Choose “Unhide”

7. There is a bug in the Figma app

Sometimes, there may be a bug or glitch in the Figma app due to which color styles may not show.

Solution: Take the following actions:

  • Restart the app: If you restart the app, the problem might be fixed.
  • Refresh the page: Refresh the page to see if the problem is fixed.


These were some of the steps which will help you to find the exact cause of why the color styles may not be showing in Figma and how you can solve the glitches. If you are well-equipped with the app and how to use it, Figma Color Styles Not Showing issues can be solved very easily and in a short period. We hope you liked this post and comment down below about your experience with Figma color styles. Also, let us know if you want similar content from us. We will keep posting.

Leave a Comment