Introduction

The Figma to Replo feature allows you to convert your Figma designs into Replo pages, streamlining the process of building and publishing your Shopify pages. This feature leverages Figma's design capabilities and Replo's no-code page-building tools to enhance your workflow, making it faster and easier to create stunning landing pages.

Benefits of Figma to Replo

• Designers can create multiple design options in Figma and quickly convert them into Replo pages.

• Save time by directly importing design elements, layouts, and styles from Figma without starting from scratch.

• Designers proficient in Figma can continue using their preferred tool while benefiting from Replo's powerful page-building features.

Use Auto-Layout

Ensure your Figma frames use auto-layout for better conversion results. While this is not strictly required, it is a major best practice and highly recommended. Not using auto-layout will almost certainly result in significant additional work inside Replo after the conversion. If you don't use auto-layout, your components will be pulled into the page using 'Relative to Container' rather than 'Auto-Layout', which generally makes responsive design much more challenging.

Additionally, Figma auto-layout cannot be applied to Groups, so it is recommended to use Frames over Groups. While this is not a 100% rule, using Frames will typically provide a better conversion from Figma to Replo.

Learn more about Figma's auto-layout properties here. We've also found this Figma in 5 video really helpful!

Best Practices

• Use Hug vs Fixed Width Components: Use 'Hug' for more adaptable and responsive designs, which helps minimize layout adjustments in Replo.

• Frames > Groups: Use Frames when possible instead of Groups when designing in Figma, especially if auto-layout is not active. This will prevent issues with page positioning configurations in Replo after conversion.

• Convert Sections > Full Pages: Translating individual sections rather than full pages tend to result in improved translation speed and performance.

• Responsive Design: Test your design across different device sizes using Replo's multi-canvas feature. We are currently in the process of developing AI features to automatically add responsiveness to your designs.

• Font Support: When prompted by the plugin that custom fonts need to be uploaded, please use the .woff format. Learn more about uploading fonts in Replo here.

• Layout & Functionality: Adjustments may be needed post-conversion to fine-tune the design. Interactivity (carousels, buttons) currently must be added manually after conversion.

How to Use the Figma to Replo Plugin

Step 1: Access the Plugin

1. Open the plugin using this link. Bookmark the plugin for ease of access.

2. After you have used or bookmarked the plugin, you can view it inside “plugins” in the Figma menu bar inside of a project.

3. Open the plugin from the menu within your Figma file. Depending on the client and browser, you may need to click on the Figma icon on the top-left to see the Plugin dropdown.

   Note: Anyone with can edit access to a Figma file can run plugins. For public templates or swipe files, you may need to create a personal copy and run the plugin in that file. If you are in an organization on Figma, you can run only plugins that have been approved by your organization. Please see this Figma support article if you are having issues with opening plugins inside your files.

Step 2: Select and Copy a Section

1. Select the Figma layers which you would like to copy into Replo. This could be individual elements such as text boxes or images, sections or a single frame.

   1. Note: At this time you should select the ‘desktop’ design for the best results. We are working on optimizing responsive conversions. You should also only select one frame at a time.

2. Ensure the entire section is highlighted and the plugin is open. You should see on the plugin how many layers have been selected.

3. Click on the "Copy" button in the plugin interface. The design will copy automatically to your clip board.

Step 3: Paste into Replo

1. Open the Replo project. Click on the box, section, or container you’d like to paste the copied section into and select "Paste" or use the keyboard shortcut (Ctrl+V or Cmd+V).

2. Alternatively, you can also navigate to the Page, Section, or Template you would like to paste the copied content into within “Layers” in the left menu.

3. The copied frame from Figma will be pasted into your Replo page, preserving the layout, text styles, and images. You will be presented with the option to accept changes or discard.

   1. Note: The largest time spend of the plugin is on photo uploading. If it takes too much time, try to decrease the size or number of the image files in your selection.

Thank you for using the Figma to Replo plugin!

Troubleshooting

My Figma file doesn't import correctly

Almost always, if your Replo page looks very different from your figma file (e.g. content on the page is "scattered" or "jumbled together", in the wrong place, has the wrong height/widths, etc) then this is because your figma file isn't using autolayout.

If your Figma file doesn't use Figma's Auto Layout, Replo will still try to import it, but it won't be able to map everything from figma to a 📄 Containers component in Replo. You'll most likely see a lot of 📄 Positioning "Relative to Container" components like this:

Usually, the fix is to use Figma's "Suggest Auto Layout" feature, which will smartly add Auto Layout to a non-Auto Layout design. See https://help.figma.com/hc/en-us/articles/5731482952599-Add-auto-layout-to-a-design#suggest for more documentation. If after using Auto Layout your design still doesn't import correctly, you can always reach out to support@replo.app for help.