Create a Webpage Mockup Using a Template
Learn how to use the Aggie UX Figma file to make webpage mockups.
In order to make creating webpage mockups as easy as possible, we have created a suite of page templates available in the Aggie UX Design System community file on the templates/mockups page.
Our mockups are frames that have been set to the correct dimensions to use our component library and have been configured using auto layout. When you add or remove components, the frame will automatically adjust in size.
How to Make a Mockup
- Identify the appropriate template for the page you want to create
- Select the template frame at the top-most layer
- Copy the template
- Navigate to where you are creating your own mockups and paste the template
- For free accounts: We recommend creating your mockups on the Playground page within the Aggie UX Design System project file. Feel free to create additional pages as needed to accommodate your workflow.
- For paid accounts: You can make your mockups in any file you want; you’ll just need to connect that project file to the Aggie UX Design System library.
- Modify the duplicated template by adding, removing or rearranging components, changing the configurations/property settings of components, and inputting your own content.
Learn how to add, remove and rearrange components within a mockup
Choosing a Template
When designing a page, it’s important to choose the template appropriate to your content and where the page lives in your site (its page type).
Learn more about different page types
Special Note On Mocking Up Pages With Sidebars
Creating mockups on pages that use either a sidebar menu or in-page navigation requires some extra considerations.
Use Our Templates to Start
Within templates that have either a sidebar menu or an in-page navigation menu, you will need to use one of our preconfigured templates. These frames contain the necessary nested frames — including a sidebar frame and a main content frame — that enable this two-column layout.
Using Components
Toggling the “On Page with Sidebar” control available on most components allows the component to fit in the “main content frame” on these mockups. If a component does not have this control, it is not available on pages with a sidebar.