Auto layout, components and data binding
Keep designs tidy with auto layout, adapt them to any format, reuse components, and fill templates from your data.
Updated November 10, 2026
These tools keep a design consistent as it changes: auto layout spaces layers for you, linked sizes carry one design across formats, components reuse parts, and templates fill themselves from your products or CMS.
Add auto layout
Select a frame or several layers.
Press Shift+A. A frame works out its layout from how its children sit. A group becomes a frame. Other selections are wrapped in a new frame that hugs them.
In the Auto layout section, choose Horizontal, Vertical or Grid, and set the gap, padding and alignment.
Select a layer inside to set its size in Auto layout item: Fixed, Hug contents or Fill container. Drag a layer within the frame to reorder it. Resizing a laid-out layer by hand makes that side fixed.
Make other sizes
Select a frame and click Resize / more sizes....
Pick formats by platform, or enter a custom size.
Create copies, or click Resize this frame to change it in place.
Content scales to fit, layers near an edge stay anchored to it, and animation keeps its shape. Turn on Keep copies linked (Sync from master) so a copy can follow the original later. On a linked copy, Sync from master brings changes over and keeps what you changed on that copy. Unlink breaks the link.
Reuse components
Select a frame and click Create component in its Component section.
Create instances from the Components panel, under In this design.
Edit the main component and its instances update, including their own sizes. Changes you make on an instance stay. Reset an instance to clear them, or click Detach to make it independent.
Fill a template from data
Select a frame and turn on Fill from data (Collection) in its Collection section.
Choose products or a CMS content type as the source.
Select a layer and bind its text, picture, link or color in the Data section. Colors can also bind to your brand.
Preview the frame with an item from the source.
In the Template section, click Save as template....
Saved templates appear in the Templates panel and in the From Template wizard, where you can use, share or delete them. A layer whose data is missing keeps its designed value.
Publish a frame as a website page
Select a top-level frame. In its Auto layout section, click Publish as website... The frame does not need auto layout.
Choose a site, then New page (with a title and path) or Add to page.
Use the desktop, tablet and mobile views to set layout for each breakpoint.
The On the website section of a layer sets its text role (paragraph, heading, label) and link. These only matter on publish. A frame filled from data becomes a collection on the site.
Related
Questions about building on PraismaHub? We're happy to help.
Contact us
