Customization

Change theme

This feature is available in Ant Design System for Figma version 2.3 and above.

Let’s say that you’ve designed your app with a light theme file, and you want to change the theme of your project to dark. As long as you’ve used the default color styles available in the library, you will be able to change the entire theme of the project in a few clicks.

Install these plugins:

Once you have these plugins installed, please follow the instructions below.

  1. Open the Figma Tokens plugin.
  2. On the left side of the plugin’s UI, you will see the ‘dark’ set. Click on the checkbox inside.
  3. Wait until all components are restyled (it can take up to 5 minutes).
  4. Once it’s done, close the Figma Tokens plugin.
  5. In the Background settings in the top right corner of Figma’s UI, change the page's background color to #000000.
  6. Open the Apply Current Background to All Pages plugin and wait a few seconds.

Voila! Now you have your designs made in the dark theme!

FAQ

Something’s not right after I switch the theme. What is wrong?

Please make sure that:

  1. You have the right color styles applied to your components and designs. All colors in your designs need to be attached to the styles.
  2. You didn’t change the color styles - they must be the same from the beginning. If you changed them, though, please follow the instructions below.

I changed the default palette. Can I make it work in a dark theme?

Yes, but you need to edit the colors in the Figma Tokens plugin:

  1. Open the Figma Tokens plugin.
  2. On the left side of the plugin’s UI, you will see the ‘dark’ set. Click on it to see the dark color styles.
  3. Edit the colors to match your dark theme.

How do I revert back to the light theme?

  1. Open the Figma Tokens plugin.
  2. On the left side of the plugin’s UI, you will see the ‘light’ set. Click on the checkbox inside.
  3. Wait until all components are restyled (it can take up to 5 minutes).
  4. Once it’s done, close the Figma Tokens plugin.
  5. In the Background settings in the top right corner of Figma’s UI, change the page's background color to #F5F5F5.
  6. Open the Apply Current Background to All Pages plugin and wait a few seconds.
speed up your design process

Get Ant Design System Today

Stop wasting time on creating everything from scratch for every new project you start. Use this set of handcrafted elements to design your next product efficiently.

Purchase now
Ant for Figma UI