Design EditorDokuImport und Export
Import
Holen Sie Figma-Dateien, pen.dev-Dateien, SVG, Webseiten und Screenshots als bearbeitbare Ebenen herein.
1Figma
- Wählen Sie in Figma File, Save local copy, um eine
.fig-Datei zu erhalten. - Öffnen Sie sie mit Datei, Importieren, Figma (
Cmd+Shift+F), über die Karte auf dem Startbildschirm, per Doppelklick oder indem Sie sie auf das Fenster ziehen. - Wählen Sie die gewünschten Seiten oder Alle Seiten importieren.
- Wählen Sie Figma-Layout beibehalten, um Positionen unverändert zu lassen, oder Design Editor Auto-Layout, um Stapel neu aufzubauen.
Alles, was sich nicht exakt übernehmen ließ, wird als Warnung aufgeführt. Auch Ebenen in Figma zu kopieren und hier einzufügen funktioniert.
2pen.dev
Eine .pen-Datei öffnet sich als neues, unbenanntes Dokument; das Original wird nie zurückgeschrieben. Shader, Skripte, Notizen und Browser-Knoten werden übernommen.
3SVG und Bilder
Das Bild-Werkzeug platziert PNG-, JPEG-, GIF-, WebP- und SVG-Dateien; SVG wird zu bearbeitbaren Vektorebenen. Rasterbilder können auch direkt auf die Leinwand gezogen werden.
4HTML
Datei, Importieren, HTML (Cmd+Shift+H) nimmt eine .html- oder .htm-Datei oder eine .zip mit ihren Stilen und Bildern an. Der Import berücksichtigt CSS-Kaskade, Variablen, Media Queries und Grid und listet auf, was er annähern musste.
de import:html https://example.com --viewport-height 9005Einen Screenshot nachbauen
Die Screenshot-Karte auf dem Startbildschirm schickt ein PNG oder JPEG an den Agenten, der es als bearbeitbares Design nachbaut.
6Chrome-Erweiterung
Die Erweiterung im Repository überträgt die Seite, die Sie gerade ansehen, in den laufenden Editor. Sie kann die ganze Seite erfassen, ein einzelnes Element auswählen, eine design.md extrahieren oder eine .de-Datei herunterladen.
Sie ist noch nicht im Chrome Web Store. Bauen Sie sie aus packages/de-chrome-extension und laden Sie sie als entpackte Erweiterung in Chrome 110 oder neuer. Sie kommuniziert nur mit dem Editor auf Ihrem eigenen Computer.