Localization

Adding a Locale in Framer

Justin

5:19

2K views

Apr 7, 2026

About this lesson

In this video, we cover setting up locales, using manual and AI translation, customizing translation tone with AI settings, and batch translating content for multiple audiences.

00:00 Introduction

00:30 Opening the Localization view

00:45 Adding a new Locale

02:19 Translating content

02:36 AI Translation

03:45 Open in Overlay

04:16 Batch Translate

04:34 Previewing the Locale

04:58 Wrap-Up

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00There comes a time in every young 0:01[music] website's life when it's ready 0:03to branch out and explore the world. And 0:06what [music] I'm actually talking about 0:08is adding multiple languages to your 0:10site. And Framer makes that easy by 0:13allowing us to [music] add locales.0:15This is especially useful when we're 0:17ready to expand our site for different 0:19markets. So, in this video, we're going 0:21to cover how to add locales and 0:23translate the content on our site into 0:25different languages.0:31To get started, we'll head up to the top 0:33right corner of Framer and click the 0:35globe icon. This opens the localization 0:38section, which is where we can manage 0:40multiple locales and handle all of the 0:42translations in our project.0:45Now, we'll just click add locale to 0:48create our first one. And from here, we 0:51will first need to choose the default 0:52language of our site if we haven't 0:54already selected one in our site 0:57settings.0:58Next, we can choose a language we want 1:00to translate our content into. So, for 1:02this, I'll choose Spanish. And if 1:04needed, we can even choose a specific 1:07region.1:08This is helpful when we want a more 1:10tailored version of that language for a 1:12certain audience.1:14Now, if we're going to have more than 1:16one locale, we can give each one a 1:18custom name, slug, or even change the 1:20fallback language. So, if a translation 1:23hasn't been added yet, Framer will 1:25automatically fall back to another 1:27language instead of leaving that content 1:30blank. And Framer will automatically 1:32point that to our default language 1:35unless we specify otherwise.1:37Finally, we have our AI settings, where 1:40we can add an AI style prompt to help 1:42shape how the translated content sounds 1:45if we decide to use Framer's automatic 1:47translation, which we'll go over in just 1:50a sec.1:51Once we're done, we'll click add, and 1:54Framer will automatically pull all of 1:56our site's content like body copy, page 1:58titles, descriptions, and image alt text 2:01into the localization table here. So, we 2:03can manage translations all in one 2:06place.2:07To make things even easier, everything 2:09in the table is grouped by site 2:11settings, pages, CMS collections, and 2:14even components, which is really helpful 2:17as our site scales.2:20With that said, let's start translating 2:21the content. And there are two main ways 2:24we can do that. The first is by manually 2:27adding the translations ourselves by 2:29clicking into the content we want to 2:30change and typing it in.2:32This gives us the most control if we 2:34want to fine-tune the wording. The 2:37second option is using AI translation,2:39which can help translate part of the 2:41site or even the entire table 2:44automatically. And if you're like me and 2:46don't speak multiple languages or just 2:49don't want to rely on another tool like 2:50Google Translate for every single piece 2:53of content, this can be a really helpful 2:56option.2:57First, let's head back into the AI 2:59translation settings by going to our 3:01locale in the list, clicking the 3:03ellipsis, and choosing settings.3:06Here, we can switch to a different AI 3:08model, add a prompt to guide the style 3:11or tone of the translation, and enable 3:15auto translate so any new or updated 3:18content is translated automatically.3:21After clicking update, Framer will ask 3:24if we want to translate all existing 3:26content. But, let's skip that for now.3:30To translate a single piece of content 3:32with AI, we'll hover over the content we 3:34want to translate, click the star icon,3:37and Framer will translate it into the 3:39language we've selected. Next to our 3:42star icon, we have an ellipsis menu that 3:45allows us to mark this specific content 3:47for review,3:48which is helpful if we want ourselves or 3:51someone else on the team to double-check 3:53the translation later.3:55And if we're working with longer 3:56content, we will also find the open in 3:59overlay option here to view the 4:01translation in its entirety.4:04As we translate our site, Framer will 4:07also show us how much of the locale has 4:09been translated by giving us the 4:11percentage completed next to each locale 4:14in our list. And if we want to translate 4:17an entire locale or even multiple 4:19locales at once, we can head up to the 4:21top left corner and click translate.4:24This opens a prompt where we can batch 4:26translate every locale in the project or 4:29even use the drop-down to choose 4:31specific locales instead.4:34Once ready, we can jump back to the 4:36canvas to check out the site with our 4:38new locale.4:40By selecting the locale in the bottom 4:41navbar, we can switch between languages 4:44to see how everything looks in context.4:48And if we need to make any quick updates 4:49or translate any new content, we can do 4:52[clears throat] that easily from the 4:53canvas by selecting the content,4:55right-clicking, and choosing translate.4:58And that's it.5:00With our new locale in place, our site 5:02is now ready for a new audience without 5:04us having to manage a completely 5:06separate version. So, go ahead and add 5:09some locales to [music] your site, and 5:11I'll see you in the next video.

TeachesLocales

Also coversAuto-Translate Collections Components Hover & Press Meta Titles & Descriptions Site & Page Settings

Watch on YouTube ↗

‹ Framer Creators: Lee Black, from print to Best Framer Designer

Framer Update: Holo Shader ›