Basics
These are the essentials that you need to know before starting with figma.to.website.How to define pages
- Each webpage must be designed in a frame that is inside a section.
- The section name is the path of the web page.
- You must use section name “/” for the homepage of your website.
Example:
If your website is published at “https://pokemon.figweb.site”
- Section “/” will go to => “https://pokemon.figweb.site”
- Section “/pikachu” will go to => “https://pokemon.figweb.site/pikachu”
You can have more than one frame in a single section if you want more control over the design on different device sizes. See the Responsive chapter for more details.
Design in Figma as you always do
Design your webpage inside the page frames using all the Figma features you love. figma.to.website will transform your frames into HTML and CSS.This being said, Figma designs are usually very static and use a lot of fixed-sized frames. If you want your design to be responsive and adjust to device size, we encourage you to use Auto-layout in the frames where you want responsiveness. See the Responsive chapter for more details.
We are improving the transformation to HTML and CSS everyday. If something is not working as you would expect, please share it on our chat.
Prototyping, animations and variables also work!
If you want to add some dynamic effects or interactivity to your webpages, you can use Figma’s prototyping features. figma.to.website will transform your effects into CSS or JavaScript.If something is not working as you would expect, please share it on our chat.
Don’t worry about image size
You can use unoptimised, high-resolution images in your designs.figma.to.website will optimise the images published on the web and always deliver the right image size for the device visiting your site. In other words, small devices like phones will get smaller images than desktops for maximum performance while not compromising image definition.
For best results, use PNG images if you want lossless compression (screenshots) and JPEG images for assets where you accept lossy compressions (photos).