Developers

Search

Developers

Search

Best practices for setting up RTL on your site

Learn how to configure right-to-left (RTL) layout support so your site reads correctly in languages like Arabic and Hebrew.

This guide walks through enabling RTL, using layout-aware variables, and handling common design adjustments.

How to enable RTL support on your site

Framer supports RTL layouts through the Reverse layout setting. When enabled, layout systems like stacks and grids automatically flip when an RTL locale is active.

To enable RTL support:

  1. Open your project in Framer.

  2. Go to Site settings under General.

  3. Scroll to Layout direction.

  4. Enable Reverse layout.

  5. Save your changes.

Enable RTL setting in Framer’s Site settings. The “Layout Direction” section shows the option “Reverse layout direction for right-to-left languages (e.g. Arabic, Hebrew)” with its checkbox turned on, below other settings for accessibility, HTML paste, and navigation.

Once enabled, your site will automatically adjust when an RTL locale is active.

Using variables to adjust layouts for RTL

Most properties in the right-side panel support variables, including options in Links, Layout, Styles, and Components. Variables let you adapt specific values based on layout direction without duplicating elements.

To apply a layout-aware variable:

  1. Select the property you want to control.

  2. Click the variable icon next to the property.

  3. Choose Layout direction.

  4. Select the option that matches your use case.

Framer interface showing layout settings for a Stack. In the right sidebar, under Layout → Direction, a variable menu is open. The user is configuring a ‘Set Variable’ action that converts the current Locale to a Layout Direction value, with options like Convert, Display Option, Equals, and Doesn’t Equal visible in the dropdown.

This approach is especially useful for spacing, alignment, and transforms that need to change between LTR and RTL.

Common use cases

Mirroring icons or UI elements

Some icons or directional UI elements may need to flip in RTL layouts.

  1. Select the layer you want to adjust.

  2. Go to Transform in the right-side panel.

  3. Enable Rotate.

  4. Attach a variable and select Layout direction.

  5. Set the condition to Equals.

  6. Enter the rotation value in the When yes field.

Framer Rotation panel showing a layout-direction variable that converts rotation: 0 degrees when layout is Left to Right, 180 degrees when not, with Transform → Rotate enabled in the right sidebar.

Flipping padding and margins

Padding and margins often need to swap values between left and right.

  1. Select the layer you want to adjust.

  2. Go to Layout in the right-side panel.

  3. Open Padding or Margin.

  4. Attach a variable to the property.

  5. Select Layout direction and set it to Equals.

  6. Enter your desired values for the RTL case.

Framer padding settings panel showing a layout-direction variable that conditionally swaps top, right, bottom, and left padding values when the layout direction is left-to-right or right-to-left.

If you encounter any issues or need further assistance, feel free to contact Framer’s support team through our contact page.

Updated