Back to Plugins
UIDraft: Material Preview
Figma to Live Web Preview in One Click: Skip Handoffs, Boost Workflow
previewmaterialdesignerdevelopercode
Plugin Preview
About this plugin
Live Web Preview for Figma
See your designs come alive in real web environments – directly within Figma.
Functional Overview
- View Figma frame/group/components as they’ll appear in actual browsers
- Auto-converts Figma styles to CSS custom properties hierarchy
How to Use
- Choose any frame/group/component node in your Figma file
Operational Constraints
- Backgrounds using Figma's CROP fill mode might display unexpected aspect ratios
- Complex boolean operations may simplify during web preview rendering
- Any layer with rotation ≠0° may render with unexpected alignment.
Plugin Details
| Version | 5 |
|---|---|
| Created | March 1, 2025 |
| Last Updated | May 23, 2025 |
| Category | Software development |
| Creator | Richard |
| Stats | 7 installs, 3 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/app.html
- main:dist/plugin.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- https://*.google.com
- https://*.mixpanel.com
- https://*.qiniup.com
- https://*.yzcdn.cn
- https://home.ucdarts.com
More Like This
Discover other plugins in the Software development category.
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
Code Conversion Made Easy: Figma to Web & Apps
Anima - Figma to Code React, HTML, CSS, Tailwind, MUI (DevMode Inspect React / HTML / Vue / CSS)
Anima - AI Powered Design to code
Builder.io - AI-Powered Figma to Code (React, Vue, Tailwind, & more)
Export designs to responsive code (React, HTML, Vue, Tailwind, etc) with AI