How to structure your Figma file so translations stay accurate and your layout survives longer text.

Lingolense translates the words and preserves your styling — but how accurate the result looks depends a lot on how the design is built. Translated copy is often longer than the original (German and Finnish can run 30–40% longer than English), so a design that flexes will absorb that automatically, while a rigid one will clip or overlap. Follow the practices below to get the best results with the least clean-up afterwards.

Build with Auto Layout

Use Auto Layout on frames that hold text — buttons, chips, cards, list rows, banners. Auto Layout lets a container grow or shrink around its content, so when a translation gets longer or shorter the box adjusts instead of clipping the text.

Why it matters

A fixed-size frame keeps its dimensions no matter what's inside it, so longer translated text spills past the edge or gets cut off. An Auto Layout frame re-flows around the new text automatically.

Let containers hug and text resize

Inside an Auto Layout frame, set resizing so the layout can respond to length:

Set the frame to Hug contents

Give the container Hug on the axis where the text grows (usually width for a button, height for a paragraph). The frame then tracks the text size instead of staying fixed.

Set text layers to Auto width or Auto height

For short single-line labels use Auto width so the layer grows sideways. For multi-line copy use Auto height with a fixed width so text wraps down instead of running off the side.

Turn on wrapping for reflowing rows

If a row of items should reflow onto the next line as it fills up, enable Wrap on that Auto Layout frame. Longer translated items then move to a new line instead of overflowing the row.

Avoid manual line breaks

Don't hard-wrap copy with the Enter key to force line positions. A manual break that looks right in English lands in the wrong place once the text is translated. Let text wrap naturally (fixed width + Auto height) so the translation reflows on its own.

Keep each string whole and in one layer

One phrase, one text layer. Don't split a single sentence across several layers, and don't stack unrelated strings into one layer separated by line breaks — both hurt translation accuracy and context.
Don't outline or flatten text. Text converted to vectors or baked into an image can't be read or translated. Keep it as live text layers.

Give the translator context

Name your layers meaningfully. Clear names (cta-primary, pricing-caption) give the AI engine helpful context for choosing the right wording.
Use text styles consistently so bold, size, and colour are re-applied cleanly across the translated text.

Leave room to grow

Prefer padding + Hug over a hand-set fixed width for buttons and labels, so they expand with longer copy.
Give tight, single-line elements a little slack rather than sizing them to the exact English string.
Make sure the fonts in your design can render your target script — this matters most for right-to-left and CJK languages.

Catch problems automatically

Turn on Overflow detection (Pro and above) to flag any layer whose translated text is likely to clip or spill, so you can fix it before it ships. On the AI engine, Lingolense also tries to fit the translation to the available space up front.

Quick checklist

Auto Layout on text containers ✓
Frames set to Hug, text set to Auto width / Auto height ✓
Wrap enabled on rows that should reflow ✓
No manual line breaks; no outlined or image text ✓
One phrase per layer, layers named meaningfully ✓
Fonts support the target script ✓

Design best practices