One Singular Purpose
Web2Fig was created to solve a constant friction point in product design: taking an existing web interface or component and turning it into clean, editable Figma vector and text layers without manual redrawing or relying on low-resolution flat screenshots.
When activated, Web2Fig inspects the visible structure, computed CSS styles, typography metrics, and vector graphics of the target DOM element, compiling them into a Figma clipboard format ready for instant paste.
Precision Geometry
Translates bounding rects, flex distributions, and absolute positioning into clean Figma Auto-Layout containers.
Native Style Map
Extracts background gradients, border radii, drop shadows, and exact CSS color values.
Local-First Engine
Processes all calculations directly inside your Chrome browser tab with zero remote API latency.
Built for Editable Work
A screenshot is useful for static reference. Web2Fig goes further by converting live DOM nodes into structured layers Figma understands:
Text & Fonts
Converts DOM text into real Figma text nodes, preserving font sizes, line heights, and weights.
Vector Icons
Inline SVGs and vector graphics are converted to editable Figma path shapes.
Images & Assets
Visual assets and cross-origin images are encoded locally and attached to the clipboard payload.
Creator & Maintainer
Web2Fig is designed, created, and actively maintained by Bukhtyar Haider Khan. The extension is open source, and its codebase, release notes, and issue tracker live publicly on GitHub.