Class LLL / 設計星團教材目錄編輯與來源

Figma Design 教材 / Class LLL

匯出：交出去的是尺寸、像素，還是可編輯來源？

先定對象與範圍，再驗收檔案

從匯出尺寸不對切入，用原創匯出檢查台改倍率、留白與切片，實際下載PNG／JPEG／SVG／PDF檢查。正文分開透明、文字／效果／色彩限制與可編輯性，不用副檔名保證保真。

撰寫與維護：Class LLL · Lab Light Label｜預估閱讀 15 分鐘

開啟互動教材查看參考來源

閱讀目標

適用條件與學習範圍

看起來一樣的預覽，為何下載後尺寸、透明或文字編輯能力不一樣？

能選正確對象與輸出界、算點陣倍率、核透明及格式支援，實際檢查檔案並向收件者說明可編輯性限制。

固定160×100原創基本圖形、有限留白及固定起點切片；只示範本地四種檔案，不做Figma匯出引擎、任意文字輪廓化、效果／色彩轉換、動畫或原生.fig來源交接。

原理與判斷

匯出是把某個範圍轉成某種交付資料。先問收件者要看外觀、放入網頁、印刷還是接手編輯，再決定對象、範圍與格式。PNG能透明不代表仍可改shape；SVG能縮放不代表原生效果或文字一定保留；PDF能開啟不代表可回編同樣圖層。 本站下載是真檔案但素材與產生器皆本站原創，不是從Figma匯出。以本站結果練習驗收，再回Figma用實際原稿與目標環境核對。

先選對象，再加匯出設定

Figma Design可匯出圖層、框架、元件、群組、區段、切片或整頁畫布。選對象後，有編輯權限在右側欄底部匯出按+，選格式、倍率／尺寸，必要時預覽，再匯出；檢視模式從屬性找匯出，Dev Mode只顯示所選對象的設定。多選時預覽不顯示，不要把看不到預覽當匯出壞了。 任何方案通常可檢視就能匯出，但擁有者可限制複製／分享；切片需可編輯。瀏覽器送到瀏覽器下載位置，桌面版可選檔名／位置。要一次匯出目前頁已設定的項目，檔案 > 匯出，Windows Shift+Ctrl+E、Mac Shift+Cmd+E。整份.fig來源與靜態輸出是不同交接，不用PNG冒充可編輯檔。

範圍與切片：裁掉的是哪裡？

一般選取物件的整體範圍／留白會隨物件變化；切片用絕對範圍，只有界內內容輸出，可由Region tools建立並調位置尺寸。本台「原稿＋留白」是本站明定160×100加四邊0／8／16；切片起點固定(32,16)，寬高獨立調整，故來源沒變也能裁到不同內容或留空。這不是Figma所有圖層的bounds演算法。 匯出的Ignore overlapping 圖層預設開，只輸出選中對象；關閉可把交疊內容納入。切片放在框架／群組內且開此項，只納同容器且位於切片內的內容；關閉時納入範圍所有可見內容。切片在容器外，此開關沒有作用。框架背景可在填色的Show in exports取消；先確認要透明還是漏背景，不用放大縮放修裁界。

倍率改像素，縮放檢視只改檢視

PNG／JPEG可設x倍率、w固定寬或h固定高。原範圍176×116在2×成352×232像素；不是只改檔名，也不是把工作區縮放檢視拉200%。SVG／PDF原生匯出倍率只1×，向量可縮放也仍有頁面範圍和支援限制。本站向量檔因此鎖1×；PDF另採1模型單位=1pt的本站約定，不拿它宣稱Figma的單位換算。 Figma一般影像按72DPI、2×為144DPI；重新放回Figma可能依密度縮小視覺尺寸。像素數、密度及畫面顯示尺寸是三件事，不能只看到「2×」便保證印刷品質。用檔案真像素及收件尺寸核對，文字與細線再於目標顯示比例觀察。

PNG與JPEG：透明及壓縮責任不同

PNG為無損點陣、支援透明色版，適合需透明及清楚邊緣的圖像，但shape／文字已成像素。JPEG為有損、無透明色版，適合可接受壓縮的照片類；要事先決定背景色，不能靠副檔名變透明。Figma可設JPEG影像品質，PDF中的影像品質也可設；高品質不會恢復低解析原稿。 本站PNG／JPEG用Canvas2D，JPEG品質固定0.85且白底；角落透明像素可實際驗收，右側縮圖沒有模擬JPEG壓縮。Detailed為官方預設bicubic，Basic為nearest neighbor，支援PNG／JPEG／PDF；本站沿瀏覽器編碼與取樣，不冒稱同原生resampling。

SVG與PDF：文字可見，不保證能改

Figma SVG是XML向量格式；描邊會轉成填色，預設轉外框文字把文字轉glyph輪廓，可關閉保留文字但收件者需字型，字寬及外觀仍要驗。Include id依圖層 name產生，Simplify 描邊預設處理vector network內／外描邊，關掉可能用更重的描邊與遮罩結構。程式碼能開不代表保留原生圖層控制。 Figma PDF為1.7，文字成glyph、不能編輯，雖可選取／複製也不能據此說仍是文字編輯檔。本站SVG特意保留基本文字，PDF則用Helvetica、PDF1.4及本站白紙約定；與Figma預設不同，檔內SITE DEMO及檔名site-original標示責任。要可編輯原稿，另確認原生檔、字型、元件／權限與接手流程。

效果、色彩與格式限制逐項核

SVG不保留背景模糊，必要時改直接模糊圖層並重新確認外觀；玻璃效果也不支援SVG或Sites。PDF不支援Plus darker／Plus lighter。別用PNG看起來相近推成所有效果仍可編輯；需要像素外觀時選點陣並查原尺寸邊緣，需向量時另設替代外觀並驗收目標閱讀器。 匯出設定檔預設Same as 檔案，也可選sRGB或Display P3。P3在不同收件環境不一定相同，色彩管理與目標環境須一起確認；本站只是有限RGB基本圖形，沒有色彩轉換或廣色域保真證據。文字專用Include bounding box決定按文字框架或glyph取界，也會影響輸出尺寸；本台不模擬任意文字字寬。

以真檔案驗收，再交接來源責任

先在本站改2×下載PNG，開檔查352×232像素及透明角落；切JPEG核對白底。切固定切片改寬高，下載SVG查寬度／高度與viewBox，PDF查頁面與原創標記。右側固定大小縮圖方便比裁界，倍率不必讓工作台跟著放大，尺寸答案以讀數與檔案為準。 回Figma用同一檢查清單：對象、bounds／內距、比例與像素、背景／透明色版、文字、效果、設定檔及目標程式外觀。需要動畫另查Motion，靜態PNG／SVG／PDF不能當時間行為保真；交付附用途、檔名及尚未驗證事項，收件方實開確認。

步驟與觀察

  1. 問收件用途並選輸出對象

    確認需外觀像素、透明、向量、文件或可編輯原稿；選正確圖層／框架等，核檢視／編輯及擁有者限制。 操作名稱對照（中文為本站教學譯名）： 選圖層／框架／群組 > 右側欄匯出 > +（介面原文：選layer／Frame／Group > 右sidebar Export > +） 匯出 > Format／縮放／預覽（介面原文：Export > Format／Scale／Preview） Region tools > 切片（介面原文：Region tools > Slice） 檔案 > 匯出（介面原文：File > Export）

  2. 設匯出與範圍

    匯出按+，選格式／尺寸，核背景Show in exports與Ignore overlapping 圖層；需要固定區域才建切片，核所在容器。

  3. 分清倍率與原尺寸

    PNG／JPEG設x／w／h；SVG／PDF只1×。算真像素，不把縮放檢視或重新置入尺寸當同一答案。

  4. 先查格式條件

    透明用支援透明色版格式；文字outline、效果／混合／設定檔與取樣逐項核對，需編輯另交原生來源。

  5. 下載實開檔案

    預覽有助查但不能替代檔案；檢查像素／頁面、透明、文字與效果、目標閱讀器，記錄尚未實測部分。

常見問題

匯出2×，看起來仍一樣大

預覽或檢視器可能縮放顯示；查檔案像素，不看縮圖。重新置入也可能依密度調顯示尺寸。

JPEG角落變白，不能透明

JPEG無透明色版；選PNG／合適SVG並核背景是否仍勾Show in exports。本站JPEG明定白底。

調縮放仍裁掉外緣

縮放只改採樣尺寸，先改選取／框架或切片範圍，核效果與祖先裁界及Ignore overlapping 圖層。

SVG文字跑版，PDF能選卻不能改

核SVG 轉外框文字與收件者字型；Figma PDF文字glyph不等同可編輯文字。另交原生來源並確認權限。

玻璃效果或背景模糊匯出失效

SVG不支援玻璃效果／背景模糊；改適合格式或設計替代並實開驗證，不把本站有限模型當原生渲染證明。

適用範圍與證據

原教材查核日期：2026-10-22 適用範圍：Figma Design靜態匯出所有方案；可檢視通常可匯出但擁有者可限制複製／分享，切片需可編輯。瀏覽器／桌面版下載位置與Windows／Mac快捷鍵分開；不聲稱全功能測試版、動畫保真或原生來源已交付。 來源狀態：重讀FG10在22日robots允許後單線Scrapling --ai-targeted新抓的Export全文，以及FG07同日新抓formats／effects全文；同日來源重用，不假稱FG40又抓。 示意限制：本站原創160×100基本形狀／字樣，留白及固定起點切片、Canvas2D PNG／JPEG（0.85白底）、基本SVG及PDF1.4白紙／1單位1pt；各檔有SITE DEMO標記。不模擬原生文字輪廓、bounds、效果、色彩、取樣／壓縮保真。 原生軟體實測：未Figma原生或跨程式保真實測；只驗本站公開下載及檔案結構／像素，與官方事實分開。 學習成效驗證：未真人試用，無學習或遷移成效證據。

參考來源

來源依原教材逐頁維護；本次建立閱讀網址不代表重新完成原生軟體或真人學習測試。如遇版本差異或內容錯誤，歡迎來信提出具體段落與版本。

相關知識