How to set the Variable Modes of a Section in Figma

Oscar de la Hera Gomez
A flower that represents Figma with the text "Set Variable Modes within a Section" beneath it.

A step by step guide on changing one or many variable modes that are applied to screens, components or other UI elements within a section.

Please note this feature builds on our design system tutorial and is only available on education, professional or organization Figma accounts.

The following tutorial uses the example of Price After to recreate how to use variable modes in Sections.

Step One: Create the Sections

A screenshot of a Figma design files showing UI elements and two sections called "Light Mode" and "Dark Mode."

Create and name a section for each of the modes you wish to display.

If you want Chinese, Light Mode, Chinese, Dark Mode, English Light Mode and English Dark Mode - you must make 4 sections.

Step Two: Drag in the Elements

A screenshot of a Figma design files showing UI elements and two sections called "Light Mode" and "Dark Mode." We have dragged in an element into each of them. This element has features that use light mode and dark mode but all show light mode as this is the default mode.

Drag in the UI elements that have the modes that you wish to adapt to into each of the sections.

Step Three: Set the Modes

A screenshot of a Figma design files showing UI elements and two sections called "Light Mode" and "Dark Mode,” each mode contains an element that makes use of the collection that holds the modes. We have highlighted that if you select the section, and click the change variable mode button found on the right menu side bar under layer, you can set the variable mode for each of the collections present in the section.

Select each section, click the Change Variable Mode button and from the menu that appears, set the mode for that section.

Repeat this for each of the sections as well as all of the modes that you wish to set.

A screenshot of a Figma design files showing UI elements and two sections called "Light Mode" and "Dark Mode,” each mode contains an element that makes use of the collection that holds the modes. We have set the dark mode  section to use dark mode and the light mode section to use light mode. This is reflected by the elements.

Frequently Asked Questions (FAQ)

This tutorial only shows how to set one mode, does it work for many ?

A screenshot of Figma showing 4 sections that represent Dark Mode, English; Light Mode, English; Dark Mode, Spanish and Light Mode, Spanish. Each section shows the correct colors as well as the right language content.

Yes. Make sure your section holds elements that use multiple modes within multiple collections and carry out step three on all of the sections and modes.

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.

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

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