How to set the Variable Modes of a Section in Figma

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.

Written by Oscar de la Hera Gomez

First published on 08/14/2023 at 14:59

Last Updated on 08/15/2023 at 12:59

<p>A flower that represents Figma with the text "Set Variable Modes within a Section" beneath it.</p>

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.

How to create a Design System using Variables in Figma Check out our Figma Variables Guide

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

Discover Price After

Step One: Create the Sections

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

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.

How to create a Section in Figma

Step Two: Drag in the Elements

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

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

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

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.

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

Frequently Asked Questions (FAQ)

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

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

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.

How to adapt Designs to work with Multiple Languages in Figma

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.

Subscribe Contact Us Visit our Blog View our Services View 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.

Stay Informed

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