manifest.jsonPlugin configuration. Select this file when installing in Figma.
1
Upload project
HTML, HTM, or ZIP · maximum 15 MB
Drop an HTML or ZIP project here, or choose a file
2
Responsive sizes
HOW IT WORKS
Browser-rendered, structured output.
CoreBase renders the default state at three widths, reads the visible DOM and computed CSS, then creates independent responsive layout trees.
What the layout data includes
The versioned JSON records hierarchy, text, dimensions, Flexbox direction, spacing, typography, colors, borders, visibility, overflow, positioning, and image references. Wrapper cleanup remains deliberately conservative.
Current boundary
CoreBase exports structured layout data; the separate Figma plugin reconstructs editable layers. This is not a perfect conversion of every CSS feature. Scripts, remote assets, animation, and transient states are constrained; review the imported frames and warnings.
START TO FINISH
From your HTML project to editable Figma frames.
Prepare the layout in your browser, download the JSON, then import it with the CoreBase plugin in Figma Desktop. Install the plugin once; use it again for each project.
CoreBase HTML to Figma
Ready-to-run ZIP · schema v2 · no build or Node.js required
You need Figma Desktop, an editable Figma Design file, and a local HTML or ZIP project. This is a development-plugin install, not a Figma Community listing. Keep the extracted plugin folder on your computer after installation.
Prepare your HTML project
Use an HTML/HTM file, or ZIP your HTML, CSS, images, and fonts together, preserving relative paths. ZIP is preferable when the page uses local assets. The upload limit is 15 MB. External resources and project scripts are blocked; CoreBase captures the page’s initial static state.
Export the responsive layout
Upload the project above. If it has several HTML pages, select the main one. Keep the default widths—Desktop 1440, Tablet 768, Mobile 390 px—or set your own. Choose Prepare layout data, wait for all three captures, then Download layout JSON. Save the .corebase-layout.json file.
Download and extract the plugin
Download the plugin ZIP and extract it into a permanent local folder. You should see manifest.json, README.md, and a dist folder containing code.js and ui.html. Do not import the ZIP itself, move just the manifest, or rename dist.
Install in Figma Desktop
Open a Figma Design file. Right-click the canvas and choose Plugins → Development → Import plugin from manifest… (some versions say Import new plugin from manifest…). Select manifest.json in the extracted folder. There is no need to create a new plugin or edit the manifest.
Run the plugin and select your JSON
Open Plugins → Development → CoreBase HTML to Figma. Choose the .corebase-layout.json exported in step 2—not the HTML, project ZIP, or manifest. Check the project name, Import ID, schema v2, and viewport widths, then choose Import to Figma.
Inspect the imported frames
Wait for Done. The plugin creates a CoreBase Import section with Desktop, Tablet, and Mobile frames side by side, and selects them. Review the warning list and use Select Imported Frames if needed. Text and supported vectors remain editable; verify hierarchy, dimensions, spacing, and missing assets before using the design.
Refine and import again
Adjust your source HTML/CSS, export a fresh JSON, and run the plugin again. Each import creates a new section; it does not overwrite the previous one. Save and organize the resulting frames in Figma as you normally would.
Keep these files together
dist/code.jsCompiled importer. Keep it in the dist folder.
dist/ui.htmlPlugin interface. Keep it beside code.js in dist.
README.mdInstallation, developer instructions, and V1 limitations.
What to expect from the import
Layouts, not a screenshot
Frames, text, embedded images, and complete SVGs are reconstructed as editable layers. Flexbox becomes Auto Layout where supported; CSS Grid retains parent-relative positions in a regular frame.
Check fonts and images
Unavailable fonts or weights are substituted and listed as warnings. Missing or remote-only images become correctly sized placeholders. Include local assets in your ZIP; the importer does not fetch them from the internet.
Three independent layouts
Desktop, Tablet, and Mobile are separate frames, not automatically linked responsive components. Advanced CSS, animations, prototype interactions, components, and design tokens are not reconstructed.
If something does not import
Manifest or missing-file error
Download the current ZIP again and extract the entire folder. Select its manifest.json, keeping dist/code.js and dist/ui.html in place. An error mentioning description indicates an older manifest; the current package does not include that field.
Unsupported schema or invalid JSON
Export a new Layout JSON with this tool. The plugin accepts schemaVersion 2 only. Renaming an HTML file to .json or using an older incompatible export will not work. The Import ID is an identifier, not an online retrieval code.
Import finishes with warnings
Warnings are non-fatal substitutions, not a promise of perfect fidelity. Inspect the listed layers and fix missing assets or fonts. For a blank or incomplete source capture, check your HTML entry, local paths, and static content before exporting again.
Your files stay out of CoreBase servers
HTML analysis happens locally in an isolated browser frame. The plugin reads the local JSON without calling CoreBase or external APIs. Once imported, the layers become part of your Figma file; that file is handled under Figma’s own storage and privacy settings.
Accuracy & trust
Built to be useful. Designed to be checked.
We test and review CoreBase tools, formulas, and information to keep them useful and accurate. Occasional inaccuracies or circumstances specific to your situation can still affect a result, so verify important decisions against your own requirements.
Found something that does not look right? Tell us so we can review and improve it.