figma plugin · self-initiated
lipi
a figma plugin that pressure-tests a screen against localized copy, then points at the component causing the break.
- role
- design + direction, built with ai
- context
- self-initiated · localisation testing
- year
- 2026
about
interfaces are usually designed in one language and adapted to many others later. but languages don't simply replace words, they change the geometry of a layout.
the project explores a question: what if localization could be treated as a design-system stress test rather than a translation task?
lipi is a figma plugin that pressure-tests interfaces across indian languages. it translates screens, measures how language changes their geometry, and points at the component behind the break.
credits
- creative direction, product strategy
- evana sajan
- ui & ux design
- evana sajan
- coding & development
- claude, chatgpt
try it
open full screentick a language, then press generate and test. the demo dictionary runs with no api key, so the whole loop works: it localizes the frames, measures what moved, and marks the components that broke.
product thesis
ai has made translating products into new languages almost trivial. designing interfaces that survive those translations isn't.
behind the experience
select
point it at the english frames you care about
generate
a clone is translated and re-measured
/never writes to your file
preview
the localized version lays over the original; reveal draws the measurements
export
the only permanent write in the whole tool
designed for systemic fixes
localization testing is usually treated as a screen-by-screen qa task.
we designed lipi to find the decision behind the failure.
a translated button overflowing on six screens isn't six problems. it's one component problem. lipi connects individual failures back to their shared cause.
don't just find what broke. find what caused it.
the goal wasn't to help designers fix more localization issues. it was to help them fix fewer things that solve more problems.
one design · multiple scripts
lipi scans the same checkout across hindi, tamil, bengali and kannada in one pass: four language tabs, six screens each, eleven findings, and it flags each script's clipped cta on the canvas.
preview · reveal · compare
english fits, hindi overflows. lipi reveals the pressure in context, and its reveal panel names the exact layer and the recommended fix.
fix · re-check
you apply the fix (the button hugs its label); lipi re-checks the same screens and confirms. lipi doesn't auto-decide: the designer applies, lipi verifies.
screen → component → system
three separate screen-level failures collapse into one root cause. lipi's design system tab: one decision, many resolutions.
interaction design
lipi is a lens.
recognition over reading. the canvas is the narrator; the panel stays quiet.
two lenses, never merged. per-screen triage (fix now) and systemic root cause (fix once) are different jobs.
preview by default. see it localized on the canvas immediately. problems should feel real, not tabular.
one accent, calm colour. no dashboard, no ai theatre. credibility over impressiveness.
optimize for clearing issues, not counting them. the whole loop is built to reduce the number, not admire it.
the tool does the checking and the bookkeeping. the designer decides what should change.
never touch the original
preview lays a hidden clone over the original; reveal draws locked overlays and drops you back on the editable layer.
roll the failures up
fix the button once and watch the count fall across every screen it appears in.
system design
every flag is geometry: the baseline bounds, the localized bounds, and the growth between them. the interface never shows a severity score it cannot justify.
select → the frames you care about
generate → clone, translate, re-measure
preview → localized over original
reveal → the exact layer, and the fix
export → the only permanent write
languages · hindi and tamil today, the script ranges written for more
edge cases
the final phase focused on making localization testing resilient to the messy parts of real design systems.
no frames selected / missing translation api key / external-library components / unsupported fonts / empty results / multiple languages / preview toggled mid-run.
multi-language tests are treated as separate lenses over the same system. designers can switch between language reports without losing the shared findings.
at the end of the loop, re-check compares the fixed state against the original findings, showing what disappeared, what remains, and how the issue count moved.
the edge case isn't an exception to the workflow. it is part of the workflow.
results
issues aggregate into root causes, so the count falls by component rather than by screen.
reveal
locked overlays on the canvas, and the editable layer still underneath.
before · after
one component learns to hug its label, and six screens stop breaking.
in place
the plugin sits in the file you are already working in.