Add, Remove and Rearrange Components in a Mockup

After creating a webpage mockup from one of our templates, you can add, remove and rearrange components.

Layout Requirements

Please note that while Figma can’t enforce certain layout rules, we do enforce them within our CMSes. Here are a few important examples:

• Every website needs a site header that will appear at the top of every page on that site
• Every webpage needs a page header that will appear directly beneath the site header
• Other content components go in between the page header and the site footer
• Every website needs a footer that will appear at the bottom of every page on that site
• Webpages can either use a sidebar navigation or an in-page navigation, but not both; when using either of these sidebar options, you will need to toggle the “On Page with Sidebar” control to true on the component level. If a component does not have that control, it is not available on pages with a sidebar.
  • For example: components that have a full-width image background are not designed to be used on pages with sidebars.

Adding Components to a Mockup

To add a component:

1. Open the assets tab in the left vertical sidebar.
2. Open the Aggie UX Design System library
3. Navigate through the folder structure to find the component you want to add
4. Select the desired component and either
   1. Click Insert Instance or
   2. Drag and drop the component onto your canvas
5. Alternatively, you can use the sidebar to search for components if you know the component name. Pay attention to the component’s background color to know if the search result can be used in a page mockup.
   1. Green backgrounds indicate components that are good to drop into mockups.
   2. Yellow backgrounds indicate components that can be dropped into mockups, but may have special considerations for placement and/or need special integration into a CMS to function.
   3. Red backgrounds indicate components that should not be used in mockups. These are typically containers and partials.

For the best user experience in finding components, we recommend configuring your library settings to display as a list and show subfolders. These settings can be found by selecting the button to the right of the search bar in the assets panel. We have arranged our Figma components to mirror aggieux.tamu.edu as much as possible.

Removing Components from a Mockup

To remove a component, simply select the component at the top-most level and hit delete on your keyboard.

To know that you have the full component selected, you can look at the layers panel in the left sidebar, where you will see the name of what you have selected.

Rearranging Components in a Mockup

To rearrange components in a mockup, simply select the component at the top-most level and either:

• Use your mouse to drag the component to a different location
  • Note: If you have detached components in the mockup, pay attention to where the component lands when dragging and dropping.
• Use keyboard shortcuts to reorder the selected component
  • To move a component higher on the mockup, use the shortcut Command + [ on Mac or Ctrl + [ on Windows
  • To move a component lower on the mockup, use the shortcut Command + ] on Mac or Ctrl + ] on Windows