How Design Systems Work for Dark/ Light themes

I have learned that the design system theme can be toggled using the ‘Appearance’ plugin. This feature is very helpful and makes it easy to work with a team in the Figma tool.

Appearance

A plugin which helps the change themes from light to dark and vice versa

Appearance

How it works

• First, you need to find and install a plugin called “Appearance”.
• Here, we must determine the colour palette light and dark themes.
• Use the same colour style names with only the suffixes [day] for lighter themes and [night] for darker themes. For example, the style name should be “Style name[day]” for lighter themes and “Style name[night]” for darker ones.
• Apply the colour styles for your design without worrying about a different theme.

• To convert your design to another theme, select any object or component and choose “Appearance → Dark mode” or “Appearance → Light mode” as shown above.