10. 導出

Guide to exports in Figma

誰可以使用此功能

・支持任何團隊或計劃。
・任何至少可以查看文件訪問權限的人都可以添加導出設置和導出資產。

當您準備好與世界分享時,從 Figma 導出您的設計。導出設置讓您可以自定義 Figma 導出資源的方式。這允許您定義要導出的內容以及導出方式。

將導出設置添加到您的選擇時,設置格式和任何相關設置。

Tips!您還可以在設計工具之間複製圖層、對象、組或框架。我們建議在工具之間複製和粘貼這些資產。了解如何在工具之間複製資產 →Learn how to copy assets between tools →.

導出格式


導出為 PNG
便攜式網絡圖形 (Portable Network Graphics)

PNG 是一種光柵圖形或位圖圖像格式,通常用於在 Internet 上傳輸圖像。在位圖圖像中,每個像素或“位”代表一種顏色。這些位在“地圖”上呈現以構成完整的圖像。

PNG 是一種無損位圖格式,這意味著在壓縮資產時圖像質量不會降低。這允許您在導出圖像時保持圖像的原始質量。

Figma 支持使用 RGBA 顏色模型的 32 位 PNG。 RGBA 中的 A 指的是 alpha 通道,它控制像素的不透明度。無法導出沒有 alpha 值的 PNG。

想分享而不導出?
右鍵單擊一個對象,然後選擇複製/粘貼 > 複製為 PNG。 Figma 將向剪貼板添加一個 PNG(默認為 2x 大小 - 但如果對象具有導出設置,Figma 將使用最大的導出設置)。還可以使用這些快捷方式:
Mac:Command Shift C
Windows:Control + Shift + c

支持的導出設置:僅內容Contents Only

導出為 JPG


(Joint Photographic Group)

JPG 也是一種基於像素的圖像格式。與 PNG 不同,每個 JG 都有固定的尺寸。導出 JPG 是對圖像的有損壓縮。這會導致文件變小,但也會降低圖像質量。

因此,您會看到 JPG 用於印刷設計和攝影,而不是用於網絡。

支持的導出設置:僅內容

導出到 SVG


可縮放矢量圖形 (Scalable Vector Graphics)

SVG 是一種基於 XML 的矢量圖形。這些是基於數值和坐標的形狀,可以在任何屏幕上呈現。

SVG 是一種可擴展的格式,因為它不依賴於像素。由於可以在腳本或代碼中表示 SVG,因此 SVG 是數字設計的流行選擇。

Figma 僅支持以 1x 導出 SVG。您仍然可以通過調整代碼中的值或使用寬度和高度變量來縮放 SVG。例如:<img src="image.svg" width="50px">.

有一些Figma 支持但 SVG 格式不支持的功能:

・角度或菱形漸變(Angular or diamond gradients)。 Figma 會將這些導出為徑向漸變。
・Figma 不會將任何背景模糊(background blurs)導出到 SVG。您將需要直接模糊這些圖層。
・默認情況下,Figma 將任何文本導出為字形。這意味著您無法編輯文本本身。禁用大綱文本設置(Outline text)以保留文本編輯。
・Figma 將筆觸(strokes)作為填充(fills)導出到 SVG。

支持的導出設置:

・僅內容Contents Only
・包含“id”屬性Include "id" Attribute
・大綱文本Outline Text
・簡化筆劃Simplify Stroke

導出為 PDF

便攜式文件格式((Portable Document Format))

PDF 允許您共享複雜的交互式佈局。 PDF 包括固定佈局的文本、字體、矢量圖形和圖像。

PDF 允許您在任何系統中渲染和操作設計的各個元素。這使其成為一種通用格式,因為它獨立於軟件、硬件或操作系統。

Apple 的移動開發語言 Xcode 支持 PDF。這使其成為構建 iOS 應用程序的寶貴工具。使用 Figma 中的 PDF 導出幻燈片或共享用於 iOS 開發的資產。還可以將它們用於印刷設計模型。

Figma 僅支持 1x 的 PDF 導出。選擇另一種格式以不同的比例導出資產。
Figma 目前不支持導出可編輯文本。您將無法編輯從 Figma 導出的 PDF 中的任何文本。在瀏覽器或其他兼容軟件中查看 PDF 時,仍然可以選擇和復製文本。

查看我們的創建精確 PDF 導出器博客文章的路徑Path to creating a precise PDF Exporter,以了解構建 PDF 導出的幕後花絮。

更多導出設置


當您將導出設置添加到您的選擇時,訪問這些額外設置中的任何一個。

單擊屬性面板的導出Export部分以查看和調整任何導出設置。

忽略重疊層(overlapping layers)
此選項可用於PNG、JPG 和 SVG 導出格式

・選中:Figma 僅在導出中包含選定的圖層。與選定對象相交或重疊的任何其他對像都不會影響導出。
・未選中:Figma 包含與所選圖層或組相交的任何圖層。

包括邊界框(bounding box)
此選項僅在 PNG、JPG 和 SVG 格式的文本圖層時可用

・選中:Figma 根據文本本身的尺寸確定導出的大小。 Figma 將修剪並丟棄字符和邊界框之間的任何空間。
・未選中:Figma 通過文本圖層的邊界框確定導出的大小。如果邊界框大於文本,Figma 將在導出中包含空白區域。如果它更小,Figma 將修剪並丟棄落在邊界框之外的文本部分。

包括“id”屬性
此選項僅適用於 SVG 導出

選中後,Figma 會在 SVG 的元數據中添加一個“id”標籤。 Figma 將“id”基於圖層面板中對象的名稱。

Outline文本
此選項僅適用於 SVG 導出,Figma 默認檢查此設置

選中後,Figma 會將任何文本圖層轉換為字形。如果要保留文本編輯,則需要取消選中此設置。這將允許您調整其他系統中的任何文本字符串。

簡化筆劃(Simplify stroke)
在 Figma 中,可以將內部、中心或外部筆觸應用於圖層。 SVG 作為一種格式只支持中心描邊。

簡化筆劃確保其他系統正確渲染內部和外部筆劃。此設置僅適用於 SVG 導出,默認情況下處於選中狀態。在以下條件下可以使用簡化行程:

・導出格式為 SVG
・該層是一個向量網絡,而不是一個基本形狀
・該層使用應用於矢量網絡的內部或外部筆劃

注意:如果選擇不簡化筆劃,Figma 將增加任何筆劃的權重並應用蒙版(mask)。這實現了相同的視覺效果,但需要 Figma 向 SVGs 代碼添加額外的行

從 Figma 導出資源(Export assets


可以限制查看者從 Figma 文件中復製或導出資產restrict Viewers from being able to copy or export assets from Figma files.。用戶為Pro,Education Teams或 Figma Organizations支持此功能。

如果您沒有在右側邊欄中看到“導出”Export部分,則此設置處於活動狀態,您無法從此文件導出資產。

訪問右側欄中的導出選項:

・具有查看權限(can view)的協作者可以從右側邊欄的“導出”選項卡訪問導出設置。
・具有編輯權限(can edit)的協作者可以在“設計”選項卡中找到“導出”部分。

做出選擇


選擇要導出的對象和圖層。這可以是單個圖層或對象、一組對像或畫布上的所有內容。

您還可以使用切片工具導出畫布的一部分use the slice tool to export a portion of your canvas

添加導出設置


導出設置控制 Figma 導出資源的方式,包括比例、格式和其他特定於格式的設置。在右側邊欄的導出部分查看、添加和刪除導出設置。

Tips!如果您已應用導出設置,則可以使用鍵盤快捷鍵導出您的選擇。
・Mac:Shift 命令 E
・Windows:Shift + Ctrl + E

然後,您可以使用導出設置Export Settings來確定您希望我們如何導出它們。

您可以根據需要為您的選擇添加任意數量的導出設置。這些可以是不同格式或比例的組合。

  1. 單擊右側邊欄的“導出”部分中的
  2. 使用後綴字段選擇導出格式。從 PNG、SVG、JPG 或 PDF 中進行選擇
  3. 從列表中的默認值中選擇一個比例,或使用提供的字段輸入自定義大小或比例。輸入一個數字及以下字母:
    在值後添加一個 x 以將其用作乘數
    在值後添加 w 以設置固定寬度
    在值後添加 h 以設置固定高度

4. 單擊打開導出選項菜單並調整任何額外的導出設置extra export settings.
5. 單擊“預覽”Preview旁邊的箭頭 以查看資產外觀的預覽

Tips!以更大的倍數導出您的設計資產,以創建更高分辨率的導出並減少模糊的導出。這將會是更大的文件大小和更高的分辨率
注意:Figma 將圖層名稱中的任何 / 解釋為層次結構,並將您的選擇導出到文件夾中。您可以重命名圖層以移除層次結構並防止 Figma 將資源導出到層次結構文件夾。了解如何重命名圖層 Learn how to rename layers →

編輯或刪除導出設置


您可以隨時刪除或編輯導出設置

  1. 單擊設置的字段之一
  2. 單擊“導出”部分頂部的圖標。
  3. 將從當前選擇中刪除此設置。

導出資源(Export assets
Figma 將記錄您應用於文件導出列表中的選擇的任何導出設置。這允許您通過單個操作導出導出列表中記錄的每個資產

您可以選擇導出特定選擇的圖層或對象,或批量導出所有資產。

導出特定選擇(Export a specific selection)
使用導出設置導出任何選擇。可以在首次將導出設置應用於選擇時執行此操作,或者通過進行已具有導出設置的選擇來執行此操作。

  1. 選擇要導出的圖層
  2. 添加或調整任何導出設置
  3. 單擊右側邊欄中的導出按鈕
  4. Figma 將導出您當前的選擇

批量導出(Export in bulk)


使用導出列表批量導出資源。這包括添加了導出設置的每個選擇。

  1. 單擊菜單並從選項中選擇文件,然後導出。還可以使用鍵盤快捷鍵:
    macOS:Command+Shift+E
    Windows:Shift + Ctrl + E

2. 導出模式將顯示您擁有導出設置的所有選擇。對於每個選擇:
・查看資源的比例、格式和尺寸(scale, format and dimension)
・將鼠標懸停在縮略圖或圖層名稱上可查看導出的文件名
・單擊縮略圖以在畫布中查看該選擇

3. 選中要導出的任何選項旁邊的框。
4. 單擊“導出”按鈕以導出任何選定的資產。

Tips!將設計保存為 .fig 文件以導出整個 Figma 文件。這不會包括來自原始文件的任何評論(comments)、版本歷史(version history)或權限(permissions from the original file.)。只能使用 Figma 打開 .fig 文件。
單擊左上角菜單圖標以打開菜單
選擇文件 > 保存本地副本(File > Save local copy
Figma 會將文件的副本下載到您的下載文件夾your downloads folder