BuilderIO/figma-html
Figma Html
This project is a tool for transforming live HTML web pages into editable Figma design layers by processing the document object model and CSS. It functions as a web-to-design converter and HTML-to-layer transformer that translates browser elements into design tool primitives.
The tool captures live webpage sections across multiple screen widths to preserve responsive layout behaviors during the import process. It also includes a visual content editor that identifies live website components, allowing for the direct modification and publication of content entries from a browser view.
The system covers the conversion of computed web styles into design properties, a header-injection proxy to bypass iframe embedding restrictions, and the deconstruction of websites into structured design components for prototyping and redesign.
Features
- Web-to-Figma Converters - Transforms HTML web pages into editable Figma design layers by processing the document object model and CSS.
- Web-to-Design Converters - Provides a utility that transforms live website layouts into structured, editable design files while preserving responsive styling.
- Live Front-End Editing - Identifies page components to allow modifying and publishing content directly on the live rendered page.
- Visual Content Publishing - Allows highlighting specific browser components for direct editing and immediate publication of visual updates.
- Editable Webpage Imports - Captures live webpage sections at various widths and imports them as editable layers.
- HTML-to-Design Transformers - Captures browser elements and translates them into design tool primitives for rapid prototyping.
- DOM-to-Design Layer Mappings - Translates HTML document objects and CSS properties into a hierarchy of editable design layers.
- Component-Based Element Mappings - Maps browser elements to internal content entries to enable direct editing and publishing of live website components.
- Visual Page Editors - Provides an interface for identifying live website components and modifying their content for direct publication.
- Design Tool Style Translators - Converts computed web styles into a format compatible with design tool properties to maintain visual fidelity.
- HTML and Screenshot Importers - Converts live HTML web pages into editable Figma design layers by processing DOM elements and CSS.
- Visual Editing Tools - Links rendered interface elements to their source content for direct editing and publishing from a live browser view.
- Website Content Synchronization - Links live website components to an editor for immediate modification and synchronization of content.
- Responsive - Snapshots webpage sections at various screen widths to preserve responsive layout behaviors during the import process.
- Design & Prototyping Tools - Converts live HTML websites into editable Figma layers to accelerate the design and mockup process.
- Responsive Layout Migrations - Captures web elements across different screen sizes and imports them into design tools as responsive layers.
- Responsive Layout Importers - Copies HTML elements from a website and pastes them into an editor while capturing multiple screen sizes.
- Visual Component Importers - Transforms external HTML and CSS into editable visual components within a visual editing environment.
- Web Page Deconstructions - Transforms existing website DOM and CSS into structured design components for analysis or redesign.
