Arc XP LogoArc Design System
v2.3.0
GuidesPatternsComponentsIcon libraryTokensRelease notes
Github repo
Arc XP LogoArc Design System
v2.3.0
Getting started
ConfigurationInstallationUsing Stitches
Design guides
AccessibilityFigma component designInternationalization
Development guides
Component designContributingDeveloping locallyLayoutQuality checklistZeplin integration

Internationalization

Arc XP has clients in 25+ countries and serving more than 1,500 sites that reach more than 1.5 billion unique visitors monthly.

Arc XP has clients in 25+ countries and serving more than 1,500 sites that reach more than 1.5 billion unique visitors monthly. Culture and usability are deeply rooted in language and affect how users interact with and benefit from our designed experiences. When working on any part of Arc XP, it is important to think about localization from the beginning. The design decisions you make early in the project can make or break rolling out your project to supported markets as the work gets developed. Arc XP currently supports six different languages, including:
  • English
  • French
  • German
  • Japanese
  • Korean
  • Spanish (Latin American)
Portuguese, Swedish, and Norwegian are also available for select product features in a small set of Arc XP products. In addition to translation, localization also includes thinking about the cultural influences that might affect your design. Common functionality that might need more attention include search, displaying date and time, as well as any unit of measurement (ex. metric system vs imperial system for units). Here, you'll find recommendations and guardrails for how to start creating user experiences that are scalable globally, and concepts to better understand how varied our user landscape is. You will also learn about our translation process and how design supports this process.

#Localization and design

Translated content can impact the layout and how the interface appears depending on the language. Below is an example of how the size of the copy can vary per language:

#Arc XP and Lokalise

Lokalise ****is a translation management platform Arc XP uses to translate and manage our content. While each product team might have slightly different workflows, Lokalise is integrated into our development workflow for all Arc XP products. Design supports the translation process by including design mock ups, which provide our translators with context for the copy. Also, in more specific cases, a designer can use the ****F**igma integration** to automate different languages into their designs to get an idea of how the copy affects the layout.

#Internationalization quality checklist

  • Assume text will grow or shrink
    • The text may not fit in the container you’ve designed. See the example below, which shows the remaining text that won’t fit onto the button, meaning that the button would need to be extended
  • Consider how right-to-left would work within a design (note: while not currently supported, this is functionality that we expect to support in the coming years)
  • Consider how character-based languages affect UI
  • Stress test designs in table formats to ensure the copy fits
  • Stress test designs with words with many letters - Germanic/Scandinavian-based languages tend to make new words by combining multiple words into a single word
  • Keep in mind the minimum width for designs and how character size can vary for specific languages
  • If the design is complex, or the copy can be interpreted multiple ways, always provide translators with context by including a screenshot
Copyright 2021 Arc XP