Figma Components

Figma components are what enables us to provide a component library for you to use to quickly make mockups using the Aggie UX Design System.

Component

In Figma, a component is an element that you can reuse across designs. They help create and manage consistent designs across projects.

Components have two main aspects:

• A main component defines the properties of the component
• An instance is a copy of the component that you can reuse in your designs. Instances are linked to the main component and receive any updates made to the component.

You can identify a component in the Layers panel because it will be purple with a single diamond icon (for instances) or a group of four diamond icons (for main components) in front of the layer name.

View Figma’s guide to components in Figma

Component Properties and Variants

In Figma, components can have multiple variants that have different combinations of properties.

This is what allows an Aggie UX component to have different editable properties including style, media option, background color, CTA, number of cards, and much more.

When you have a component instance selected, you will see the associated properties at the top of the design tab in the right sidebar. Typically these are drop down selections or true/false toggles. You can change these properties and see the changes to the designed component in real time.

Library

In Figma, a library is a collection of design assets, like components, styles, and variables. These design assets live in a single file, but can be reused across different files or projects (if you have a paid plan).

View Figma’s guide to libraries in Figma

Adding a Library to a Project

To add a library to a project:

1. Open the Assets tab on the left sidebar
2. Click on the Book icon to manage your libraries
3. Click Add to file on any libraries you want to add to your project

Please note, in order to add a library from a community file to your project, such as the Aggie UX Design System, you will need to have downloaded the community file before trying to add it as a library to your project.

Using Assets Created in a Project

If you do not have a paid account, you can use components created within a file as a library — but only within that project. This means you can download the Aggie UX Design System community file and make your own mockups within your local copy using the component library already built into that file.