Figside

beta

PricingTemplatesDocs

Documentation

Layout

How to make fluid design?

We provide a lot of effort to support all the awesome Figma features but we advise you to build your design with the Auto Layout Figma feature for a fluid & responsive render. Have a look on our Portfolio template.

To garanty a fluid layout, use the Auto Layout as much as possible with fill container.

My design does not look like the original

The render is optimized for file designed with the Auto Layout Figma feature. Try to use Auto Layout frame as much as possible!

Which frames are imported?

We import the last frame of each page.

What styles are applied to the root layer?

We automatically add width: 100% and height: 100% to the root layer of each page.

Can I use any fonts?

We automatically import fonts which are available on Google Fonts.

 

How can I set max and min width to container?

You can use the helpers @minWidth:500px and @maxWidth:1000px in any Figma layer name to set a min/max width.

Which page is used for the home page?

We use the first page of your document as the home page.

How many pages can I export?

With the free plan you are limited to 2 pages by website and get unlimited pages with the pro plan!

How to make links between pages?

You can use the Figma link to text feature (see Page section). To add link on other element than text, add the @link:page-name helper in the layer name with the page name or an external url:

notion image

You can view an example on our Portfolio template.

Helpers

What are Helpers?

Helpers are a way to define extra behaviors like linking, responsive by simply adding a helper tag in your layer name:

 

@helperName:value (without space)

Examples: @marginBottom:10px @maxWidth:1024px @flexWrap:wrap

 

Here is the list of the available helpers :

HelpersValueDescription
@linkFigma page name or external urlAdd an internal or external link on any layer
@maxWidthCSS unitsAdd a max width on any layer
@minWidthCSS unitsAdd a min width on any layer
@maxHeightCSS unitsAdd a max height on any layer
@minHeightCSS unitsAdd a min height on any layer
@margin @mCSS unitsAdd margin to any layer
@marginTop @mtCSS unitsAdd margin top to any layer
@marginBottom @mbCSS unitsAdd margin bottom to any layer
@marginLeft @mlCSS unitsAdd margin left to any layer
@marginRight @mrCSS unitsAdd margin right to any layer
@marginX @mxCSS unitsAdd horizontal margin (left/right) to any layer
@marginY @myCSS unitsAdd vertical margin (top/bottom to any layer
@flexWrapwrap, nowrap, wrap-reverse,Define flex wrap behavior
@cursorhttps://developer.mozilla.org/en-US/docs/Web/CSS/cursorDefine a custom cursor

Publishing

How can I publish my website?

Your websites will be published on the free Vercel platform that offers a bunch of awesome features (https, custom domain, high-performance network…).

Before publishing you have to create a Vercel account and provide your Vercel token in the Figside settings page.

How can I add my custom domain?

Follow the Vercel documentation to plug your custom domain.

In which format my website is exported?

We generate a React app built with the first-class Next.js framework.

Other

Can i change the hover effect?

For now, we lower the opacity by 10% of hoverd elements. We plan to add new effects in the future.

How to add an alternative text on images?

Figside use the name of your layer as alternative text.

Need some extra help?

Ask a question in our feedback widget :)