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