Adam Wulf

I’ve recently translated Muse into French 🇫🇷! As part of localizing the app, I also needed to translate the App Store description and screenshots. All of the App Store screenshots for Muse are setup in Figma, and I was hoping beyond hope that I could setup multiple languages in Figma to make it easy to export for all storefronts.

Thankfully, Figma came through! The strategy is to use Figma’s variables and modes. The basics flow is to:

Setup a variable for each piece of text that you want to translate, and set it’s initial value to the English translation
Update each text node in your Figma design to use that variable instead of static text
Setup a new mode for the variable for each new language, and then update each variable to include a translation for each language
Toggle the page’s default mode to set the language for all screenshots

Figma Variables and Modes

With nothing selected on the Figma page, click the button to open up the Local variables window. This is where you’ll configure each text snippet.

The local variables button in the Figma sidebar

Once the variable window is open, add a variable for each piece of text that appears in your design. For Muse, one of my screenshots is below, and you can see I’ve translated its two header lines as a separate variable.

An App Store screenshot for Muse with its default English translation

You can see that I’ve created separate variables for “Nested boards” and “A cozy space to think.” For simplicity, I set the Name and English value so the same text so that it’s easier for me to recognize the variables elsewhere in Figma.

After setting up the English version, click the + button to add a new variable mode. Use this new variable mode for your second language’s text.

Figma's variable definition window, showing a row per variable, and a column per mode.

Update Text Nodes to Use Variables

Now that you have your variables setup with all of your translations, it’s time to setup the text nodes in your designs to use them. To do that, select a text node and then click the Apply variable button.

The Text node attributes, showing the Apply variable button.

That will open a dialog where you can choose the variable that matches your text.

The variable menu appears to select which variable to assign to this text node.

Now your text node has its text pulled from that variable.

The text node now shows it's attached to the variable's value.

Toggle Language

That’s all there is to setup multiple languages in your Figma design. To switch between your languages, deselect everything on your page, and then click the Apply variable mode button to switch between your language modes.

Figma's "Apply variable mode" button pressed, showing the menu to switch modes.

Now it’s easy for me to switch between and export both English and French screenshots for the App Store!