Design Editor文件匯入與匯出
匯入
把 Figma 檔案、pen.dev 檔案、SVG、網頁和截圖匯入成可編輯的圖層。
1Figma
- 在 Figma 中選擇「File > Save local copy」，取得
.fig檔案。 - 透過「檔案 > 匯入 > Figma」（
Cmd+Shift+F）、首頁上的卡片、按兩下檔案，或把檔案拖放到視窗上開啟。 - 選擇你要的頁面，或選擇「匯入所有頁面」。
- 選擇「保留 Figma 佈局」維持原本的位置，或選擇「Design Editor 自動佈局」重新建立堆疊結構。
無法完全照原樣轉換的內容都會列為警告。在 Figma 中拷貝圖層再貼到這裡也可以。
2pen.dev
.pen 檔案會以新的未命名文件開啟，絕不會寫回原始檔案。著色器、腳本、便利貼和瀏覽器節點都會一併匯入。
3SVG 和圖片
圖片工具可以置入 PNG、JPEG、GIF、WebP 和 SVG 檔案；SVG 會變成可編輯的向量圖層。點陣圖也可以直接拖放到畫布上。
4HTML
「檔案 > 匯入 > HTML」（Cmd+Shift+H）支援 .html 或 .htm 檔案，或包含樣式和圖片的 .zip。它會遵循 CSS 層疊、變數、媒體查詢和格線，並列出必須以近似方式處理的部分。
終端機
de import:html https://example.com --viewport-height 9005重現截圖
首頁上的截圖卡片會把 PNG 或 JPEG 傳給 Agent，由它重建成可編輯的設計。
6Chrome 擴充功能
儲存庫中的擴充功能可以把你正在瀏覽的頁面擷取到執行中的編輯器。它可以擷取整個頁面、挑選單一元素、擷取 design.md，或下載 .de 檔案。
它尚未上架 Chrome 線上應用程式商店。請從 packages/de-chrome-extension 建置，並在 Chrome 110 或以上版本中以「載入未封裝項目」的方式載入。它只會與你自己電腦上的編輯器通訊。