Getting Started

If you haven’t tried the plugin yet, you can find it on the Figma community page.

Mirror a Frame

RTL Layout seamlessly operates at both the frame and component levels, to start mirroring:

Launch the plugin
Make sure that you are in the frame tab
Select a single frame. (The plugin is currently limited to one frame at a time to avoid crashing during the mirroring process of multiple frames)
Click the “Mirror Frame” Button

Translate Text

The plugin operates at the frame or component level. It translates all text layers found in the selected frame or component. To enable translation:

Click the “Translate text layers” toggle
Select the language in your design that you wish to translate from the “From” dropdown menu (Currently the plugin does not auto-detect languages.)
Select your target language from the “To” dropdown menu
If you haven’t mirrored your design yet, you can click on the “Mirror & Translate Frame” button to mirror and translate the frame simultaneously. If you have already mirrored your design, click on the “Translate Text Only” button

Mirror a Component

To mirror a component:

Go to the Component tab in the top bar
Select a single component or a component set (a component that has variants)
Enable translation if you wish to
Click the “Mirror Component” Button

Create RTL Variant(s)

RTL Layout lets you generate variants of your component which can help you maintain a bidirectional design system.

Go to the Component tab in the top bar
Select a single component or a component set (a component that has variants)
Enable translation if you wish to
Click on the “Create RTL Variant(s)” toggle
Click on the “Create RTL Variant(s)” button

The plugin will generate new variant(s) of your component with an RTL property that is set to True while keeping your original variants but adding the RTL property to them but it will be set to False.

What does the Revert buttons do?

To address layers that encounter issues after mirroring your design, you can utilize the revert buttons. These buttons essentially act as 'undo' functions, offering two options.

Revert Parent Layer & Children: Reverts both the parent layer and its children.
Revert Children Only: This option reverses the mirroring of the inner layers, leaving the parent layer intact and in place.

Depending on your specific use case, you can use either of these buttons to resolve individual layer issues effectively.

Mirroring Behaviour

Table of Contents