Localization

Framer Update: Localization with AI

Hunter

8:08

30K views

Oct 3, 2023

About this lesson

Effortlessly tailor your website to many different languages and locales.

Read the full update notes: https://www.framer.com/updates/localization

🌞 Try Framer for free: https://framer.com

🎉 Follow on Twitter: https://twitter.com/framer

💎 Join Community: https://www.framer.community

https://www.youtube.com/watch?v=wUw67G8svoo&t=0s Intro

https://www.youtube.com/watch?v=wUw67G8svoo&t=45s Add Locale

https://www.youtube.com/watch?v=wUw67G8svoo&t=90s Localization Table

https://www.youtube.com/watch?v=wUw67G8svoo&t=156s AI Translate

https://www.youtube.com/watch?v=wUw67G8svoo&t=187s On-Canvas View

https://www.youtube.com/watch?v=wUw67G8svoo&t=256s Locale Picker

https://www.youtube.com/watch?v=wUw67G8svoo&t=330s Review Workflow

https://www.youtube.com/watch?v=wUw67G8svoo&t=351s Locale Variable

0:00hail it's hunter in this video I'm very 0:03excited to show you website localization 0:06in framer and website localization is 0:10about more than just adding more 0:12languages it's about creating a site 0:14that adapts and feels local to the 0:17people that are viewing it 0:19and that is what we focused on enabling 0:21with the features in this video 0:23and we've optimized it to work on 0:25anything from the smallest sites to the 0:27biggest sites that run on framer 0:29and to show how it works on big sites 0:31we'll be localizing a page on framer.com 0:34we're going to translate the meetups 0:36page because it's a great example of a 0:38page that benefits from localization so 0:40wherever someone might be they can have 0:42a great experience finding and hosting a 0:44local Meetup 0:46if we hop right in you'll notice there's 0:48a new globe icon in the toolbar 0:51this is where you'll find the 0:53localization View 0:55once we're in here we'll see a prompt to 0:57add a new Locale so we'll go ahead and 1:00do that 1:02we'll start by adding Dutch because 1:04we're based here in Amsterdam 1:06you'll see we're able to select either 1:07just Dutch itself or select a more 1:10specific region for the language 1:13we're also able to select a fallback 1:15this means whenever something hasn't 1:17been translated whether a specific piece 1:19of text or an entire page it'll just 1:22show this fallback language instead 1:25we're also going to add Chinese just to 1:27use something that doesn't have Latin 1:28characters 1:32once you have added a Locale you can see 1:35that every single piece of text and 1:37every image in your project is now in 1:40this table we could go through this 1:42table and translate our entire site from 1:44right here 1:45but in our case we're going to the 1:46filter action in the toolbar so we just 1:49see the items for the meetups page 1:53and then we can just go ahead and start 1:55translating 1:56I'm still learning Dutch so I'm going to 1:58go with the easy one here framer meetups 2:00can probably be translated to just 2:01framer meetups and if we hit enter we'll 2:05see this item is now marked as done 2:08and we can go ahead and start 2:09translating our entire page 2:12we even support image translations if we 2:14wanted to say show a Meetup photo from 2:17another country 2:18and we can also translate the alt text 2:21for formatted text Fields CMS content or 2:25even just text with links in it will get 2:27a bit more space to work in the 2:28localization overlay but let's say I 2:30just want to get the translation started 2:32and then have one of my Dutch colleagues 2:34take a look at it and tweak it after 2:36that's where AI translations comes in 2:39if we hit the translate button the AI 2:41starts translating right away and we've 2:43optimized it to carry over things like 2:45links videos images and keep them in 2:48line just where you'd expect them 2:50we can take this a step further to have 2:52the AI translate the entire page 2:54this is perfect for when we want to 2:56start playing with the content and 2:57focusing on the other aspects of 2:59localizations before we publish up the 3:01translations themselves 3:03we'll give the AI a second to translate 3:05everything and there we go and we'll 3:07head back to the canvas 3:09but we want to get a sense of what our 3:11page actually looks like in Dutch this 3:14is where the canvas view comes in handy 3:16if you look down in the canvas toolbar 3:18we'll see there's new icon that allows 3:20us to select look out if we select Dutch 3:23we are now viewing the dust translation 3:25right on our canvas 3:28here we're able to edit all the 3:29translations in context so for instance 3:32this heading breaks onto four lines but 3:34I'd like to adjust it to two if we can 3:36I've quickly consulted with the Dutch 3:38colleague and they gave me some tips on 3:40how to get this onto two lines 3:43and that's looking much better so these 3:46are the kind of things that are really 3:47nice to have the canvas view for 3:49we can also pan around and check out the 3:51rest of our page we'll see dates are 3:53automatically localized 3:55and everything else is looking pretty 3:57good 3:58now that we have the foundation for our 4:00Dutch translation we can go ahead and 4:02publish this site and all the HTML 4:04things you'd expect for a localized 4:06website are going to be handled for you 4:07things like href Lang is already set up 4:10for each Locale that you add 4:12this means that people coming from 4:14search engines will get the right 4:15version of the site 4:17but if you want to let people choose 4:18their language we can go to the insert 4:20menu and insert a Locale picker 4:23the Locale picker component will always 4:25stay in sync with the locales in your 4:26project so all you need to do is set up 4:28the styling 4:31I'll do that now and pop it in our nav 4:34I'm going to remove the background color 4:35add a little icon remove the text 4:39and I think we should be good 4:44not publisher site to get a feel for the 4:47beginnings of our localized page 4:50this release brings with it an enhanced 4:52version of our optimization process that 4:54takes the pages for each Locale and runs 4:57them in parallel to keep that fast 4:59optimization speed no matter how many 5:01Lookouts you have in your project 5:04if we go to the Locale picker we can go 5:06to the Dutch version of our page 5:08and it's looking great 5:11and a key part of the architecture of 5:13this feature was ensuring that the 5:15localized versions of your website are 5:17just as fast as the base language 5:19that was the core workflow of localizing 5:21your site and framer 5:23so now let's finish up those 5:24translations and then we'll end the 5:25video with something really cool 5:27I'm going to ask some colleagues to help 5:29translate this page 5:30and there's a specific translation here 5:33that I want to get looked at so I'm 5:34going to mark it as needs review 5:37this flag also happens automatically 5:38when something that's already been 5:40translated changes in the base language 5:42and another workflow tip if we want to 5:45only see things that are a specific 5:46status like to review 5:48you can do that with the drop down in 5:50the top right 5:51all right I'm back with some fresh 5:52translations from my colleagues and 5:54let's finish up this site our Dutch 5:57translation is looking great 5:59our Chinese translations looking great 6:01but it's missing that last little bit 6:03what if we want to customize and adapt 6:05more than just the content of our 6:08website that's where this last feature 6:10comes in to allow you to push Locale 6:12customization to limits we've added a 6:15variable with the current Locale that is 6:17accessible anywhere in your project this 6:20means you can add logic to nearly 6:22anything in your framework Project based 6:24on what the active Locale is if this 6:26sounds complex to you don't worry I'll 6:28show a quick example to illustrate and I 6:31will add a link to another video we have 6:33specifically on this topic 6:35I've converted this hero section to a 6:37component with three variants each with 6:39a different accent color in a different 6:41city highlighted on the globe component 6:45if we select it we can go to variant 6:47click on the little plus here and go set 6:49variable 6:50locale 6:52convert option 6:54this enables us to set up some logic 6:57that says when the current Locale is 7:00English set the variant to New York when 7:04the current Locale is Dutch 7:07set the variant to Amsterdam 7:12and when the current Locale is Chinese 7:14set the variant to Shenzhen 7:18and a fallback to say when it doesn't 7:20match any of these languages just use 7:22this variant 7:24and now we can change the Locale on the 7:25canvas to see this in action 7:30yes that is perfect 7:34now we can publish our site and check 7:35out our localized Meetup page 7:41looks great 7:42with the Locale variable and framer you 7:44can make your websites truly localized 7:46for whoever may visit your site 7:49that's been localizations and framer 7:51thank you for watching and I will see 7:53you in the next one

TeachesLocales Auto-Translate

Also coversCMS Fields Component Variants Components Links SEO Audit Variables

Watch on YouTube ↗

‹ AI-Powered Localization — Translate and Customize your Entire Site in Framer

Connecting a Custom Domain to your Framer project ›