How change the Variable Mode for a Page in a Figma Design File

With the canvas selected, click Change variable mode and select the mode to default to.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 08/14/2023 at 14:31
Last Updated on 08/14/2023 at 16:48
<p>A flower that represents Figma with the text "Change Variable Mode" beneath it.</p>

With the canvas selected, click Change variable mode and select the mode to default to.

Subscribe

Please note this feature is only available on education, professional or organization Figma accounts.

Check out our Figma Variables Guide

Step One: Click Change Variable Mode

<p>A screenshot of a Figma Design File with nothing selected. Highlighted on the top right of the right menu side bar under Page is the "change variable mode" icon. Click it to open up a menu that allows you to change mode.</p>

With the canvas selected, click the Change Variable Mode icon which appears under Page on the top right of the right menu side bar.

Step Two: Change Mode

<p>A screenshot of Figma that shows the menu that appears when you click the Change variable mode icon. This menu shows all the available collections and allows you to set the default mode for that collection. This will make the figma update to reflect all the variables from that mode.</p>

Using the menu that appears, select the mode within the collection that you would like to set as default.

How to create a Design System using Variables in Figma
<p>A screenshot of a Figma Design File that has been set the Styleguide default mode to "Dark Mode." This has made all the artboards that use variables from the styleguide change to dark mode.</p>

Looking to learn more about things you can do with Variables or Figma ?

We recommend you check out our Figma Variables Guide or search our blog to find educational content on learning how to use Figma.

Check out our Figma Variables GuideSearch our Blog

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
SubscribeContact UsVisit our BlogView our ServicesView our Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe