Localization at the Design Stage & Text Expansion in Figma

Localization at the design stage is a principle which empowers teams to begin the localization process before development of an app or software starts. By using the UI design of the app before development begins, text that requires translation can be extracted from the designs to kick-off localization early on in the process; starting localization early saves teams valuable time to market. By addressing localization during the design phase, companies can significantly reduce the time and cost of adapting their products for different markets and locales.

A key consideration for localization at the design stage is text expansion. The translated text often takes up more space or requires more characters than the source text used when designing the app. It is very common when translating content from one language to another since languages can vary drastically in characters, grammar, syntax, and overall word lengths.

Text expansion can result in layout issues, truncation, or general UI problems if not properly accounted for before or during the localization process. Examples are text being cut off or overflowing to overlap other text elements.

However, adjusting design files to account for different languages can be a tedious task for even the most experienced designers. Luckily, the Figma Auto-Layout properties can be applied to your designs to streamline the localization process.

The Figma Auto-Layout property options is a powerful tool you can add to frames and components. It enables you to create designs that grow and shrink to fit in response to text changes. This way, this Figma feature can save you time and prevent headaches as your designs automatically adjusts to longer translated text.

Auto-Layout Properties for Design Localization

There are several Auto-Layout options that are helpful for localizing designs. These options and properties, when applied to a frame, element, or component, ensure you have a smart design element that is responsive to resizing, as needed, per language. You can even nest Auto-Layout frames within one another to create completely responsive designs of complete screens.

Below are some examples of commonly used Figma Auto-Layout properties and how they can be used for localization at the design stage.

Resizing

Resizing is one of the most versatile ways to improve the responsiveness of a design for localization purposes. This behavior determines how frames change in response to their contents. You can set elements to stretch, shrink, or maintain their size. You also have the option to adjust both vertical and horizontal values independently. Some of the most helpful resizing options include:

• Hug - this sets the frame’s dimension based on the size of the child objects. If you resize a layer or add more items, the frame will adapt to the changes.
• Fixed - this sets the size of a frame or nested item to a specific value.
• Fill Container - for child objects, this allows the child objects to resize to match the width or height of the parent frame.
• Min width/height - defines the minimum resizable width/height of an item.
• Max width/height - defines the maximum resizable width/height of an item
• Constraints - controls the direction that frames will expand when reacting to changes in content size

Direction

Another Auto-Layout property is Direction. You can set the direction of a frame to either horizontal or vertical. This determines whether the elements inside the frame are arranged horizontally or vertically. There’s also the option to wrap content. This is particularly useful as it allows content elements to wrap to a new line in response to text expansion.

Spacing & Padding

Auto-layout also has the option to easily adjust spacing between items and the padding surrounding items. Both of these can be manipulated either in the Auto-layout panel or directly on the canvas. This can be helpful when components' size changes thanks to text expansion. For example, you can expand the padding between elements to prevent text overlap.

Advanced Auto-Layout Properties

There are a few more advanced Auto-Layout properties that can help more easily adjust designs to different languages.

• Gap Settings - By default, the spacing mode will space children with a fixed value, but if you choose auto instead, this will allow objects to be evenly distributed in the space between the objects.

• Canvas Stacking - this option allows you to change the direction of Auto-Layout children stack to control how items will overlap. This option is great for updating the stacking direction when switching between LTR and RTL languages.

Resources

Many of these options are combinable to produce a complex layout that is easier to adjust per language. You can even add an Auto-Layout frame within another Auto-Layout frame. While we tried to call out some of the most helpful options, please note that this is not an exhaustive, nor complete list of all available Auto-Layout properties.

For more detailed information on enabling and using Auto-Layout in your Figma designs, see Figma’s documentation for Using Auto-Layout and Exploring Auto-Layout Properties. Figma even provides an auto layout playground so you can experiment and learn your way around each option.

Final Thoughts

By leveraging these Auto-Layout features, designers navigate localization intricacies more easily, creating visually cohesive designs ready for all markets. Integrating localization into the design stage eases the development effort coming after, helps to spot and solve issues early, and encourages successful global launches. Figma's Auto-Layout properties act as a valuable toolkit, empowering designers to craft designs that transcend language barriers and resonate globally.