How it works

Using FigMayo is simple. We take your Figma library and turn it into a browsable web app, 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. Just follow this link, copy in your Figma share link and click the “Create design system” button. Thats it!

Your library has to be published to work and you need to on one of Figma's paid tiers - it won't work on the starter plan.

Structure

Styles

Any type and color styles in your library will get added under ‘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. Frames that house components within a page will be reflected as sub pages on your site.

Adding metadata

You can add descriptions to pages, frames and components in Figma, which we’ll add to your site when published. We will also embed any storybook and code sandbox links in Figma that are grouped with components.

Page description

Add a description to each page using the layer name $fm-doc for a text block that sits directly on the canvas, not within a frame.

Section description

You can add a section description for any frame in page that houses components by using a text block with the magic layer name $fm-doc

Links

You can add links to components by including a text block link labelled $fm-link within the same frame as the component. Storybook and code sandbox links will natively embed.

Links added to notes and page/section descriptions will also be added.

Component notes

You can add notes to components in Figma that will appear on your site, by including a text block with the layer name fm-doc within the same frame and adjacent to the component set.