This integration allows Figma users to import their designs into Readymag. Whether you’re working on a full-page layout or individual elements, this integration saves time and effort by importing the composition directly into your Readymag projects.
How It Works
To bring your Figma designs into Readymag, follow these steps:
- Find the Figma to Readymag plugin and run it in your Figma project.
- Next, select a single element or single-page layout. Click ‘Prepare’, then ‘Copy’, and wait for the process to complete (it might take a few seconds).
- In your Readymag project, press Cmd/Cntrl + V to paste individual elements or Cmd/Cntrl + Shift + V for a single-page layout.
As a result of the import, you’ll get the Picture, Shape, and Text widgets.
When transferring a complete page layout, make sure the Readymag page parameters align with Figma’s. When you paste a page directly into the Mobile viewport of your Readymag project, the layout will automatically expand. Read this article to learn more about how to adjust the page’s layout within Readymag.
Workflow tips
Here are some tips to help you get the most out of the plugin:
- For a smooth import process, make sure the fonts in your Figma layout are also in your Readymag project. You can add fonts from Readymag’s font library or upload them directly to a project. Check our article about Text for more information.
- In Readymag, the desktop version is the primary layout, and the mobile version is derived from it. While you can add elements to the mobile version, they’ll be hidden by default in the desktop version. More on this topic here.
- The plugin only supports Figma elements up to 9999px in width and height. Any Figma elements exceeding these dimensions won’t be imported into your Readymag layout.
Limitations
All Figma imports consist of the following widgets: Picture, Shape, and Text. The integration has specific limitations based on the type of element that’s imported.
Text
This is the list of currently unsupported features:
- Gradients, images, and video fills.
- Multiple text colors (only the first color is imported).
- Hanging punctuation, paragraph indents, hanging lists.
- Typography styles like slant, flar, and small caps.
- Dotted or wavy underlines will be converted to solid lines. Some strikethrough styles may differ.
- Mixed line heights: only the second value is used.
Fonts
- Unknown fonts will default to Inter.
- Ligatures may be disabled if not supported.
Effects
- Only the last normal-mode shadow is imported.
Links
- Wavy underlines are converted to solid lines.
- Underlined linked text remains underlined but might lose some formatting.
Shapes
- Shapes with gradients, images, dashed strokes, and multiple-stroke colors/effects are converted to SVGs.
- Complex shapes (e.g., polygons with 30+ sides, varying stroke widths, and multiple effects) are also converted to SVGs.
- Stars always import as SVGs.
Images
- SVG frames with multiple vectors will be imported as a single SVG.
- Clip content is not supported.
Groups
- Rotated groups may have slight size differences after being imported.