Detaching Instances in Select Components

Detaching an instance of a Figma component will allow you to make changes beyond what is supported in the main component instance. This should be done with caution, as you cannot reattach a detached component. Additionally, you should always cross reference the documentation available at aggieux.tamu.edu to make sure the changes you are making in Figma are actually supported within our CMS implementations.

The two most compelling reasons to detach an instance in Aggie UX is to add more cards to a card group than what are provided in the “Number of Cards” property or to modify the custom content component.

Adding Cards in Card Groups

In many iterations of our card group components, we limit the number of cards you can select in the “Number of Cards” property to four or six components. You can add more than that within our CMS implementations.

To add more cards:

1. Configure the card group the way you want it, including styles, background color, media and CTA options.
2. Detach the card group component by right clicking with the component selected and then choosing Detach Instance
3. Select a single card in its entirety, and copy (command + c) and paste (command + v) it in the same location. The component will automatically wrap the cards appropriately as long as they are pasted in the same container as the card you originally copied.

Editing Custom Content

Custom content gives you access to a WYSIWYG editor in our CMS implementations. To get the same effect within Figma, you can detach the component to have more flexibility.

1. Configure the custom content component the way you want it, especially if you want to use a sidebar item with it
2. Detach the custom content component by right clicking with the component selected and then choosing Detach Instance
3. You can now make multiple text boxes within the single column layer by copying and pasting the existing content inside the column. You can also delete the existing button/link or text frames if you choose.