Design systems are about more than just collections of UI components they require clear guidance on how your components are intended to be re-used.

You can write and design your supporting documentation, including “dos and don’ts”, example implementations and use case constraints in Figma and link this content into the auto generated FigMayo pages using the magic layer tag $fm-doc.

To import Figma layers into your pages as content you can use the magic layer name $fm-doc

The layer name can be applied to a text layer or to a frame containing mixed content of text layers and frames or components containing images, diagrams or other useful information.

The easiest way to get started is to copy the components from the `.Local Documentation Containers` page in this library. These can be used for create page level introduction content, component related content or to add content tabs to your components and to add content to your Fills & Effects and Typography pages.

Our algorithm attempts to detect nested layers that should be treated as images that will be inlined in the documentation as HTML <img> tags. Sometimes this might not work as expected. To force a layer to be treated as an image you can set the layer name to $fm-img.

You can add custom pages to your documentation site (like these) by laying out `.Page Intro` components on pages that do not define any Figma components.

This is useful for adding guidance docs for set up, usage, contributions etc.

Any description included in the Figma component or style settings will be imported into the related pages. No further configuration is required.

For information on how to create these descriptions see the Figma documentation here.