
Efficient localization in design projects is now more critical than ever. Ensuring that your design resonates across languages and cultural contexts is integral to delivering a complete design experience.  In this blog post, we'll explore how your designs can speak every language, thanks to the powerful integration of SimpleLocalize with Figma.

![🎨 Figma Plugin for translation management](/video/simplelocalize-figma-quick-start.mp4)

## Table of contents

## Localization in design projects

Localization transforms your design into a polyglot that seamlessly adapts to different countries or locations. It goes beyond just a translation; it's about making your design feel at home in different cultures.

### Why localization matters
Localization is the bridge that transforms a design from a universal concept into a personalized experience. It considers cultural nuances, linguistic subtleties, and user preferences, ensuring that your design speaks the language of each user, both literally and metaphorically.

When showcasing your design, the aim is to get as close to the customer as possible and demonstrate how it can be expressed in different languages. Localization of your design makes it possible, and thanks to SimpleLocalize's Figma plugin, you can connect localization and creative design into an effective duo.

### Designer challenges:
Designers face numerous puzzles when dealing with the localization of their design projects, making the process complex and time-consuming. Some challenges include:

- **Linguistic nuances**: Translating idioms or cultural references accurately without working closely with translators can be challenging.
- **Multilingual content design**: Balancing content in multiple languages without compromising design integrity requires careful consideration and planning.
- **Text expansion and contraction**: Languages vary not only in words but also in the space those words occupy, posing a layout challenge. What fits perfectly in English might turn into a design puzzle in German or Spanish.
- **Maintaining consistency across versions**: Adjusting and refining designs for different languages while ensuring consistency is a delicate task.
- **Collaboration with translators**: Effective collaboration with translators is key, but conveying design intent and receiving accurate translations can be a communication challenge.
- **Version control**: Keeping track of different versions for each language iteration can become a logistical headache.

The goal when managing designs in different languages is to make the design look as good as possible while maintaining a high level of localization. SimpleLocalize comes to the rescue, simplifying the complex processes and challenges of project localization.

## Design localization with SimpleLocalize's Figma plugin

With its **user-friendly interface and simple workflows**, SimpleLocalize aims to simplify the complex process of adapting designs for global audiences. The integration with Figma, a beloved design tool, creates a harmonious synergy, promising designers a smoother and more efficient workflow.

![SimpleLocalize online translation editor](/blog/translation-editor.png)

Thanks to the Figma integration with SimpleLocalize, you can:
- **Manage** all your Figma project translations and localization.
- **Collaborate** with a team on project localization.
- **Share design texts** with translators via SimpleLocalize to request translations.
- Receive always **updated translations** for your designs.
- Help translators by **uploading text screenshots** from your design to SimpleLocalize.
- **Check how designs look in different languages.**
- Quickly **add more languages** using the auto-translation feature.
- Easily **create new localization projects** in SimpleLocalize from new Figma designs.
- Manage different design and translation projects within the same SimpleLocalize account.

## Figma plugin configuration

Getting started is a breeze. If your designs in Figma are ready, integrate them into SimpleLocalize by [creating an account](/register/) and initiating your localization journey.

### Create project in SimpleLocalize

Start by **creating a new project** and adding a name. Next, **add your project's existing languages** and any other languages you would like to support. At this point, you can invite your team members or translators to assist with the translation management.

![Creating project and languages configuration](/blog/figma/create-project.mp4)

> [Learn how to invite team members and translators](/blog/posts/invite-team-members-and-translators/) to your localization project in SimpleLocalize.

### Setup Figma plugin

Now, let's set up the SimpleLocalize Figma plugin. Head to **Resources**, then switch to **Plugins** and search for **SimpleLocalize**. Click on it to run the plugin.

![SimpleLocalize plugin in Figma Resources](/blog/figma/figma-plugins.png)

Next, configure the plugin by adding your **personal access token** generated on SimpleLocalize and choosing which SimpleLocalize project you would like to connect with the opened Figma design.

![Creating project and languages configuration](/blog/figma/plugin-setup.mp4)

## Localize your Figma designs

Once the initial setup is ready, we can get started with actual translations of your Figma designs.

### SimpleLocalize plugin settings

Before synchronizing texts from your design with SimpleLocalize, have a look at the plugin configuration. In the **Settings** tab, you can find some extra options and the rule for creating translation keys.

**Synchronization settings**

The below synchronization settings are activated by default. You can disable them according to your preferences.

In synchronization with Fimga, SimpleLocalize:

- Omits untranslatable elements (e.g., elements with only numbers or symbols).
- Omits locked elements; if an element in Figma is locked, it won't be included in SimpleLocalize.
- Omits hidden elements.
- Includes basic text formatting. E.g., "Hello <b>World</b>" will appear in SimpleLocalize as "Hello `<b>`World`<b>`".
- Uploads screenshots of frames with text elements and key screenshots.

![Synchronization settings](/blog/figma/plugin-settings-synchronization.jpeg)


**Translation key creation**

Decide how the translation keys should be created in SimpleLocalize from your text elements. By default, the key format is `my-frame.button.continue`. For example, the Next button in my design will be created with the translation key `welcome.button.next`.

You can adjust this configuration by changing the case, separator, using frame as a key namespace, or including the page name.

![Key creation settings](/blog/figma/plugin-settings-keys.jpeg)


### Figma: Push translations to SimpleLocalize

And now it's time to synchronize all texts from your Figma design with SimpleLocalize. On **Push translations**, Figma will send all text elements from your design to your SimpleLocalize project.

![Synchronizing translations to SimpleLocalize](/blog/figma/figma-push-translations.mp4)

> You can **send only selected elements to SimpleLocalize to test the integration** and make sure all texts are created correctly as translation keys. If some were not correct, you can easily delete problematic keys using [Bulk Actions](/blog/posts/bulk-actions-updating-multiple-translation-keys/).

### SimpleLocalize: Add translations

At this point, the texts from Figma are already SimpleLocalize translation editor, so it's time for translation.

You can add translations manually, edit the texts directly in the translation editor, or [invite translators](/blog/posts/invite-team-members-and-translators/) to help you with the job. You can also use [auto-translation for quick translation](/docs/general/auto-translation/).

![Auto-translating strings from Figma](/blog/figma/auto-translation.mp4)

> [Customize the translation editor](/docs/general/translation-editor/) for more comfortable and effective work.

### Figma: Get translations

When your translations are ready in SimpleLocalize, you can now download them to Figma. Click on the **Pull translations** button to update all texts and available languages.

![Pulling translations from SimpleLocalize](/blog/figma/pull-translations.png)

### Figma: Switch your design language

Now, you can also c**heck how your design looks with texts in different languages**. In SimpleLocalize plugin, go to the language selector and try changing the language to another one. See how the texts on your design change.

![Getting texts in different languages from SimpleLocalize](/blog/figma/pull-translations.mp4)

## Conclusion

In conclusion, the SimpleLocalize Figma plugin is a transformative tool that simplifies the connection between design and localization. Providing a seamless interface and collaborative features ensures that your design not only speaks every language but speaks it well. Get started today and localize your design with ease!



Translation management with&nbsp;Figma plugin


It is becoming increasingly rare to see flags in language lists on many websites. Instead, we see a written list of languages, either in their original writing or in English. Flags seem to be disappearing from the UI of websites. And you, have you added flags to the language selector in your application?

People become more aware of the language inclusion problem, thus using flags to display languages become less popular than just a few years ago. It is also an interesting UI vs. UX issue: flags look nice, but they may insult some users. In this blog post, we will have a look at the issue of language representation in a language selector from different perspectives, and check what are the alternatives and good practices.

## Language selectors and language representation issue

With the increasing globalization of the internet, language selectors are becoming an essential tool to make sure that a website is accessible to all audiences. They allow users to select a language option they are comfortable with, thus improving accessibility and providing a better user experience. But choosing the right language selector and deciding where to put it on a website isn't as easy as it sounds.

Language selectors are often represented by flags, which can be problematic. Flags represent a country and not necessarily the language spoken in that country. This can lead to confusion and misunderstanding when it comes to representing different languages.

For example, Spanish is spoken in multiple countries, but the Spanish flag only represents Spain. The language is used in Chile, Argentina, Mexico and many other countries. Why would the Spanish flag represent Mexicans, Chileans, or other Spanish speakers who don't identify themselves with Spain? Similarly, French is spoken in multiple countries, but the French flag only represents France. How do Canadians, Belgians feel about their language represented by the French flag?

![Image showing different countries with Spanish language / flag](/blog/spanish-language.jpg)

**Flags don't accurately represent languages and can lead to miscommunication between people from different countries who speak the same language.** However, they are still in use and have many votes in favor, as they simplify the language selection and simply look nice. But, is this enough of an excuse? Let's go deeper and analyze the pros and cons of using flags to represent languages.

## Pros and cons of using flags to represent various languages

Flags have long been used as a way of representing cultures and languages around the world. While flags can be a powerful symbol of identity and pride, they can also be controversial due to their potential to cause political divisions.

### Pros

#### Pros: Flags are easy to understand

Flags are a powerful and universal, iconic language representation. They represent nations, countries, states, cultures, and ideologies in an easy-to-understand way. Their simplicity makes them easy to remember and recognize, making them an effective way to represent language in any format. When entering a website with the United Kingdom, Spain and German flags, users instantly know what languages the website supports.

![Sample language selector with language flags](/blog/language-selector-duolingo.png)

#### Pros: Flags are seen instantly
Without flags as a language indicator, it can more difficult to figure out the placement of the language selector. The flag icons are immediately associated with the option to select languages, so that when the user sees the flag, they immediately know where they can change the language on the site. Flag icons are more visual than the language name or code in written form.

#### Pros: Flags saves space
Using flags is a compact and efficient way to represent multiple languages, especially on websites or software interfaces where space is limited. A little round or rectangular icon will tell the user which language they are choosing and show all the languages available.

### Cons

#### Cons: Flags can cause misrepresentation
Flags are ubiquitous symbols of national pride, but when it comes to representing languages, they can be severely misleading. While many countries share the same flag, each may have a diverse collection of languages spoken within its borders. This means that simply relying on flags to represent language can lead to oversimplifications and even misunderstandings of the complexities of global communication.

#### Cons: Flag icons are limited
Flags only represent countries, so there is no flag to represent languages that are spoken in multiple countries or regions. Furthermore, there are no flags that could represent some non-official or semiofficial languages, for example, Marathi (used in India), Corsican or Cherokee. Naturally, we can try using a region flag, but what about people who use that language and do not identify with a region or country, or they live in different locations?

#### Cons: Using a flag as a representation of a language can be seen as cultural insensitivity
Some flags may carry **negative cultural or historical associations**, so using them to represent a language can be insensitive or offensive to some users.

For example, using the Spanish flag to represent the Spanish language can be culturally insensitive because it may be interpreted as ignoring the other official languages spoken in Spain, such as Catalan, Basque, and Galician. These languages have their own distinct cultures and histories and are important to the people who speak them.

Furthermore, it can also be connected to Spain's historical colonization and conquest of much of Central and South America. The use of the Spanish flag to represent the Spanish language in Mexico or Argentina may be particularly sensitive due to the country's history of colonization and subjugation under Spanish rule.

#### Cons: Flags add to the language inclusion problem

Some languages, such as indigenous languages or dialects, may not have a recognized or official flag, so using flags may exclude certain languages or cultures.

Flags can carry political and historical connotations that may be sensitive or offensive to certain groups of people. For example, the use of the Chinese flag to represent the Mandarin language can be controversial in Taiwan, where Mandarin is also spoken but the Taiwanese flag is more appropriate.

In some countries, multiple languages may be spoken, but using a single flag to represent the entire country's language can exclude or downplay the importance of minority languages.

#### Cons: Flags unite but also divide people

On one hand, flags can help unite people under the same banner and create a sense of pride in their shared language. On the other hand, flags can also be used to divide people and exclude those who don't fit into a particular category.

## Flags as language selectors and user experience

By displaying the flag of the user's language, it can enhance the user experience and make it easier for them to find content in their preferred language. On the other hand, however, they can generate negative emotions for visitors who are unfamiliar with the language or culture associated with a certain flag. The use of flags as language representation can lead to confusion and misunderstanding, which can ultimately affect the user experience.

Paradoxically, a visually clearer and pleasant-looking UI in terms of the use of flag icons in language selection may lead to poorer UX and overall worsen the experience of using the site.

## Alternatives to flag icons for international sites (tips for language selector)

When it comes to designing language selectors for international sites, many designers tend to rely on flag icons to represent different languages. However, as you could read above, this approach may not always be the best choice, so it is important to consider alternative options for language selectors.

### Use language names
Using language names in their native scripts or using simple text labels may be the best and the simplest option. The user should easily find the language name in its native script. Additionally, to make it easier for the user, order the list of languages alphabetically.

![Language selector with language names](/blog/language-selector-dubai.png)

### Use neutral, universal icons
Another option for language selectors is to use culturally neutral icons or symbols that are universally recognized, such as a globe, a book, or a speech bubble. They will look nice and won't cause misunderstandings.

![Language selector with universal icons](/blog/language-selector-universal-icons.png)

### Use language codes instead of flags
This is the option which can fully demonstrate the differences between the languages, without causing unnecessary friction. Use Spanish for Spain as es_ES, es-CL for Chile, es-CO for Colombia, ca for Catalan etc. Language codes are more widely recognized and understood than flags. This not only makes the language selector more accessible, but also helps to avoid any potential confusion or offense.

### Use language name and country flag together

An interesting option is to use both the flag icon and the language name together. The language name represents the actual language used for translations, and the flag will work as a visual country indication for where the language is used the most.

![LanguageTool - language switcher](/blog/language-selector-languagetool.mp4)

### Apply language automatically for user's region
By applying language automatically to the user's region, you can create a seamless and personalized user experience. This not only saves time for the user, but also makes the website more accessible and user-friendly. However, note that not all users are fans of automatic localization, they might prefer to read the site content in English than in the language used in their region. In this case, make sure the option to switch language is accessible and easy to find!

### Make language selector accessible
This is an essential topic when creating a language selector. Make sure that the language selector is easily accessible and prominently placed on the website. Not only does this make it easier for visitors to navigate the site, but it also proves that you value inclusivity and diversity. By making the language selector accessible and easy to find, you can attract a wider audience and improve the user experience for all visitors.

![placement of language selector example](/blog/language-selector-new-zealand.png)

## Conclusion. Is it time to move away from flag representation?

The language selector is a crucial feature for websites with a global audience. However, the traditional way of displaying language options through flags may not be the most effective method. The use of flags can often lead to confusion and misinterpretation, particularly if the flag does not match the language of the user. Moreover, flags are typically associated with countries rather than languages, which can lead to cultural insensitivity. This is particularly relevant when it comes to languages that are spoken in multiple countries, such as English or Spanish. Alternative methods may be more effective in ensuring accurate language selection. Overall, it may be time for businesses to reconsider their use of flag representation in language selectors and explore alternative options that are more user-friendly and culturally sensitive.

In SimpleLocalize, we gave our users an option to choose the language representation method for languages in our i18n translation editor. Languages always have their name or language code which defines the language best, but it is also possible to use flags for language representation or use a generic icon and just the language key.

![Flag and language icon options in SimpleLocalize languages](/blog/language-selector-simplelocalize.png)

Our advice: Be reasonable and think about how users who speak different languages might find your site. If you offer a service for European countries and your customer base is in Europe, and your website is translated into a few languages only, it will be probably ok to use the Spanish flag for the Spanish language, and the UK flag for English. The flag can indicate that written English on this site is English as written in the United Kingdom, or Spanish is Castilian Spanish.

What is important, is that you are here because you are creating or considering creating a language selector on your website or app. Providing multilingual, localized content for your audience shows that you care about your users and customers.

Localization is the key for happy customers and growing businesses, so think about getting SimpleLocalize to help you in this process and assist you in your daily work with your software translations. [Register now](/register/) and use our software created for simple translation management.


Flags in language selectors: should we keep or remove them?


In this article, I will share a list of country flag resources for your project. Free and paid options.
The list includes React-specific components that display country flags. I omitted projects that are just wrappers around other listed libraries.
Wrappers tend to be outdated and not maintained.

![Country flag projects comparison](/blog/country-flags/country-flags-data-page.png)

If you are curious about how different country flags projects compare to each other, take a look at the [country flags](/data/flags/) page, where we used 4 different libraries to display flags.

## Flag-icons<span class="font-weight-normal">,&nbsp;SVG flags with CSS integration</span>

[Flag-icons project](https://github.com/lipis/flag-icons) is a collection of all country flags in SVG, based on flags taken from Wikipedia. Flags are available in 2 formats: 4x3 and 1x1.
The project offers a CSS integration, thus uses only two-letter ISO 3166-1 codes for country codes.

![flag icons project](/blog/country-flags/flag-icons.jpeg)

```shell
npm install flag-icons
```

```tsx
import "node_modules/flag-icons/css/flag-icons.min.css";
````

The usage of the library is straightforward, and it looks as follows:

```html
<span className="{`fi" fis fi-${countryCode}`} />
```

- Use the `fi` class to display a flag,
- use the `fis` class to display a flag in a square,
- and the `fi-{COUNTRY_CODE}` class to display a flag for a given country.

`{COUNTRY_CODE}` is always a [two-letter country code (ISO 3166)](/data/flags/), for example `pl` for Poland.
Letters are always lowercase. Below, you can see a list of all available country codes and their flags from the package.

## Circle-flags<span class="font-weight-normal">,&nbsp;stylized country flags</span>

[Circle-flags](https://github.com/HatScripts/circle-flags) is also a collection of country flags in SVG format. They are a great choice for displaying flags in a small space,
but such feature comes with a price. These are not accurate representations of the flags, they are simplified and stylized to look good when viewed together.
The project uses only two-letter ISO 3166-1 codes for country codes.

![circle-flags project](/blog/country-flags/circle-flags.jpeg)

To use the flags, you can hotlink them from the project's GitHub page:

```html
<img src="https://hatscripts.github.io/circle-flags/flags/br.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/pl.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/ua.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/us.svg" width="48">
```

or you can install the package using npm:

```shell
npm install --save https://github.com/HatScripts/circle-flags
```

There is also a React wrapper for this library: [react-circle-flags](https://www.npmjs.com/package/react-circle-flags). Circle-flags also offers a collection of [language flags and locales](https://github.com/HatScripts/circle-flags/tree/gh-pages/flags/language).

## FlagCDN<span class="font-weight-normal">,&nbsp;free CDN for country flags</span>

[FlagCDN](https://flagcdn.com/) is a free CDN for country flags. It is a great choice for displaying flags in a small space.
The service offers a variety of flag sizes, and you can also use it to display flags in different formats, such as SVG, PNG, JPG, and WebP.

![FlagCDN project](/blog/country-flags/flag-cdn.jpeg)

## WorldData.info<span class="font-weight-normal">,&nbsp;retro GIF flags</span>

[WorldData.info](https://www.worlddata.info/downloads/) offers a collection of 249 GIF flags that may fit best for
retro stylized projects. They are available in 190x114 size. You can download them for €8 and use them in your project.

![WorldData retro GIF flags](/blog/country-flags/retro-flags.jpeg)

## Emoji flags<span class="font-weight-normal">,&nbsp;unicode country flags</span>

Emoji flags are a great way to display a country flag in a small space. They are also supported by most browsers and operating systems. You can use them in your project by simply copying and pasting the flag from the list below.
Remember that emoji flags may not be supported by all browsers and operating systems, and they look different on different devices.

![Emoji flags](/blog/country-flags/emoji-flags.jpeg)

You can get a full list of [emoji flags and country data](/data/flags/) using the following command:

```shell
curl https://cdn.simplelocalize.io/public/v1/countries
````

The JSON contains a list of countries with emoji flags in `flag` property.

## React-world-flags<span class="font-weight-normal">,&nbsp;inline SVG flags</span>
[React-world-flags project](https://github.com/smucode/react-world-flags) is a React wrapper for [Flag-icons](https://github.com/lipis/flag-icons), but here flags are rendered as **inline SVGs**, and it supports more country code formats.
You can use the `height` prop to set the flag height and the `code` prop to set the flag code. It supports ISO 3166-1 codes as two-letter (Alpha-2), three-letter (Alpha-3) and three digit (numeric) country codes.

![React World Flags](/blog/country-flags/react-world-flags.jpeg)

Installation

```shell
npm install react-world-flags
```

Usage

```tsx
<Flag code="nor" height="16" />

// Output <img src="data:image/svg+xml..." height="16">
```

### FlagKit<span class="font-weight-normal">,&nbsp;flags for iOS developers</span>

[FlagKit](https://github.com/madebybowtie/FlagKit) offers a collection of attractive flag icons that can be utilized in
various applications and websites. Each flag is available in individual PNG and SVG files, and there is also an Asset
Catalog and framework designed specifically for Apple platforms, making integration effortless.

![Flags by FlagKit for iOS developers](/blog/country-flags/flag-kit.jpeg)


List of country flag icon projects


If you want to jump straight to the code, you can find it on [GitHub](https://github.com/simplelocalize/nextjs-tailwind-language-selector),
and the most important part is in the [src/components/LanguageSelector.tsx](https://github.com/simplelocalize/nextjs-tailwind-language-selector/tree/main/src/components).
However, we recommend reading the whole article to understand how exactly building a language selector works.

The article assumes that you have some basic knowledge of React and Tailwind CSS.
We also assume that you already configured Next.js, Tailwind and any internationalization library in your project.

For a very long time, SimpleLocalize was not showing flags next to languages in our languages' lists because we wanted to avoid making it wrong. We did not want to assume that a language is always associated with a country.
However, eventually, we have decided that flags are a must because they highly improve user experience and translation performance;
it is far easier to just look at the flag and determine the language this way instead of reading the language name.

![Languages with flags in SimpleLocalize](/blog/language-selector/translation-project-languages-with-flags.png)


Recently, we also started getting many requests from our users to add flags to the [Translation Hosting](/docs/general/translation-hosting/) or
add an option to download them, mostly for the need of using them in language selectors.
In response, we would like to share our solution. We are going to show you how to create a language selector with flags using Tailwind CSS.

## What are we going to build?

We will create a language selector that allows users to switch between different languages.
The language selector will be a dropdown that will show a flag next to each language.
For that purpose, we will use Tailwind as CSS framework, Next.js as a React framework, [react-i18next](/docs/integrations/next-i18next/) package
for translations of our mini app, and [flag-icons](https://github.com/lipis/flag-icons) package for flags.

![Language selector demo with Tailwind](/blog/language-selector/language-selector-tailwind-demo.png)

## Get country flags

We will start by creating a component that will display a flag for a given country. We will use the
[lipis/flag-icons](https://flagicons.lipis.dev) package to show flags.

First, install the package using npm or yarn.

```shell
npm install -s flag-icons
```

Let's now import the CSS in `_app.tsx` from the `node_modules` and we are ready to use the flags.

```tsx
import "node_modules/flag-icons/css/flag-icons.min.css";
````

The usage of the library is straightforward, and it looks as follows:

```html
<span className="{`fi" fis fi-${countryCode}`} />
```

- Use the `fi` class to display a flag,
- use the `fis` class to display a flag in a square,
- and the `fi-{COUNTRY_CODE}` class to display a flag for a given country.

`{COUNTRY_CODE}` is always a [two-letter country code (ISO 3166)](/data/flags/), for example `pl` for Poland.
Letters are always lowercase. Below, you can see a list of all available country codes and their flags from the package.

![SimpleLocalize flags page](/blog/language-selector/flags-page.png)

See the [full list of flags](/data/flags).

## Build a language selector

Now that we have a component that displays a flag, we can create a language selector component.
We will use the `useTranslation` hook from the `react-i18next` package to get the list of languages and the current language.

```tsx
const {i18n} = useTranslation();
const [isOpen, setIsOpen] = useState<boolean>(true);
const handleLanguageChange = async (language: Language) => {
    await i18n.changeLanguage(language.key);
    setIsOpen(false);
};
```

### Fetch application languages

We will start by fetching the list of languages from the SimpleLocalize CDN. We will use the `_languages` endpoint to get the list of languages.
However, it is optional, as you can also hard-code the list of languages in your application.


```tsx
    const [languages, setLanguages] = useState<Language[]>([]);
    useEffect(() => {
        const setupLanguages = async () => {
            const appLanguages = await fetch("https://cdn.simplelocalize.io/{YOUR_PROJECT_TOKEN}/_latest/_languages").then(response => response.json());
            setLanguages(appLanguages);
        };
        setupLanguages();
    }, []);
```

Let us create a new state variable called languages and use `useEffect` hook to fetch a list of available languages from the CDN using fetch API.
But you can use any other HTTP client library you prefer, like axios, superagent or useQuery.

### Configure outside click handler

Whenever we click outside the language selector, we want to close it. We will use the `useEffect` hook to add a click handler to the `window` object.

```tsx

    const LANGUAGE_SELECTOR_ID = 'language-selector';
    useEffect(() => {
        const handleWindowClick = (event: any) => {
            const target = event.target.closest('button');
            if (target && target.id === LANGUAGE_SELECTOR_ID) {
                return;
            }
            setIsOpen(false);
        }
        window.addEventListener('click', handleWindowClick)
        return () => {
            window.removeEventListener('click', handleWindowClick);
        }
    }, []);
```

In this example, we use the `closest` method to find the closest parent element that matches the selector.


### Add selected language button

Now that we have all the necessary data, we can create the language selector. We will start by creating a button that will display the selected language.
We will use `i18n.language` to get the currently selected language for the app to find the language object for the selected language key.
Language object will be used to display the flag and the name of the language.

![Language selector button](/blog/language-selector/language-selector-button.png)

```tsx
const {i18n} = useTranslation();
const selectedLanguage = languages.find(language => language.key === i18n.language);
// ...

<button
    onClick={() => setIsOpen(!isOpen)}
    type="button"
    className="inline-flex items-center justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
    id={LANGUAGE_SELECTOR_ID}
    aria-expanded={isOpen}
>
    <FlagIcon countryCode={selectedLanguage.key}/>
    {selectedLanguage.name}
    <svg
        className="-me-1 ms-2 h-5 w-5"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
    >
        <path
            fillRule="evenodd"
            d="M10.293 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L10 12.586l3.293-3.293a1 1 0 011.414 1.414l-4 4z"
            clipRule="evenodd"
        />
    </svg>
</button>
```

- `FlagIcon` component is a wrapper around the `span` element that displays the flag. It's useful because we can override a flag for a given language.
- The `svg` element is used to display the chevron icon that indicates whether the dropdown is open or not.
You can extract it later into a separate component or use any other icon of your preference.
- `onClick` handler will toggle the dropdown.
- `id` attribute will be used to identify the button for the outside click handler.


### Add language selector dropdown

Now we can create the language selector dropdown that will appear when `isOpen` state is set to `true` and load inside the list of languages based on the `languages` state variable.
We used `grid grid-cols-2 gap-2` classes to display the list of languages in two columns.
We also used `rounded-r` and `rounded-l` classes to round the corners of right and left language entries.

![Language selector dropdown](/blog/language-selector/language-selector-dropdown-list.png)

```tsx
{isOpen && <div
    className="origin-top-right absolute right-0 mt-2 w-96 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
    role="menu"
    aria-orientation="vertical"
    aria-labelledby={LANGUAGE_SELECTOR_ID}
>
    <div className="py-1 grid grid-cols-2 gap-2" role="none">
        {languages.map((language, index) => {
            return (
                <button
                    key={language.key}
                    onClick={() => handleLanguageChange(language)}
                    className={`${
                        selectedLanguage.key === language.key
                            ? "bg-gray-100 text-gray-900"
                            : "text-gray-700"
                    } block px-4 py-2 text-sm text-start items-center inline-flex hover:bg-gray-100 ${index % 2 === 0 ? 'rounded-r' : 'rounded-l'}`}
                    role="menuitem"
                >
                    <FlagIcon countryCode={language.key}/>
                    <span className="truncate">{language.name}</span>
                </button>
            );
        })}
    </div>
</div>}
```

## Ready to use language selector

In this tutorial, we created a language selector component that uses flags to represent languages.
We used the `react-i18next` package to get the list of languages, the current language and translate our mini application.

With those few steps, we created a language selector that can be used in any React application.

![Tailwind language selector demo](/blog/language-selector/language-selector.mp4)

## Our tips for creating a language selector

Building a language selector is not a trivial task. There are many things to consider,
and we will share some of our tips that we learned while building many language selectors over the years.

### Languages don't have flags
Remember that the country's flag might not be the best option to represent a language.
For example, the flag of the United Kingdom is used to represent English, but it is also used to represent Welsh, Scottish Gaelic, and Cornish.
However, flags are a good option if you plan to support only a few languages, so they will not overlap with the countries. They also look nice and are easy to understand.

### White parts of flags can be problematic

Some flags have a white part, which can be problematic when used on a light background. In this tutorial, we solved this
by setting an inset border on the flag, to make it stand out from the background.

```scss
.fiCircle {
  width: 24px;
  height: 24px;
  font-size: 24px;
  border-radius: 100%;
  border: none;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .06);
  background: white;
}
```

The inset border is a `box-shadow` property, which makes it appear inside the element.
Look how the Polish, French and Italian flags are looking with and without the inset border.

![add box-shadow with inset for flags](/blog/language-selector/box-inset-for-flags.jpg)

It will make the white part stand out from the background and will not affect the rest of our flags significantly.

### Complex flags in small sizes might look bad

Some flags are more complex than others. For example, the flag of Spain has a coat of arms in the middle.
In this case, we can use a simple trick to make it look good. We can use a `background-size` property to make the flag smaller.

![Complex flags icon problem](/blog/language-selector/complex-flags-problem.jpg)

In small sizes, the coat of arms is not visible, and it does not look as good as other flags. All flags are in SVG format, so we can adjust them to our needs.
But note that altering flags is not always a good idea because it can be considered as a violation of the flag code.

### Country codes are always lowercase
Country codes are always lowercase. This is important because [flag-icons](https://flagicons.lipis.dev) package uses lowercase country codes in the CSS class names.
Remembering about this can save you a lot of time because you will not have to debug why your flags are not showing up. 😉

![Flag icons CSS](/blog/language-selector/flag-icons-css.png)

I hope this tutorial was helpful, and you learned something new. Thanks for reading!
If you are looking for language selector inspiration, check out our [language selector examples](/blog/posts/ui-design-language-selector-examples/) blog post.


How to create a language selector with Tailwind CSS


Language selectors play a crucial role in the user experience of a website, particularly for multilingual sites. They allow users to effortlessly switch between languages and access translated versions of the content.

In this blog post, we'll explore ten captivating language selectors used by both well-known brands and lesser-known apps, providing inspiration for creating a perfect selector for your own application.


## 10 most beautiful language selectors

Here, we present a list of the most beautiful and interesting language selectors we have found, along with some tips on why they work so well.

### Mango

![Mango region selector](/blog/language-selector-mango.png)
**Mango** is a clothing company that offers its products in various markets worldwide. To meet the diverse language needs of its customers, Mango has implemented the following language selector.

Mango's language selector stands out because it lets users choose their region, which automatically applies the appropriate language for that market. This simple yet effective design ensures that **users can set their preferences right before entering the website, without the need to adjust settings while shopping**.


### Discord

![Discord language selector](/blog/language-selector-discord.png)
The popular messaging and communication app, **Discord**, showcases its language selection **in the website footer**. This unobtrusive placement ensures that users can easily change their region and language settings without disrupting their browsing experience.


### JetBrains

![JetBrains language selector](/blog/language-selector-jetbrains.png)
**JetBrains**, a renowned software company, provides its website in multiple languages. Their language selector, conveniently located **at the top of the page**, offers users a smooth and visually appealing select option.


### Wix

**Wix**, a website building platform, offers really nice language selection in the website header. On click on the language button, you can choose from the available language options from a **nice, spacious modal view**.

![Wix language selector 1](/blog/language-selector-wix-1.png)

![Wix language selector 2](/blog/language-selector-wix.png)


### Mews

![Mews language selector](/blog/language-selector-mews.png)
**Mews**, a property management system for hotels, incorporates a **flag-based language selector**. With just one click, users can easily switch the website's language and instantly see their location identified by icons.


### Ikea

![Ikea region selector](/blog/language-selector-ikea.png)
**Ikea**, available worldwide, adopts a **region selection approach** before users enter the actual website or shop content. This thoughtful strategy ensures that users experience content tailored to their location without having to search for language options while browsing.


### Booking.com

![Booking.com language selector](/blog/language-selector-booking.png)
**Booking.com** employs a flag icon for its language selector, which, when clicked, opens a **larger modal with a comprehensive language selection**. The use of flag icons helps users easily identify and choose their language based on their country.


### Tesla

![Tesla language selector](/blog/language-selector-tesla.png)
**Tesla** asks for users' region and language preferences upon entering their website. The setting is also accessible in the menu, offering users flexibility to change their choice as needed.


### Spotify

![Spotify language selector](/blog/language-selector-spotify.png)

The language and region selection on **Spotify**'s website are conveniently located at the bottom of the main page, within the footer. The subtle icon blends perfectly with the site's aesthetics, providing users with an **option to change settings without disrupting the website layout**.

![Spotify language selector](/blog/language-selector-spotify-2.png)


### Duolingo

![Duolingo language selector](/blog/language-selector-duolingo.png)
As a language teaching platform, **Duolingo** offers a prominent and easily accessible language selector to cater to users' diverse language needs. This ensures that users can start their learning journey in a familiar translation.


## How to choose a language selector?

A well-designed and accessible language selector can significantly enhance the user experience and boost website traffic through localization. Whether you place the language selector at the top of the page, in the footer, in the settings, or even as an option before entering the page, it's crucial to ensure its visibility and accessibility.

When choosing a language selector, it's important to consider the following factors:

### Visibility and accessibility

The primary goal of a language selector is to allow users to switch the website's language effortlessly. Therefore, it must be easily visible to your users. However, avoid making it overly prominent as it serves as a configuration element, not a main content or action button.

### Avoid using flags as language representation

While using flags might seem like a straightforward way to represent languages, it can be problematic. Flags may not accurately represent all languages spoken in a specific region, and they can also lead to confusion and miscommunication. Learn more about different approaches to language representation in a language selector in our blog post titled [Flags in language selectors: should we keep or remove them?](/blog/posts/flags-as-language-in-language-selector/)

### Customization and design

Consider designing a language selector that complements your website's overall aesthetics and branding. A thoughtfully designed language selector can add a touch of elegance and professionalism to your site while offering a seamless user experience.

### User testing and feedback

Before finalizing your language selector, conduct user testing and gather feedback from a diverse group of users. This will help you identify any potential usability issues and make necessary improvements to ensure a smooth language switching process.

### Implement localization services

To make the translation process easier and more efficient, consider using reliable localization services like [SimpleLocalize](/). With a intuitive translation management solution you can streamline the translation and localization of your website or app content, making it accessible to a global audience effortlessly.

By following these guidelines and considering the needs of your target audience, you can design and implement an effective language selector that enhances user experience and fosters a more inclusive online environment. Happy localization!

> Interested in building your own language selector? Discover a step-by-step guide in [our latest blog post on creating a language selector using Tailwind CSS](/blog/posts/create-language-selector-with-nextjs-and-tailwind/).

Translation Hosting

SimpleLocalize CLI

REST API

Auto-translation

Alternative translations

Design

Translation management with Figma plugin

Flags in language selectors: should we keep or remove them?

List of country flag icon projects

How to create a language selector with Tailwind CSS

UI Design: Language selectors