Localization (Early access)
This feature is in early access - expect some limitations.
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.
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.
Limitations
This is currently an early access feature and is subject to a few limitations:- When the first page loads, the visitor may see the default locale a fraction of a second before switching to the correct locale.
- Search engines or LLM crawlers will only see the default locale.
- URLs are unique and do not include the locale.
We’ll continue working on this feature and address these limitations in an upcoming version of figma.to.website.