delasign
delasign

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

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
A flower that represents Figma with the text "Change Variable Mode" beneath it.

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

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.

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

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.

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
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.

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 Guide
Search 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.
delasign logo
You imagine it, we create it.

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details

We'd love to chat &
see how we can help.