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

Figma Design 教材 / Class LLL

效果外緣：陰影被裁，該查哪一道界？

分開幾何、描邊與效果，再核對父框與輸出

陰影被裁不只查模糊。用效果光學盒比較內側／置中／外側、投影、圖層模糊及背景模糊，核對父框架裁界；正文逐項交代端點轉角、七種效果、堆疊與玻璃效果／輸出限制。

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

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

閱讀目標

適用條件與學習範圍

內容尺寸沒有變，為何描邊或陰影已跨出原框？調模糊看不見時，是作用對象、填色或裁界出了問題？

能指出幾何界、描邊界與效果界，核對效果掛在哪層、父層裁界、具名效果支援及輸出範圍，知道有限圖解不代表原生渲染保真。

只用固定80×48矩形、16基本描邊、有限box投影／圖層模糊／背景模糊；原生caps／joins、內陰影、Progressive 模糊、玻璃效果、雜訊／紋理及堆疊以正文交代，不假裝已做全效果或匯出引擎。

原理與判斷

原稿幾何、描邊和效果有不同邊界。一般圖層尺寸不含描邊粗細；效果又可能伸到更外側。只盯寬度／高度或把所有外擴叫「物件變大」，會找錯修正位置。自動排版若選包含描邊另有自己的尺寸計算，不能一律套本頁自由矩形答案。 本台效果掛在框架裡的子層矩形，框架裁的是孩子與其有限效果示意；若效果掛在框架自身，先重新辨對象，不把這組子層算例當成框架自投影或任意祖先裁切的保證。

內側、置中、外側改外緣，不等於改幾何尺寸

選支援圖層，右側欄描邊加號，再設色彩填繪、位置與粗細。內側沿路徑內側，置中兩側，外側外側；多數shape預設內側、line為置中。筆刷／動態只置中，line也不能任選三位置。描邊可多填色，但共用位置、粗細、寬度與樣式。 本台原稿80×48、描邊固定16：內側外緣80×48，置中96×64，外側112×80，原稿都沒變。SVG只支援中心描邊，需要輪廓／simplify或遮罩等轉換，不能由輸出外觀相近推成仍保留相同描邊參數。一般尺寸不含粗細，自動排版包含描邊時另查每層。

端點、join、dash與獨立邊要選對物件

開放路徑只有兩端點時，可在描邊分別設定兩端；多端點網路在進階描邊，想只改一端先Enter選那個point。None不增加端長；Round／Square會往端點外加半個粗細，直線 arrow長度不能自由獨立調。Triangle／Reverse triangle／Diamond等端型依實際物件選單核對。22日向量網路另列Circle arrow，描邊專文未列；前者聲稱six卻列八項，來源有差異，本文不承諾固定種類總數或所有物件都有Circle。 轉角有Miter、Bevel、Rounded；斜角角度決定何角度轉bevel，官方例90°時角≤90°會bevel、大於90°成尖點，不等同其他工具的miter limit。Basic Dashed用虛線長度／虛線間距／端點，Custom以dash,間距交替；原生首尾半長dash，轉外框可改但失去描邊參數。個別描邊只限rectangle、框架、元件／實例，可指定邊或Custom每邊粗細，0移除該邊。寬度設定檔套arrow可能移除箭頭，不能無條件疊所有控制；筆刷／變寬細節真補讀Draw。

Drop與內陰影的方向、擴張與透明條件

選圖層 > 效果加號，選投影或內陰影，開效果設定設X／Y、填滿與不透明度、模糊、擴張。Drop在物件後建立距離，Inner在物件內表現凹入；不是同一團陰影換名稱。每層最多八Drop與八Inner；陰影渲染也分圖層與群組，不以單一矩形結果保證重疊群組完全相同。 擴張只支援rectangle、ellipse、框架、元件；框架／元件還需裁切內容開及可見填色至少1%。API能寫某欄不代表畫布會套用。Drop預設不透過物件透明區顯示，滿足透明填色、只有描邊、非正常色彩填繪或部分透明center／outside 描邊等條件，才可在設定勾Show behind transparent areas；Inner不支援這個選項。本台只有不透明矩形、50%黑投影、無擴張，不用它替代全部條件。

圖層模糊模糊自己，背景模糊處理背後

效果選圖層模糊或背景模糊，開效果設定。兩類都有Uniform及Progressive：前者均勻，後者可調起終的模糊大小、方向及強度。圖層模糊模糊所選圖層自身，可跨出selection邊界；背景模糊作用於後方內容，需透過非全不透明填色才看得到。 官方背景模糊可見填色不透明度範圍列0.10–99.99%，100%會遮住；本台只比較50與100%，不把0透明當已核條件。多背景模糊不會單純累乘，其他background-blurred 圖層可能被忽略；大量模糊尤其background 模糊可因裝置／連線降低效能，可暫停個別效果觀察。本台用8單位格的有限box filter，不是Figma Gaussian、Progressive或抗鋸齒答案。

玻璃效果不是背景模糊的另一個名稱

當期玻璃效果可用任何圖層類型、每層一個，效果 > 玻璃效果 > 效果設定提供Light angle、Light intensity、Refraction、Depth、Dispersion、Frost、Splay。它對背後內容做玻璃效果，100%不透明填色看不到，不支援環境反射；也不支援SVG輸出或Figma Sites。沒有官方硬體最低門檻證據時，不另造GPU或平台保證。 同一物件的玻璃效果與背景模糊不能同時渲染，只顯示先遇到的效果；背景玻璃效果不會納入前景玻璃效果的計算。背景模糊物件蓋在玻璃效果上方會使玻璃效果不渲染，玻璃效果蓋在背景模糊上方則可渲染。這些是具名堆疊條件，不是所有玻璃外觀都能由一個模糊值代替；本台沒有偽造玻璃效果按鈕或折射取樣。

七種效果與排序，不能只按面板上下猜

現行效果有玻璃效果、投影、內陰影、圖層模糊、背景模糊、雜訊、紋理。雜訊最多2、紋理最多1，尺寸／density／色數與紋理 radius／裁切 to shape各有主責，真補讀Draw而不複製同義教材。圖層模糊與unclipped 紋理可外擴；雜訊或clipped 紋理通常在界內，但位於這些外擴效果上方時也可能延伸。 效果可拖handles重排，但實際渲染還依效果類別及圖層／群組：普通圖層上方是圖層模糊／noise／texture，再描邊、inner shadow、填色、drop shadow，最下是background 模糊／glass（兩者衝突只先遇到者）。群組的色彩填繪／遮罩／子層效果作中間集合，不能一律照同層描邊／填色次序。圖層模糊或unclipped 紋理也可能隔離填色／描邊及shadow的混合作用範圍；必要時把混合放整層另核。本文沒有任意堆疊引擎。

查祖先裁界，再分縮放檢視與模型尺度

本台置中16的描邊界(40,24)–(136,88)，投影偏移(24,24)、本站有限box半徑8後，候選合併外緣(40,24)–(168,120)；框架只到(160,104)，開裁切裁掉右8及下16。關裁切才能看完整，並沒有把原稿80×48變大。換圖層模糊、背景模糊時，作用對象與外擴規則也不同。 需要留陰影可調祖先層框架界、內容位置／內距或輸出區域；先辨效果是掛子層、框架自己或更上層。2×檢視只看大，不改模型或匯出縮放，也不代表原生100%像素。回Figma以原尺寸／目標像素查看細線、顆粒與對比，放大只輔助查邊，不以漂亮預覽當交付完成。

可見外緣不是匯出範圍保證

先選要輸出的圖層／框架／群組等對象，再於匯出加設定、選格式與縮放，可用預覽；多選時預覽不顯示。要固定獨立區域可用Region tools的切片，只有切片範圍內容會輸出，其範圍是絕對設定；一般物件的內距／bounds會隨shape改變，不把本站候選外緣直接當Figma匯出bbox。 SVG不支援玻璃效果及背景模糊，描邊會轉換，PDF不支援Plus darker／Plus lighter，SVG／PDF 縮放只1×；PNG／JPG是點陣，JPG無透明色版且有損。可檢視通常能匯出但擁有者可限制複製／分享，切片需編輯；瀏覽器送到下載位置、桌面版可選檔名／位置。檢查實際檔尺寸、透明、效果及目標閱讀器，未測就記未測；可驗收下載的完整旅程由匯出票承接，本頁不假造原生輸出。

步驟與觀察

  1. 保留原稿，指出三道界與作用層

    選正確子層或框架，記寬度／高度、描邊位置／粗細及效果；檢查自動排版包含描邊是否改該層尺寸計算，不由可見陰影猜幾何。 操作名稱對照（中文為本站教學譯名）： 描邊 > 位置／粗細／進階描邊 settings（介面原文：Stroke > Position／Weight／Advanced stroke settings） 效果 > Add 效果 > 效果設定（介面原文：Effects > Add effect > Effect settings） 選父框架 > 裁切內容（介面原文：選父Frame > Clip content） 匯出 > 預覽／格式與縮放（介面原文：Export > Preview／格式與scale） Region tools > 切片（介面原文：Region tools > Slice）

  2. 先核描邊輸入與端點轉角

    描邊加號設位置／粗細；依物件用兩端設定、進階描邊、轉角／斜角角度、虛線長度／虛線間距或個別描邊。遇官方端點清單差異，以當前實際選單核對，不硬找不適用項。

  3. 逐項開效果並記控制條件

    效果選Drop／Inner、Layer／背景模糊或玻璃效果，逐一開效果設定。核擴張物件條件、透明區顯影、填色不透明度、Progressive與玻璃效果相斥／不支援輸出；不要一次加滿再猜因果。

  4. 調排序並查父層裁切

    依效果類別及圖層／群組理解渲染，不只按列表上下猜。選祖先層框架切裁切，比較子層效果外側；若效果在框架自身先重查層級，不套本站子層答案。

  5. 回原尺寸及目標背景觀察

    區分調整尺寸、縮放工具、縮放檢視及匯出縮放。以原尺寸與深淺底查細節，再放大看邊；本站2×與有限box格不作原生渲染證據。

  6. 用實際匯出檔驗證範圍及格式

    確認選取與匯出／切片範圍、預覽、格式支援及權限後匯出；檢查尺寸、透明色版、效果及目標環境。保留原檔，不把轉外框／定型當所有效果保真解法。

常見問題

陰影右邊被切，增加模糊更糟

先查祖先層框架裁切及可用空間；模糊可能增加外擴，不能當放大輸出區。辨效果掛在哪層再改框／位置／輸出區。

背景模糊完全看不到

先查是否有背後內容、填色是否100%遮住，再查玻璃效果衝突／順序；圖層模糊模糊自己，不能當同功能替代。

擴張寫了數字卻沒反應

只支援rectangle／ellipse／框架／元件；框架／元件還需裁切開及至少1%可見填色，API可設不等於畫布可用。

切外側後寬度沒增加，匯出又變複雜

一般尺寸欄不含描邊粗細，外側可見界另算；SVG只中心描邊，需要輪廓或遮罩轉換，實際匯出結構不同。

找不到Circle arrow或端點種類總數對不上

22日兩篇官方清單有差異且向量網路總數文字有誤；按實際物件與選中單點的選單核對，不宣稱固定八種全可用。

玻璃效果在SVG／Sites失效或和背景模糊互蓋

官方明示玻璃效果不支援SVG／Sites；同物件背景模糊／玻璃效果只先遇到者，跨物件前後也有限制。換目標格式或設計並實測，不用本站投影假裝驗證。

適用範圍與證據

原教材查核日期：2026-10-22 適用範圍：Figma Design；描邊／效果列所有方案、可編輯；匯出所有方案，檢視可匯出但擁有者可限制、切片需編輯。玻璃效果不支援SVG／Sites，同物件不能和背景模糊同時渲染；未將全效果標測試版，也不造硬體門檻。 來源狀態：22日依robots單線Scrapling --ai-targeted新抓export及Vector networks並讀相關主體；stroke／effects／formats沿FG07同日新抓來源重讀。端點Circle及總數差異明示，不假稱已原生解決選單差異。 示意限制：原創矩形80×48、固定16基本描邊、24×18個8單位格與有限box半徑0／8／16，三種效果作用對象不同；投影50%黑無擴張、背景模糊填色50／100。不是Figma原生模糊／抗鋸齒／色彩管理／效果或匯出邊界引擎，原生其餘效果與堆疊完整以正文交代，素材原創。 原生軟體實測：未Figma原生、像素等效、端點選單或輸出實測；官方來源與本站公開結果分開。 學習成效驗證：未真人試用，無學習或遷移成效證據。

參考來源

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

相關知識