Designer’s Guide

Localization

This feature also requires multiple variable modes, which means it is only available for Figma’s Professional plan and up. See Figma’s pricing for more information.

Create modes for every locale

First, create collections of variables where all modes are locales.
image 24
Every mode name should be a language defined in the RFC 5646 also known as BCP 47.

Variables are not limited to type text.

Design with variables

Use the variables in your design.

The mode selected in the canvas will be the
default locale.

The right language is automatically displayed

Based on the visitor browser’s settings, figma.to.website will automatically present the correct mode to the visitor, meaning their preferred language will be displayed.

Website locale switch

You can also offer the option for visitors to change the language themselves using a locale switch, which can be set up by adding prototype interactions.
image 25
When performing the action “Set variable mode” on modes that are defined as “locales”, the selected mode will be stored in the local storage of the visitor, meaning the visitor will always get this setting in the future.

Collections are defined as “locales” when every mode of the collection is a language defined in the
RFC 5646.

SEO and multi-locale

For SEO purposes, each page will automatically have a default URL with the default locale and a new page for each other locale.

In the example above with mode “en” (Default), “fr_FR” and “pt_BR”, the following pages will be created for the homepage:

  • https://---domain---/
  • https://---domain---/fr_FR/
  • https://---domain---/pr_BR/

For the page “/contact-us”, the following pages will be created:

  • https://---domain---/contact-us/
  • https://---domain---/fr_FR/contact-us/
  • https://---domain---/pr_BR/contact-us/

Each are created with the correct SEO information like “canonicalurl”, “lang” and “hreflang” information so search engine can index these pages properly in the different languages.
Made
with