Orienting Yourself in the Aggie UX Design System Within Figma
Learn about the pages you will find in the Aggie UX Figma community file.
Heads Up: Changes in 2.0
The Aggie UX 2.0 Figma file is structured differently than the previous versions of the Aggie UX Figma Community file.
Get Started & Changelog Page
This page contains important information about the version of the design system you are using, including the version number and release date.
The Aggie UX introduction includes important information about the way the file is made.
Review the tips and tricks for helpful information for building mockups using our components.
The changelog records any additions or modifications made to each version of the design system file. By checking the changelog, you’ll be able to see what changes have been made between versions.
Templates / Mockups Page
The templates / mockups page contains templates you can use to make mockups of web pages using Aggie UX components.
On this page you will find several different mockups that vary based on page type. These mockups include only one component in the main body area of the page and are intended to be a starting point to make mockups using components that make sense for your content. You can add as many components to a mockup as make sense for your content.
Learn how to create a mockup using the Aggie UX templates
Playground
The playground page is a dedicated area where you can build out mockups. Copy templates from the templates / mockups page and modify them here.
This is especially useful if you are using a free Figma plan, because you can only build mockups within the community file (as opposed to linking to it as an external library from another project).
Components Page
The components page contains all of the content components that are ready to be dropped into a mockup without any special considerations. These components are available in the page builder of the Cascade and WordPress CMS implementations.
Components are denoted by a green background.
Learn how to add components to a mockup Specialized Page
The specialized page contains Aggie UX components that require additional setup to be integrated into your CMS environment, such as feed-based components. Always refer to the way specialized components are added to templates on the templates / mockups page to make sure you are building a mockup that can be replicated in our CMS implementations.
Specialized components are denoted by a yellow background.
Navigation Page
The navigation page contains Aggie UX navigation components that require additional setup to be integrated into your CMS environment. These components are already integrated into our CMS implementations.
Always refer to the way navigation components are added to templates on the templates / mockups page to make sure you are building a mockup that can be replicated in our CMS implementations.
Navigation components are denoted by a yellow background.
Partials
You should never use partials from this page on their own; these are partial components that are not available to use in our CMS implementations as standalone components. If you drag and drop these partials into a mockup, you will not be able to recreate your design in our CMS implementations.
For our friends designing apps:
If you’re using this Aggie UX file to help make custom websites or applications that feel like part of the Aggie UX family, please feel free to use these partials to speed up your design process.
Containers
You should never use containers from this page on their own; these are containers of partials that are not available to use in our CMS implementations as standalone components. If you drag and drop these partials into a mockup, you will not be able to recreate your design in our CMS implementations.
These containers allow us to enforce consistency across components. For example, all cards in a card group must have the same media option. This level allows you to select a media option and apply it to all cards in the container without having to apply the selection individually.
For our friends designing apps:
If you’re using this Aggie UX file to help make custom websites or applications that feel like part of the Aggie UX family, please feel free to use these containers to speed up your design process.
Icons Page
This page enables components to access our icon library. You can look at all of the available icons on this page or by referring to the Aggie UX Icon Library on aggieux.tamu.edu.