Please note that Weblify is currently still in BETA and the code output will continually improve with upcoming plugin updates.

After running the Weblify Figma plugin, ensure that the Preview HTML tab is selected, and then click on any Figma layer on your current page, which will automatically generate a live visually rendered preview of the HTML/CSS code that was generated. You can select another layer while the HTML preview is open, which will refresh the preview automatically to reflect the newly selected Figma layer.

Changing the preview viewport width

By default, the preview window width will be automatically sized to match the width of the Figma layer that’s selected, but you can optionally change this width by clicking on the viewport drop down selector, and choose a preset viewport/device width to see how it looks at that size.