# Weblify

> Inspect your Figma layers as clean HTML, Tailwind, React or Vue code in one click.

- Canonical page: https://www.hypermatic.com/weblify/
- Figma Community: https://www.figma.com/community/plugin/927336249307137996
- Documentation: https://docs.hypermatic.com/weblify/
- Pro monthly price: $20 USD per user
- Pro yearly price: $199 USD per user
- Free allowance: Unlimited HTML/CSS Inspections
- Pro trial allowance: 10 uses

## Best for

Turn Figma layers into code.

## Capabilities

### Figma to HTML, Tailwind, React, and Vue

Select a Figma layer and inspect generated HTML, Tailwind, React, or Vue beside the design, then copy or download the implementation.

- Page: https://www.hypermatic.com/weblify/figma-to-html-tailwind-react-vue/
- Capabilities: HTML and CSS inspection; Tailwind output; React and Vue output
- Workflow: Select the Figma layer or component; Choose the target framework; Copy or download the generated implementation
- Documentation: https://docs.hypermatic.com/weblify/overview/quickstart

### Live code preview in Figma

Render the generated web code at different viewport sizes inside Weblify, then check the result before handoff or download.

- Page: https://www.hypermatic.com/weblify/live-code-preview-in-figma/
- Capabilities: Live browser rendering; Responsive viewport previews; Preview beside the Figma design
- Workflow: Inspect the chosen Figma layer; Open the live rendered preview; Check the result at each target width
- Documentation: https://docs.hypermatic.com/weblify/overview/quickstart

### Figma Dev Mode code inspection

Developers can inspect Weblify code through Figma Dev Mode without edit access to the underlying design file.

- Page: https://www.hypermatic.com/weblify/figma-dev-mode-code-inspection/
- Capabilities: Figma Dev Mode integration; View-only developer access; HTML, Tailwind, React, and Vue
- Workflow: Open the design in Dev Mode; Select the layer to inspect; Use Weblify without changing the source design
- Documentation: https://docs.hypermatic.com/weblify/overview/quickstart

### Private Figma code inspection

Inspect Figma layers and download the generated files. The source design data stays inside Weblify.

- Page: https://www.hypermatic.com/weblify/private-figma-code-inspection/
- Capabilities: No external design storage; Inspection inside Figma; Direct local downloads
- Workflow: Keep the source design in Figma; Inspect the layer inside Weblify; Copy or download the result directly
- Documentation: https://docs.hypermatic.com/weblify/overview/quickstart