Show HN: LocaleProof – catch internationalization text overflow in Figma(figma.com)

1 pointsby AnatolySkuba3 วันที่ผ่านมา2 comments

Show HN: LocaleProof – catch internationalization text overflow in Figma

https://www.figma.com/community/plugin/1652797384930391326

3 comments

i18nagentai3 วันที่ผ่านมา

AnatolySkuba3 วันที่ผ่านมา

Hi HN! Frontend dev here. At my day job the same bug kept shipping: layouts look fine in English, then the German translation (+35% length on average) overflows a fixed-width button in production.

   Devs know pseudo-localization from the code side, but designers never see it — by the time strings come back from translators, the design is "done". LocaleProof runs pseudo-localization and worst-case length expansion directly on Figma text layers and checks every
 text node against its container, so overflow shows up at design time.

   Technical notes: pure client-side (TypeScript + esbuild + React in the plugin iframe), no backend, manifest networkAccess: none. Per-language expansion ratios are baked in from published localization data; restore is one click (originals are cached before mutation).

   Free on Figma Community: https://www.figma.com/community/plugin/1652797384930391326. Curious how your team catches i18n layout bugs today.

gus_massaเมื่อวาน

I was going to ask for

> Pseudo-localization — accented characters, length padding, and bracket markers so untranslated and clipped text is obvious.

When I was young there were a lot of problem with Spanish text with "ñ" and accented vowels. I still see a few <?> in webpages from time to time. Do you have a few examples?