Documentation Index

For the complete documentation index, see llms.txt. Markdown versions of docs pages are available through the page's alternate Markdown link.

Current page: Visually previewing your selelected Figma layer's generated code - The **Preview HTML** tab in Weblify allows you to see a live preview of how your generated code looks at different viewport sizes.. Machine-readable page: /weblify/inspect/preview.md.

Visually previewing your selelected Figma layer's generated code

The Preview HTML tab in Weblify allows you to see a live preview of how your generated code looks at different viewport sizes.

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.