Custom locale picker — Design a custom language switcher

In this tutorial, you will learn how to build a completely custom language switcher component from scratch using Framer’s native Localization features and the Set Locale interaction.

Verify your locales

Before building the component, ensure Framer knows which languages you are targeting.

1. Go to the Localization view by clicking the globe icon in the top bar.

2. Confirm your primary language is set (e.g., English) and add at least one secondary language (e.g., Spanish).

Design your locale picker component

Create the visual layout for your locale picker directly on the canvas. You have full creative freedom here—it can be a simple text list (e.g., EN / ES), a set of flag icons, or a custom-styled toggle.

The only requirement is that you have a distinct layer or button for each language you want to support.

Once you are satisfied with your design, select the layers and convert them into a Component.

Add the “Set Locale” interaction

This is the step that makes your buttons functional.

1. Select your first language button (e.g., the “EN” stack).

2. In the Interactions panel, click the plus icon.

3. Choose Set Locale from the action menu.

4. In the new dropdown, choose English (or the appropriate language).

5. Repeat the process for the “ES” button, assigning it to Spanish.

Visualizing the active state

To indicate which language is currently active, you can use a Component Variable.

1. While editing your component, create a Variant for each language state (e.g., “English Active” and “Spanish Active”).

2. Style the “English Active” variant so the EN button appears selected. Repeat for the Spanish variant.

   

3. Outside the component, select the component’s “Variant” variable and set it to switch conditionally based on the current locale. This allows the picker to update visually when the locale changes.

   

Test your picker

Once everything is configured, test it thoroughly before going live.

1. Drag your custom locale picker component into your navigation bar or site header.

2. Preview your site, and click the different language buttons. You should see your site content switch instantly.

Wrap-up

With just a few steps, you can replace the default Framer locale picker with a fully customized solution that aligns perfectly with your design. By combining component variants, conditional logic, and the Set Locale interaction, your language switcher becomes both visually unique and fully functional.

This approach gives you complete control over how users switch between languages—whether it’s through subtle text labels, bold flag icons, or a fully custom UI element built for your brand. Feel free to extend this foundation with animations, hover states, or additional languages as your project grows.