How to localize a Framer site without breaking your layout

Adding a second language to a website used to mean duplicating every page and keeping two copies in sync by hand. Framer's built-in localization removes most of that work: you add locales to the same project, translate content in one place, and Framer publishes each language version for you. What it cannot do is guarantee that your design survives the translation.

German headlines run long, French buttons wrap, and a carefully balanced hero can fall apart the moment the copy changes length. In this guide we will set up localization in Framer step by step, then go through the layout decisions that keep every language looking intentional rather than squeezed in.

Prepare the layout before you add a locale

The cheapest time to fix a localization problem is before any translation exists. Go through your main pages and look for anything that assumes the current copy length. These are the usual suspects:

• Fixed-width text layers that will clip or overflow when a phrase grows.
• Fixed-height cards and banners that cannot grow with an extra line of text.
• Buttons with set widths, which should almost always fit their content plus padding.
• Text baked into images, such as headlines inside a hero graphic. Those cannot be translated in the localization table and need a separate image per language.

As a rough rule, plan for translated text to be around a third longer than English in short labels, and sometimes more. Set text layers to fill width inside stacks, let containers fit their content in height, and give navigation items room to breathe. If the layout handles a deliberately long test headline, it will handle most real translations.

Add your locales in the Localization view

Open the Localization view from the menu in the top-left of the Framer editor and click Add Locale. Pick the language, and optionally a region if you need to separate, for example, Brazilian and European Portuguese. Framer's help article on adding a new locale covers the full flow.

You can also choose a fallback language for each locale. The fallback is shown wherever a translation is missing, which is useful while you are still working through content. Pick the language your audience for that locale is most likely to understand, not automatically your default language.

Once a locale exists, you can switch the editor between locales from the locale icon in the bottom bar. This is the fastest way to check how a page looks in each language while you work.

Translate content, then review it properly

The Localization view shows your content as a table organised by page, including page titles, descriptions and image alt text, with a completion percentage for each locale. You can type translations directly, paste in copy from a translator, or use Framer's AI Translation to fill in a locale automatically. AI Translation uses credits, so check your plan before running it across a large site.

Machine translation is a solid first draft, not a finished product. A sensible review process looks like this:

1. Run AI Translation, or import your translator's copy, for one locale.
2. Ask a native speaker to read the live preview, not a spreadsheet, so they see each phrase in context.
3. Pay extra attention to headlines, calls to action and legal text, where tone and precision matter most.
4. Fix layout issues as you find them, then move to the next locale.

A translation that is technically correct but breaks your hero onto four lines is still a design bug. Review language and layout together.

Translate page paths and SEO metadata

A localized page with an English URL and an English meta description sends mixed signals to visitors and to search engines. Framer lets you translate page paths: in the Localization settings, turn on Translate Page Paths, and paths will appear under each page header in the Localization view. You can also edit them from the page panel, which has a locale switcher at the top. Framer's update note on localized page paths explains the details, including the warnings it shows when two paths would conflict.

While you are there, translate every page title and description. These are what appear in search results for each language, so they deserve the same care as the headline on the page. For CMS content, translate the slug and SEO fields along with the body so each item has a proper localized URL.

Give visitors a clear way to switch language

Visitors need an obvious, consistent way to change language. Place a locale picker in your navigation, usually on the right next to the main call to action, and include it in the mobile menu as well. If you want it to match your design system exactly, Framer's marketplace has a tutorial on building a custom locale picker.

A few details make the switcher easier to use:

• Show language names in their own language, such as Deutsch or Español, so people can find theirs.
• Avoid using flags for languages. Flags represent countries, and many languages are spoken in several of them.
• Keep the switcher in the same position on every page and breakpoint.

Test every locale at every breakpoint

Before publishing, go through each locale on desktop, tablet and phone. Phone layouts are where longer translations cause the most trouble, especially in navigation, pricing tables and buttons placed side by side.

When something breaks, fix the layout rather than shortening the translation to fit. Let a button stack below another on narrow screens, allow a heading to wrap, or reduce the type size slightly at the phone breakpoint. Only rewrite copy if a translator agrees a shorter phrasing is just as accurate. Finally, preview a page in a locale with incomplete translations to confirm the fallback language shows instead of empty space.

Conclusion

Framer's localization tools handle the heavy lifting: locales, a central translation table, AI Translation, translated page paths and per-language metadata. Your job is to make sure the design can flex. Remove fixed widths and heights before you start, review translations in context, translate URLs and SEO fields, give visitors a clear language switcher, and test every locale on every breakpoint. Do that, and each language version of your site will feel designed for its readers, not adapted at the last minute.