使用 Sketch,您可以輕鬆匯出預設值、切片、匯出 CSS 和 SVG 程式碼(從任何瀏覽器),以及匯入其他檔案。
匯入影像
將檔案匯入 Sketch 的最快方法是將它們拖放到 Dock 圖示上或直接拖放到畫布上。您可以匯入
- PNG、JPG、GIF、TIFF 和 WebP 點陣圖影像
- Figma 檔案 (.fig)
- SVG 檔案
- SVG 程式碼(複製程式碼並貼上以建立圖層)
- PDF 文件(每個頁面都將作為其自身的畫板匯入)
- AI 和 PSD 檔案(支援有限,僅作為平面化圖層)
如果您要匯入動畫 GIF 或 WebP 影像,Sketch 只會匯入第一個影格。請注意,由於 Apple 在 macOS Sonoma 中取消了對 PostScript 檔案的內建支援(其中包含 EPS 文件),Sketch 已不再支援 EPS 檔案。
匯出畫板和資源
要以不同大小或格式匯出畫板或資源(並允許其他人一次從網頁應用程式匯出所有資源),請選取它們,然後按一下檢查器底部的**設為可匯出**面板。然後,按下**匯出所選項目**按鈕。
注意:開發人員可以在 Mac 應用程式中匯出個別圖層,而無需任何設定。
或者,在選單列中選擇**檔案** > **匯出** — 或按下 ⇧⌘E 以顯示匯出對話方塊。選取您要匯出的項目,然後按一下**匯出**以開啟 MacOS 儲存對話方塊。
您可以在儲存到 Mac 之前選擇要匯出的項目。
Sketch 匯出您的資源後,您會在畫布底部看到「已成功匯出 X 個檔案」的確認訊息,其中 X 是建立的檔案數量。如果您只匯出一個檔案,您會看到它的檔名。
點選確認訊息中的箭頭,即可開啟儲存項目的資料夾。
將圖層匯出為 PNG 檔
要將一或多個圖層匯出為 PNG 檔,請從圖層列表中選取並將它們拖曳到桌面上(記得先透過檢查器將它們設定為可匯出),或選取您的圖層並按下 ⌘E。
您可以透過將圖層拖曳到桌面上快速匯出。
您可以複製任何圖層或畫板,並將其直接貼到另一個應用程式中作為影像。如果您貼上的應用程式支援向量資料,則貼上的圖層將保留為向量,您可以安全地放大。如果不支援向量資料,Sketch 將以 2 倍解析度貼上您的圖層。
您可以直接從 Sketch 複製並貼上高品質影像。
以 PDF 格式匯出畫板和圖層
要將圖層匯出為 PDF 檔,請在圖層列表中選取它們,然後按住 ⌥ 再拖曳圖層。
要將選取的(或所有)畫板匯出為 PDF 檔,請選擇「檔案」>「匯出」>「將畫板匯出為 PDF」,然後選取您的畫板。您可以選擇包含畫板標題、將它們渲染為點陣圖或包含畫板註釋(僅限工作區文件)。您也可以透過前往「檔案」>「匯出」>「將註釋匯出為 CSV」以 CSV 格式匯出工作區文件中的註釋。要選擇畫板匯出的順序,請前往「設定」中的「圖層」面板。
如果您想從任何瀏覽器下載資源並檢查設計,請前往我們的開發者交接文件。
匯出的檔案格式
點陣圖
點陣圖影像是您在 Mac 應用程式中匯出的任何內容的平面化版本,因此它們將在其他應用程式中作為單個圖層開啟。Sketch 可以匯出為 PNG、JPG、HEIC、TIFF 和 WebP 格式。
根據您選擇的檔案格式,您可能還會看到更多匯出選項。
- 儲存為網頁用:從某些影像中移除額外的檔案資料,例如 EXIF 中繼資料和色彩描述檔。
- 交錯 PNG:在網頁上,交錯 PNG 會盡快以完整大小載入,並下載更多資料直到達到完整品質。
- 漸進式 JPG:與交錯 PNG 類似,漸進式 JPG 在開始載入時會模糊,然後逐漸變得清晰。
- 品質:對於 JPG 和 WebP 影像,較低品質的影像檔案大小會較小。
向量圖
向量圖影像格式保留圖層和路徑,因此它們易於編輯且可以無限縮放。Sketch 支援 SVG、PDF 和 EPS 向量格式。
某些效果並非所有檔案格式都支援,包括 PDF 中的透明漸層,以及 SVG 中的內部和外部邊框。
列印畫板或切片
選擇「檔案」>「列印」,然後選取您要列印的畫板。如果您還沒有任何畫板,則可以改為列印切片。
使用匯出預設值
Mac 應用程式預設會將所有內容以實際大小 (1x) 匯出為 PNG,但您可以在檢查器的匯出預設值面板中指定不同的匯出設定。

檢查器中的影像匯出選項
- 尺寸 — 從下拉式選單中選擇尺寸,或直接在「尺寸」欄位中輸入您要的尺寸建立您自己的尺寸。 您可以無限放大 (2 倍、3 倍等) 和縮小 (0.5 倍、0.25 倍),或以像素定義特定的高度或寬度 (分別為 128h 或 128w)。
- 前綴/後綴 — 如果您要以不同的比例匯出相同的影像,可以使用「前綴/後綴」下拉式選單新增前綴或後綴來區分每個影像,並在檔名欄位中新增自訂文字。
- 格式 — 從下拉式選單中選擇檔案格式。
- 移除預設集 — 按一下 X 即可移除匯出預設集。
- 新增預設集 — 按一下 + 即可將此圖層的另一個預設集新增至您的匯出設定。
- 預設集 — 按一下
即可選擇一組預先定義的預設集。 您也可以在這裡建立新的預設集並將其移除。
- 建立切片 — 按一下
,即可使用您設定的匯出預設集,直接在您選取的圖層上建立切片。
- 匯出所選項目 — 按一下此選項即可使用上述預設集匯出特定圖層。
- 預覽 — 顯示匯出圖層時的樣子。 您也可以將此項目直接拖放到桌面或另一個應用程式中,以便快速匯出。
- 分享 — 按一下此選項即可透過郵件、訊息、AirDrop 等標準選項進行分享。
- 修剪透明像素 — 根據您的選擇,您可以移除您匯出的群組或切片中,圍繞內容的透明像素。
使用切片
切片 是一種圖層類型,您可以在畫布上繪製此圖層,並將其中的任何內容匯出為影像。 您可以像其他圖層一樣選取、調整大小、移動、隱藏和群組切片。
插入切片
選擇「插入」>「切片」,或按下 S 鍵。 然後,在畫布上的任意位置按一下並拖曳以繪製新的切片,或按一下任何圖層以在其周圍建立切片。
如何插入切片
建議您在「圖層清單」中為切片提供描述性名稱,因為 Sketch 會將其用作您建立的任何匯出項目的檔名。 如果您在名稱中包含 /
,Sketch 會將您在 /
之前寫入的任何內容用作資料夾名稱,並將 /
之後寫入的任何內容用作該資料夾中的檔名。
與其他圖層一樣,您可以為切片設定多個匯出預設集。
自訂切片
選取切片後,您會在「檢查器」中找到一些其他選項。
勾選「修剪透明像素」將會移除切片內容邊緣周圍的任何空白像素。
如果您將切片放置在群組中,勾選「僅匯出群組內容」將會確保匯出內容僅包含該切片群組中的內容。
最後,您可以勾選「背景顏色」並選擇一種顏色,將背景顏色套用至您的切片匯出項目。
匯出 CSS 和 SVG 程式碼
在您的文件中選取一個或多個圖層,按住 Control 鍵並按一下滑鼠,然後選擇「複製 CSS 屬性」,即可將樣式資訊以 CSS 程式碼複製到剪貼簿。 以下是一個簡單圖案 CSS 範例
/* Rectangle: */
background: #6dd400;
border-radius: 5px;
/* Rectangle: */
複製 SVG 程式碼的方式也類似。 選取圖案圖層,按住 Control 鍵並按一下該圖層,然後選擇「複製 SVG 程式碼」。