Weblify Code Inspector (Beta)

About this plugin

Documentation

For Weblify documentation, please visit https://docs.hypermatic.com/weblify

Questions & Support

Weblify is still a baby panda, so if you notice any bugs or have any questions about the plugin, please get in touch directly via https://hypermatic.com/contact and we'll help you troubleshoot and resolve them as quickly as possible.

Security

Weblify is designed to be privacy and security focused — for details about security and how the plugin works, please visit https://docs.hypermatic.com/weblify/security

Features

1. Inspect a Figma layer's markup and styles with one click.
2. Toggle between HTML/CSS, Tailwind, React or Vue code output.
3. Integrates with Figma's native "Dev Mode" inspector panel.
4. Supports auto-layout, wrapping and min/max Figma properties.
5. View a live HTML preview of your HTML in the plugin.
6. Instantly copy code directly to your clipboard.
7. Download your code component as a .zip file.
8. Includes assets folder if your layers contain images.
9. No external APIs or logins required.

Click on a Figma layer to view it as HTML, Tailwind, React or Vue code.

Inspect your Figma layers in the same code framework as your development environment.

Visually preview your code in real-time.

Instantly see how your code will render in the browser at different screen sizes with one click, directly inside the Figma plugin.

Native integration with the Figma “Dev Mode” panel.

Allow your developers to use Weblify without needing to have “Edit” access to your Figma design with the native Figma “Dev Mode” panel integration.

Privacy and security focused — nothing ever leaves your Figma file.

Weblify doesn’t upload, store or process any Figma data outside of the plugin, everything happens securely inside your Figma file, and any exported files are downloaded directly to your computer.

Weblify Pro

10 free trials of Weblify Pro are included with the free version, and if you're a casual user, you can continue using the free version of Weblify forever.

If you're a power user, you can optionally upgrade to continue using all the extra features that are only available in the pro version of Weblify.

To learn more about Weblify Pro, please visit https://www.hypermatic.com/weblify/#pro