Responsive embeds

A wide piece squeezed onto a phone gets small. A responsive embed shows a different layout at different widths instead, like a web page: side by side on a desktop, stacked on a phone. You make the layouts as artboards, and give each one a breakpoint, the page width it starts at.

Make a layout for each width

1. Add the artboards you need: Menu › Export formats, then check the formats, such as Landscape 16:9 and Vertical 9:16.
2. Choose Menu › Export formats › Show artboards to lay them out beside the frame.

New artboards use the Responsive framing: Paraplex rearranges the piece for each shape, side by side on a wide artboard and stacked on a tall one, and reshapes backgrounds to fill. Change anything by hand on an artboard to make it that artboard's own. See Canvas and viewport.

Set the breakpoints

1. Click the ⋯ beside an artboard's name to open its menu.
2. Choose Breakpoint….
3. Type the page width, in pixels, that the artboard starts at, such as 768, and click OK. Leave it empty for no breakpoint.

The artboard's name now shows its breakpoint, such as ≥ 768px.

Which one a page shows

The embed measures the width it's given on the page, and shows the artboard with the largest breakpoint that fits. Below every breakpoint, it shows the main frame. It checks again whenever the page is resized.

For the piece above:

The embed's box takes the shape of the artboard it shows, unless the snippet sets aspect to fix it. See Embed API.

Things to know

• Only artboards that are checked in Menu › Export formats and have a breakpoint take part. An artboard with no breakpoint is for exports only.
• On a tie, the artboard that's first in the list wins.
• Sizes in vw, vh and % follow each artboard's own frame, which helps text fit every layout. See Text.