Are you a designer trying to deliver a consistent user experience? Would you like to use a page template with built-in layout standards? These quick videos show you how to use our page layout templates to streamline your design process.
Part #1: Finding the component and it’s properties
- Go to the Spark library. Browse down the file to find the page called "Page Layouts." within the Utility group.
- Alternatively type in “Page Layout” within the assets panel and drag out the component into your file.
- The component comes in multiple breakpoint variants:
- xl (2650px)
- lg (1920px)
- md (1440px)
- sm (1280px)
- xs (480px)
- There is the ability to show the menu and breadcrumbs bar through the relevant properties.
- Lastly content can be inserted through the slot based “page-content” property.
Part #2: Adding content and ensuring responsiveness
- In order to include content within the component, you need to ensure that your desired content is presented as a component in your file with autolayout added
- Once added through the page-content slot, the content will be positioned within the slot area - if the height of your content exceeds the original slot height, the Page Layout component will expand it’s height to hug your inserted content.
- The height can be manually changed by designers to any height they desire.
- There are a number of maximum and minimum width that have been placed to Page Layout variants - if when you’re dragging the width of a given Page Layout variant, you’re prevented from doing so by one of these min/max values, we recommend changing the breakpoint of the component to a more suitable size.
Part #3: Changing added content and using layout grids
To ensure consistency and alignment with our layout guidance, we recommend applying the Figma Layout Guides directly to the local component that you’re inserting into the Page Layout component slot space.
- To customize/modify any added content, simply make these changes to the local component you used to add into the slot.
- If you would like to add in the layout grids that we have in the design system, we recommend only overlaying these within the “content-safe-area” frame of the component (this frame being nested within the “main_stage” frame when the menu is active).