On this page
About Weblify Code Inspector
Weblify Code Inspector is a free Figma plugin published by Hypermatic in 2021. It works in Figma Design and Dev Mode and has 20,518 users and 163 likes on the Figma Community. It ranks #14 in Dev Handoff on our lists.
In the developer's words
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
- Inspect a Figma layer's markup and styles with one click.
- Toggle between HTML/CSS, Tailwind, React or Vue code output.
- Integrates with Figma's native "Dev Mode" inspector panel.
- Supports auto-layout, wrapping and min/max Figma properties.
- View a live HTML preview of your HTML in the plugin.
- Instantly copy code directly to your clipboard.
- Download your code component as a .zip file.
- Includes assets folder if your layers contain images.
- 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
What's new
Version 37 · released Feb 22, 2026
The developer didn't publish release notes for this version.
Permissions and privacy
Network access
Weblify Code Inspector can only connect to the 2 domains declared in its manifest: *.hypermatic.com and *.googleapis.com.
- *.hypermatic.com
- *.googleapis.com
Extra permissions
- Reads your Figma name and avatar
- Sees who else is in the file
Read from the plugin's published manifest.
Where Weblify Code Inspector ranks
Weblify Code Inspector alternatives
- 1
Zeplin
by Zeplin Crew
291K users2.9KFree + paid featuresDesign tools are for designing. Zeplin is for clear, structured design delivery.
- 2
Measure
by Philip
158K users3.2KFreeAdd measurement lines and additional helpful information to your designs
- 3
Redlines
by Danny Keane
141K users3.8KFree - 4
Inspect Styles
by max.denaro
136K users3.9KFreeInspect styles from Figma and transform to CSS
- 5
Specs Classic
by Directed Edges Plugins
136K users5.5KFree + $8/mo upgradeGenerate component specs including anatomy, props and layout & spacing
- 6
DesignDoc [Spectral]: Measures, Annotations, and Handoff
by Marka Plugin Dev
132K users3KFree📐 Effortlessly hand off your Figma designs to the development team
Weblify Code Inspector FAQ
What does Weblify Code Inspector do?
Inspect your Figma layers as HTML/CSS, Tailwind, React or Vue code in one click. It's a Figma plugin by Hypermatic that runs in Figma Design and Dev Mode.
Is Weblify Code Inspector free?
Yes. Weblify Code Inspector is free to install and run from the Figma Community, with no paid tier listed.
Is Weblify Code Inspector safe to use?
Figma plugins can only reach the internet through domains listed in their manifest. Weblify Code Inspector can only connect to the 2 domains declared in its manifest: *.hypermatic.com and *.googleapis.com. As with any plugin, check the developer's privacy policy before using it on client work.
How do I install Weblify Code Inspector?
Open it on the Figma Community, or search for it in the Actions menu (Cmd/Ctrl + K) inside any file you can edit. See how to install Figma plugins.
What are the best alternatives to Weblify Code Inspector?
By user count, the closest alternatives are Zeplin, Measure and Redlines. Compare all of them on the best Figma plugins for dev handoff.
Built this plugin?
Use this page as a landing page for Weblify Code Inspector: link to it from your site, README or launch posts, or add a badge. Pick a style and copy the code.
Style
Label
Size
Code
<a href="https://figmaplugins.co/plugins/weblify-code-inspector/" target="_blank" rel="noopener"><img src="https://figmaplugins.co/badges/featured-dark.svg" alt="Weblify Code Inspector on figmaplugins.co" width="220" height="48"></a>