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:
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 :
| Helpers | Value | Description |
|---|---|---|
| @link | Figma page name or external url | Add an internal or external link on any layer |
| @maxWidth | CSS units | Add a max width on any layer |
| @minWidth | CSS units | Add a min width on any layer |
| @maxHeight | CSS units | Add a max height on any layer |
| @minHeight | CSS units | Add a min height on any layer |
| @margin @m | CSS units | Add margin to any layer |
| @marginTop @mt | CSS units | Add margin top to any layer |
| @marginBottom @mb | CSS units | Add margin bottom to any layer |
| @marginLeft @ml | CSS units | Add margin left to any layer |
| @marginRight @mr | CSS units | Add margin right to any layer |
| @marginX @mx | CSS units | Add horizontal margin (left/right) to any layer |
| @marginY @my | CSS units | Add vertical margin (top/bottom to any layer |
| @flexWrap | wrap, nowrap, wrap-reverse, | Define flex wrap behavior |
| @cursor | https://developer.mozilla.org/en-US/docs/Web/CSS/cursor | Define 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 :)