Customization

Dark theme

Learn how to switch from light to dark theme in Ant Design System for Figma with Figma Tokens plugin.

Switch from light to dark theme

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

Switch from light to dark theme

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

Get Ant Design System for Figma today

Speed up your design and development process

Stop wasting time on creating everything from scratch for every new project you start. Use pixel-perfect and handcrafted elements to design and implement your next Ant Design app efficiently.