manifest.jsonPlugin-Konfiguration. Diese Datei bei der Installation in Figma auswählen.
1
Projekt hochladen
HTML, HTM oder ZIP · maximal 15 MB
HTML- oder ZIP-Projekt hier ablegen oder Datei auswählen
2
Responsive Größen
SO FUNKTIONIERT ES
Im Browser gerendert, strukturiert ausgegeben.
CoreBase rendert den Ausgangszustand in drei Breiten, liest sichtbares DOM und berechnetes CSS und erstellt getrennte Layout-Bäume.
Inhalt der Layout-Daten
Das versionierte JSON enthält Hierarchie, Text, Maße, Flexbox-Richtung, Abstände, Typografie, Farben, Rahmen, Sichtbarkeit, Overflow, Positionierung und Bildverweise. Wrapper werden bewusst vorsichtig bereinigt.
Grenzen dieser Version
CoreBase exportiert strukturierte Layout-Daten; das separate Figma-Plugin erstellt editierbare Ebenen. Nicht jede CSS-Funktion wird exakt übertragen. Skripte, externe Assets, Animationen und temporäre Zustände sind eingeschränkt. Frames und Warnungen nach dem Import prüfen.
SCHRITT FÜR SCHRITT
Vom HTML-Projekt zu editierbaren Figma-Layouts.
Bereite das Layout im Browser auf, speichere die JSON-Datei und importiere sie mit dem CoreBase-Plugin in Figma Desktop. Das Plugin wird einmal installiert und lässt sich für weitere Projekte nutzen.
CoreBase HTML to Figma
Startfertiges ZIP · Schema v2 · kein Build und kein Node.js nötig
Benötigt werden Figma Desktop, eine bearbeitbare Figma-Design-Datei und ein lokales HTML- oder ZIP-Projekt. Die Installation erfolgt als Entwicklungsplugin, nicht über Figma Community. Den entpackten Plugin-Ordner nach der Installation auf dem Computer behalten.
HTML-Projekt vorbereiten
Verwende HTML/HTM oder ein ZIP mit HTML, CSS, Bildern und Schriften. Relative Pfade müssen erhalten bleiben; bei lokalen Assets ist ZIP die bessere Wahl. Maximal 15 MB. Externe Ressourcen und Projektskripte sind blockiert: erfasst wird der anfängliche statische Seitenzustand.
Responsive Layout-Daten exportieren
Lade das Projekt oben hoch und wähle bei mehreren HTML-Seiten die Hauptseite. Nutze Desktop 1440, Tablet 768 und Mobile 390 px oder eigene Breiten. Klicke auf Layout-Daten vorbereiten, warte auf alle drei Ansichten und speichere die .corebase-layout.json-Datei.
Plugin herunterladen und entpacken
Lade das Plugin-ZIP herunter und entpacke es in einen dauerhaften lokalen Ordner. Darin liegen manifest.json, README.md sowie dist mit code.js und ui.html. Nicht das ZIP importieren, nur das Manifest verschieben oder dist umbenennen.
In Figma Desktop installieren
Öffne eine Datei in Figma Design. Rechtsklick auf die Arbeitsfläche → Plugins → Development → Import plugin from manifest… (teils Import new plugin from manifest…). Wähle manifest.json im entpackten Ordner. Kein neues Plugin erstellen und das Manifest nicht bearbeiten.
Plugin starten und JSON auswählen
Öffne Plugins → Development → CoreBase HTML to Figma. Wähle den JSON-Export aus Schritt 2, nicht HTML, Projekt-ZIP oder Manifest. Prüfe Projektname, Import ID, Schema v2 und Breiten und klicke auf Import to Figma.
Importierte Frames prüfen
Warte auf Done. Eine CoreBase-Import-Section enthält Desktop, Tablet und Mobile nebeneinander; die Frames werden ausgewählt. Prüfe Warnungen und nutze bei Bedarf Select Imported Frames. Text und unterstützte Vektoren bleiben editierbar. Kontrolliere Hierarchie, Maße, Abstände und fehlende Assets.
Überarbeiten und erneut importieren
Passe HTML/CSS an, exportiere eine neue JSON-Datei und starte den Import erneut. Jeder Import erstellt eine neue Section und überschreibt keine vorhandene. Organisiere und speichere die Frames anschließend wie gewohnt in Figma.
Diese Dateien gehören zusammen
dist/code.jsKompilierter Importer. In dist belassen.
dist/ui.htmlPlugin-Oberfläche. Neben code.js in dist belassen.
README.mdInstallation, Entwicklung und Grenzen von V1.
Was der Import leistet
Ebenen statt Screenshot
Frames, Text, eingebettete Bilder und vollständige SVGs werden als editierbare Ebenen rekonstruiert. Flexbox wird nach Möglichkeit Auto Layout; CSS Grid behält relative Positionen in einem normalen Frame.
Schriften und Bilder kontrollieren
Fehlende Schriften oder Schnitte werden mit Warnung ersetzt. Fehlende oder nur extern verfügbare Bilder erhalten maßhaltige Platzhalter. Lokale Assets ins ZIP aufnehmen; der Importer lädt nichts aus dem Internet nach.
Drei unabhängige Ansichten
Desktop, Tablet und Mobile sind getrennte Frames, keine automatisch verknüpften responsiven Komponenten. Komplexes CSS, Animationen, Prototyp-Interaktionen, Komponenten und Design-Tokens werden nicht rekonstruiert.
Hilfe bei Importproblemen
Manifest- oder Dateifehler
Das aktuelle ZIP erneut herunterladen und vollständig entpacken. manifest.json auswählen; dist/code.js und dist/ui.html müssen an ihrem Platz bleiben. Ein Fehler zu description deutet auf ein altes Manifest hin. Das aktuelle Paket enthält dieses Feld nicht.
Inkompatibles Schema oder ungültiges JSON
Erstelle hier einen neuen Layout-JSON-Export. Unterstützt wird nur schemaVersion 2. Umbenanntes HTML und ältere inkompatible Exporte funktionieren nicht. Die Import ID ist eine Kennung, kein Code zum Online-Abruf.
Import mit Warnungen
Warnungen zeigen Ersetzungen und Einschränkungen an; sie garantieren keine perfekte Übereinstimmung. Prüfe die genannten Ebenen, Bilder und Schriften. Bei leeren Ausgangsdaten Haupt-HTML, lokale Pfade und statischen Inhalt vor dem nächsten Export prüfen.
Keine Projektdateien auf CoreBase-Servern
HTML wird lokal in einem isolierten Browser-Frame analysiert. Das Plugin liest lokales JSON ohne CoreBase- oder externe API-Aufrufe. Importierte Ebenen gehören anschließend zur Figma-Datei, für die Figma-eigene Speicher- und Datenschutzeinstellungen gelten.
Genauigkeit und Vertrauen
Gebaut, um nützlich zu sein. Entwickelt, um überprüft zu werden.
Wir testen und überprüfen CoreBase-Tools, Formeln und Informationen, um sie nützlich und genau zu halten. Gelegentliche Ungenauigkeiten oder Umstände, die für Ihre Situation spezifisch sind, können sich dennoch auf ein Ergebnis auswirken. Überprüfen Sie daher wichtige Entscheidungen anhand Ihrer eigenen Anforderungen.
Haben Sie etwas gefunden, das nicht richtig aussieht? Sagen Sie es uns, damit wir es überprüfen und verbessern können.