Adding Images to Components

Some components have the option to add images by default; others require the “image” media option to be turned on. Once this option is selected, you should see a checkered shape where an image should be.

To add an image:

  1. Select the image placeholder; you will need to “click in” or use the layers panel to get to the shape inside of the Image frame.
  2. In the right sidebar in the Fill panel, click on Image to open the Fill options.
  3. Click Upload from Computer to upload an existing image from your computer.

Adding Icons to Components

Some components have icons displayed by default; others require the “icon” media option to be turned on. Once this option is selected, you should see a sparkle icon within your component. You can change the icon from the sparkle to any other icon in the Aggie UX icon library.

To change the icon:

  1. Select the sparkles icon; you will need to “click in” or use the layers panel to get to the sparkles layer. If you select the vector layer, you’ve gone too far.
  2. In the right side panel, you should see sparkles with a dropdown arrow beside it; open the dropdown.
  3. Use the swap instance panel to find the icon you would like to use. You can use the search inside the panel to look for a specific icon name, or navigate through the different families of icons within the folder structure. Click on the icon you want to use to swap the instance with the default sparkles icon.