How it works

Using FigMayo is simple. We take your Figma library and turn it into a browsable documentation site, based on your library structure. You can add notes to components and component groups, add storybook and code sandbox links and link out to any other documentation - all from within Figma. Any updates to your library can be published to your site with a single click.

Create your site

Creating your site is simple. After creating an account, click ‘add library’. Give your site a name.

After creating an account, click ‘add library’.
Give your site a name.
Paste in your Figma share link and click the “Create site” button. Your library has to be published and you need to be on a paid Figma tier.

Structure

Any type and color styles in your library will get added under ‘Styles’ section of the navigation panel.

Styles

Any type, color & effect styles in your library will get added under the ‘Styles’ section of the navigation panel.

Components

Any page that has a component published in your library will be reflected as a component page on your site. Any components with prefixed with . or _ will be omitted.

Component descriptions

Creating your site is simple. After creating an account, click ‘add library’.Give your site a name.

Open the component configuration panel in Figma.
Add in your description. Any links will be included.
Publish your changes on Figma then publish your site on FigMayo. Your component description will appear underneath the component on your site.

Component links

Any links added to components in Figma will get added to your site.

Open the component configuration panel in Figma.
Add your link URL to the link input.
Publish your changes on Figma then publish your site on FigMayo. Your component link will appear underneath the component on your site.
Storybook and Code sandbox links will be embedded natively and open in a modal.

Page desciption

To add a description to each page:

Using the magic layer name $fm-doc for a text block that sits directly on the canvas, not within a frame.
Publish your library in Figma than FigMayo and your page description will appear.

Section description

To add a section description for a frame that includes multiple components:

Access a frame that contains components.
Add your description in a text block within this frame and name the layer $fm-doc.
Publish your library in Figma than FigMayo and your page description will appear.