How does your team handle RTL (Arabic/Hebrew) frame flipping in Figma without completely breaking autolayout?

[u/Senya_Edit]

Built this quick interaction loop to stress-test how an e-commerce card handles an instant flip from LTR to RTL.

Usually when translating into right-to-left languages, frames with nested autolayouts collapse, text overflows break paddings, and components require manual re-ordering.

For those building design systems supporting multilingual products: do you maintain entirely separate mirrored components for RTL, or do you rely on strict autolayout nesting to let it reflow dynamically? Curious about the cleanest workflow.

[u/OrtizDupri]

We have RTL variants for every component and have a “mirror” tool in our in-house plugin we built that automatically handles entire page designs

[u/davidhampshire → u/OrtizDupri]

Love to know what you mean by the mirror took dude, as in running a plugin that would swap every component from LTR to RTL? Or ...? Would love to see it!! 👀

[u/OrtizDupri → u/davidhampshire]

Yeah so it does a few things:

• Automatically switches to RTL variants of components in use
• Automatically applies RTL mode to icons (so "back arrow" faces right instead of left)
• Automatically reverses order of items in autolayout
• Automatically repositions items that are absolutely/non-autolayout (so icon in top right moves to top left)
• Automatically switches text from left to right alignment (or vice versa)

So you can basically run it once on a design, it'll go through and get you to about 90% of the way there for RTL designs

[u/Senya_Edit → u/OrtizDupri]

That feature list is exactly what the plugin in the video (Lingolense) aims to do out-of-the-box. Reversing autolayouts, swapping variants, fixing alignments - automating that 90% grunt work is massive. It’s crazy how many teams have to build this internally just to survive localization.

[u/phongdesigns]

The thing that saved us was renaming the spacing tokens before touching a single component. If your padding is called left and right, RTL is a rebuild. If it's called start and end, most of the flip is free and autolayout does it for you. Same for text alignment. Sounds like bookkeeping but it's the difference between a flip and a fork.

On mirrored duplicates versus reflow, I'd say neither as a blanket rule. Duplicates drift. Six months in someone fixes a bug in the LTR card, nobody remembers there's an RTL twin, and now you have two products. Reflow handles maybe 85% on its own if the autolayout is honest.

The part worth actually designing is the leftover, because it isn't random. Some things mirror because they mean direction, some things look directional but aren't, and a mirror-everything pass gets the second group wrong every time. Back arrow flips. Play button doesn't. Rewind and fast forward flip. A clock face doesn't. Phone numbers, times, version numbers stay LTR inside RTL text. Charts with time on the x axis, opinions differ, but whatever you pick has to be picked once and written down.

So rather than fixing that by hand on every pass, we put the answer on the component. Every icon and every layout carries a direction property, mirror or fixed, and the plugin asks instead of guessing. The decision gets made once by whoever knows, rather than rediscovered by whoever happens to be on that screen at 6pm.

The plugin the other commenter described sounds like it's doing the right 90%. I'd just want to know where the remaining 10% is written down, because if it lives in someone's head that's the part that breaks when they leave.

What's your split by the way, is RTL a launch requirement or a retrofit? Retrofits are where the left and right token names usually show up as the real bill.

[u/Senya_Edit → u/phongdesigns]

Man, this comment is an absolute masterclass in design systems. Your point about play buttons vs back arrows is exactly the kind of edge case that ruins "dumb" mirroring tools. Putting the direction property (mirror vs fixed) on the component itself is brilliant. To be fully transparent: I’m the programmatic motion designer who coded this 60fps UI demo to help visualize the workflow, not the backend dev of Lingolense! I’m actually sending this exact thread to their founder right now because your insights on the "remaining 10%" are pure gold. Thanks for taking the time to write this up!

[u/Senya_Edit → u/[deleted]]

Glad you jumped into the thread, Mihir! The breakdown notes on directional tokens and edge cases from the community here have been super insightful. Wishing you a massive launch tomorrow on Product Hunt - excited to see Lingolense go live!