教材目錄 / Class LLL
Figma Design 教材
從任務、方法與概念開始閱讀，理解選擇的理由、適用條件與限制。每篇提供原教材正文、參考來源與互動入口。
- 框架與群組：容器的邊界由誰決定？
改容器寬度、移動其中一項，還是整組搬走？用同一批子物件比較框架與群組，辨認父子關係、框架邊界及裁切內容的顯示範圍。
- 構成、比例與空間組織
用同一組件移位、改尺度和間隔，觀察平衡、正負空間、分組與閱讀意圖。幾何資料幫你指出變了什麼，觀看目的與必要內容才決定取捨；沒有一個比例或中心位置保證好看。
- 文件、頁面與檢視：空白畫面先查哪一層？
文件迷路時，先區分資料夾、檔案、頁面、區段與檢視範圍。從分層文件櫃切頁及定位區段，觀察內容改變和純檢視改變的差別，再核對新舊介面名稱與字型條件。
- 選取與堆疊：看不見，還是選錯層？
內容被蓋住、隱藏、鎖住或只是面板收合，會出現相似症狀。沿父子層、選取入口與圖層前後順序，找出各自的作用範圍。
- 對齊歪掉：先分基準、幾何與整體縮放
單選對父層、多選對彼此、整組對父層會產生不同結果；等間距也不是平均中心距。用定位尺台比較調整尺寸／縮放、旋轉原角與AABB，再以有限1px直線點陣分開輸出倍率與檢視放大。
- 形狀與布林：保留哪個區域，留下哪些來源？
圖示孔洞要保留哪一塊？用原創矩形比較四種布林、來源點與前後層，再分清向量網路、形狀建立工具、描邊轉外框及定型的回改責任。
- Draw：改路徑、筆觸，還是表面？
筆觸粗細不只是一個大小值。用原創三點線架分開改路徑、均勻／收尖筆寬與顆粒，再核對Draw的鉛筆／筆刷、Basic／動態、重複Transforms、雜訊／紋理及回改／輸出限制。
- 影像填充：原圖還在，為什麼看不完整？
照片被切掉時先查填滿模式。比較填滿、符合、裁切、拼貼及框比例，再分清多填色、四類漸層、圖樣來源與Video播放／方案條件。
- 遮顯：內容被哪一層規則擋住？
內容消失時，先核對框架的裁切、遮罩的類型與兄弟堆疊，再查整層不透明度與父層混合隔離。三盤保留來源、遮罩來源與結果，用深淺底確認哪些內容仍存在、哪些背景參與合成。
- 效果外緣：陰影被裁，該查哪一道界？
陰影被裁不只查模糊。用效果光學盒比較內側／置中／外側、投影、圖層模糊及背景模糊，核對父框架裁界；正文逐項交代端點轉角、七種效果、堆疊與玻璃效果／輸出限制。
- 文字框與繁中排樣：變窄時，資訊去了哪裡？
長標題擠出時，先保留原文，再比較固定框、自動高度與自動寬度。用真實繁中與英文排樣、字距／行高及字型條件，看清是哪個條件改變了行數；本站瀏覽器量測不冒充Figma排版引擎。
- 排版參考線與量測：參考線會幫你排版嗎？
版面對不齊時，先說清要對哪條邊，再看Columns、Rows、方格及尺規線。切顯示或改欄數不等於建立內容流；用獨立物件座標與邊界讀數分開判斷，再理解參考線與約束的條件。
- 約束：父框變大，子項該跟哪條邊？
改框後跑位時，先指出哪個框架是子項的直接父層，再比較左側／右側、雙邊、置中與縮放。用同一原稿的不同約束稿看邊距如何保留，分開一般框架、排版流及忽略自動排版的條件。
- 自動排版：位置由哪條排版規則決定？
按鈕間距不一致時，先找父容器的規則。切換水平／垂直、改間距和內距、對齊與子項順序，再增減內容，觀察同一串項目如何重新排列。
- 固定尺寸、依內容調整、填滿：尺寸由誰決定？
依內容調整或填滿不見、文字變長擠出按鈕、拉窄後版面溢出，先分清指定尺寸、內容需求與父層可用空間，再檢查最小值／最大值與有效條件。
- 換行：什麼時候換行，什麼仍會超出？
標籤超出時，換行不等於自動縮小內容。改寬度、固定高度、項目數與長標籤，比較水平分行／垂直換欄、兩種間距及對齊，辨認長單項與交叉軸溢位。
- 格線：什麼需要列欄與跨格一起決定？
卡片跨兩欄時，不只看下一項放不放得下。改列欄、數量、欄軌fr與A跨格，區分自動列數、儲存格內對齊、二維格線與換行／參考格線。
- 巢狀排版：角標跟內容，還是跟框邊？
角標跑掉可能來自不同父層、內容順序或尺寸責任。改卡片寬與長文字，對照內列填滿／固定尺寸、角標在流內或忽略自動排版，觀察父框高度、頁腳與重疊如何一起變。
- 主元件與實例：改一處，誰會跟著變？
改一個全跟著改，或改完另一份毫無反應？先辨認main、實例和普通圖形副本，分開修改來源預設與局部文案，觀察同檔傳遞的範圍，再查回真正來源。
- 覆寫與解除連結：更新為什麼沒跟上？
更新沒跟上時，先查是不是Text、填滿或巢狀引用的局部覆寫。比較同一來源下的A與B：單項重設回目前來源，替換需核對層名與原值，解除連結保留當時外觀但失去外層更新。
- Variants：尺寸與狀態，怎樣才是一個組合？
按鈕狀態不是多複製幾張圖就完成。用尺寸與State矩陣查每個組合對到哪個變體，辨認預設、缺組合及重複，再分清設計外觀與原型互動。
- 元件屬性：改文字、顯示與來源，該選哪一種？
改元件內容時，先問要改字串、顯示圖示、換巢狀來源，還是選另一個離散設計。用同一顆Button的四個具名控制比較Text、布林值、實例替換與變體，理解預設、作用部位及限制。
- 巢狀實例：讓必要控制浮到外層
控制藏太深時，先認識Card→Button→Icon的巢狀關係。從內層觀察既有屬性，再暴露到外層；比較推薦與其他同檔來源，追蹤改動落在Label還是Icon引用，讓操作介面清楚且保留來源。
- 內容槽：卡片內容不同，怎樣保留元件連動？
卡片內容不同，不必立刻解除連結。原生內容槽屬性讓實例在指定區域內增減、改尺寸與重排內容；外框仍與主件連動。用內容承接框比較內容槽、單一實例替換與解除連動，並試看指引警告、來源更新及刪除屬性的內容風險。
- 樣式引用：整批改字級，哪一份會跟著變？
整批改字級前，先查文字是否引用同一個樣式。比較改本地定義、改不屬於文字樣式的填色、解除連結保留值及重新套用，分清五類當期樣式、單一變數值與跨檔資源庫更新。
- 變數型別與綁定：名稱相同，為何不能接？
找得到變數卻套不上，可能不是名稱錯誤。用有限配對盤比較六種型別、集合來源、作用範圍、Design屬性、原型四型與Motion用途。
- 別名參照與語義命名：這個顏色從哪裡來？
改一個顏色卻波及不該改的地方，或只有一處沒更新？沿使用位置、語義別名參照與原始值追蹤來源，再決定修改哪一層。
- Modes與繼承：子層為什麼沒跟著換？
父框換成Dark，子層卻還是Light？沿子層明確指定、自動、父層、頁面與集合預設查來源；分清跨集合選擇與框寬。
- 主題、密度與Token：換色後真的可讀嗎？
深淺主題不是只換背景，密度也不是把字一起縮小。比較色彩對、數值留白、文字配方與長文案，理解語義設計代碼、樣式及模式的分工與DTCG匯入匯出邊界。
- 資源庫：修改、發布與接收為何分開？
更新沒出現時，先分清來源本地、已發布資產與收件檔套用版本。比較元件、樣式及變數的引用，預覽後接收，再辨認可用庫入口、局部覆寫與同名資產替換的邊界。
- 設計系統文件：先說用途，再決定新增
元件該不該新增，先比較單次覆寫、擴充既有與新建模式各自的用途和影響。讀三份變更前後文件，補狀態、相容與替代方案，再區分原生描述／資源庫功能、Analytics觀察與仍在預覽的集中治理。
- 原型點了沒反應：先查熱點、觸發與導向
先分設計框架與流程起點，再查目前頁的熱點、觸發條件、動作與目的地。用兩頁信號盤比較點擊時／tap與Enter、導覽至與返回，重播與補讀返回都保有可解釋的脈絡。
- 彈窗與捲動異常：先找覆蓋層及捲動的父層
彈窗位置不對或固定條跟著跑，先分Open／替換／關閉覆蓋層，再指出主框架與內框哪個正在捲動。比較Scroll with 父層／固定尺寸／Sticky與有限直接父層，核一般auto-layout 流程及Ignore例外。
- 動態突然跳：先查配對，再選轉場節奏
同起終點卻突然跳，先查智慧動畫能否把兩個物件當成同一個，再查屬性是否支援。用雙游標台分開時間與輸出進度、持續時間與曲線，提供少動態的手動端點比較。
- 按鈕只有長相：把變體接成互動狀態
有Off／On兩個變體，不表示播放時會自動切換。從同set的切換為接起，觀察懸浮／press暫態與click，再比較巢狀父層目標及同觸發條件的實例導覽優先。
- 條件永遠同結果：追值與動作次序
輸入明明改了，條件卻走舊結果？用分流器把待Set輸入、播放變數與判斷快照分開，調換動作次序觀察同一條件如何走If或Else。
- 第二次播放不同：重啟前先核初始條件
同一個按鈕第二次走不同路，可能只是播放值已改。保留同一起點比較續播與本站重啟，再核預覽／播放起點、分享權限與能重走的紀錄，不把自動檢查當真人試用。
- 分享與權限：有連結，為什麼還不能改？
對方打不開文件，或看得到卻不能編輯？先確認收件人與存取來源，再查可檢視／可編輯及席次。用虛構權限對照板找出下一步，並分清留言、回覆和已解決的意義。
- 版本歷史與分支：回復、另存還是合併？
想回復或合併時，預覽、命名版本、另存副本、還原與Branch各改不同對象。用固定虛構衝突比較main與分支，再按目的及權限決定下一步。
- 匯出：交出去的是尺寸、像素，還是可編輯來源？
從匯出尺寸不對切入，用原創匯出檢查台改倍率、留白與切片，實際下載PNG／JPEG／SVG／PDF檢查。正文分開透明、文字／效果／色彩限制與可編輯性，不用副檔名保證保真。
- Dev Mode：量測、註記與交付責任
工程師不知道規格時，先核可讀的設計版本、尺寸與變數，再查註記及準備開發／Changed。比較屬性與自由文字，讓程式片段、設計完成及成品驗收各有清楚責任。
- Code Connect、MCP與API：脈絡如何變成實作
設計能否自動變正式碼？Code Connect連實作、MCP提供工具與脈絡、REST處理HTTP資源、外掛在文件環境讀寫。逐條核來源、作用範圍、檔案條件與執行位置，知道還缺哪些程式與驗收。
- 匯入交接：畫面一樣，還剩哪些資料可改？
從貼進來不能改切入，比較原創文字SVG包、輪廓SVG包與PNG副本。指出字串、向量、像素及來源連結的責任，保留Ps／Ai母稿，不用副檔名或畫面相近保證往返無損。
- 社群資源：取得、執行與再散布
下載資產能否商用，先分檔案、外掛與互動小工具，再查免費／付費授權、成品與來源再散布、執行資格及資料流。看版本與字型條件，不能只用能下載或核准標記推所有權利；必要時改原創幾何。
- AI改稿：先查內容、來源與回改
AI改稿可否直接用？用三份本站固定候選比較原句、元件來源與一步回改。分開Design 代理程式、個別Add interactions工具、即將推出與Unsupported，再查方案、席次、草稿、聊天可見、訓練設定與點數。本站不執行生成。
- 程式層：會動的內容，還保留哪一種來源？
可互動內容是什麼？比較Design原生框架、原型與程式層，區分目前狀態、局部與錄製流程擷取；可改設計層、推回程式及正式產品各需不同證據。
- FigJam：白板共識如何交給Design
從流程討論查入，用三張虛構便條重排順序、對照預寫摘要與Design待補條件。分清便條、connector、投票、計時及Open session各解決什麼，交接保留原句與不確定，不把白板連線當正式產品。
- Slides：同一份設計如何講給不同聽眾
設計要拿去講解，先選聽眾與要支持的決定，再把原稿、講者筆記、互動與交付條件分開。比較Slides／Design 模式、範本／資源庫及PDF／PPTX／素材輸出，保留母稿，不承諾往返無損。
- Sites：畫布能看，網站還要驗什麼？
設計能否發布網站？比較Design與Sites、breakpoints及CMS 集合／field／項目，列鍵盤、內容、SEO與發布範圍，再分畫布修改與公開版本。本站只做原創對照，不發布外部網站。
- Make：候選能操作，來源與快照怎麼改？
提示做出來如何修改？比較預寫候選、只讀規則與獨立Design快照，觀察缺資料／失敗路徑；再核Make檔、準則／Make kits、模型點數、後端與發布的各自責任。
- Buzz：模板守住了品牌，內容就一定放得下？
從大量社群圖切入，以兩筆原創活動內容比較長文、預設尺寸、缺圖與品牌限制。完整交代Buzz模板發布／使用、Bulk create CSV／XLSX、核准、影像／影片與AI資格，不把guideline當全面品質保證。
- Motion：在等一次點擊，還是在安排一段時間？
從要做動態切入，對照原型事件端點與Motion時間作品；手動逐格看時間和數值進度、來源色及靜態替代。正文涵蓋時間軸／關鍵影格／預設組合／路徑／trim、樣式／時間／緩動、輸出與handoff，保留當期資格與文件差異。
- Weave：流程能重跑，就代表結果可信嗎？
從多步生成怎麼檢查切入，用原創固定工作流標本比較來源、紀錄與兩個預繪候選。分清Design內Weave tools與獨立Weave、節點／連線／必填／seed、分享發布及模型資料條款；不執行生成，也不把流程圖當品質證據。
- 明暗、對比與視覺焦點
明暗區間是全圖的範圍，局部對比是相鄰區域的差異。比較兩個焦點方案，觀察重點如何改變，也檢查增加反差時犧牲了哪些細節；這是跨工具的視覺判斷。
- 色彩屬性、關係與面積
分開改色相、明暗、強度和面積，觀察同一組色在不同關係中的差異。主輔色與互補只是描述及選擇，不能替代觀看目的、必要辨識或色彩管理；沒有唯一好看比例。
- 線條、紋理與節奏
同一個外形可以被線條說明，也可以被紋理遮住。比較方向、線距與重複中的變化，再以真正較少的像素檢查目標尺寸；先判斷形體線索和裝飾的取捨，才選用紙幣風格或網點方法。
- 光影、反射與材質線索
形體轉面、亮帶邊緣、反射內容與背景一起提供材質線索。比較只加反差與重排亮暗帶，找出支持或衝突之處；不是用一個亮點判定金屬，也不是物理渲染。
- 文字、圖像與閱讀層級
用同一份展覽資訊比較標題與活動資訊兩種層級，再分開改字級字重、行高字距和圖像占位。讀數描述排樣，閱讀障礙仍需自己指出；不是Photoshop文字控制教學或美感評分。
- 工具可及性、行動檢視與成品語義
手機不能編輯Design時，先辨檢視者與產品；鍵盤或讀屏遇阻時，查工具支援及替代。再把Figma視覺意圖、本站真HTML試片與實際成品語義分開驗證。
- 卡片破版：用內容找出父子尺寸責任
卡片拉窄後溢位，先看內列、文字框與外框各由誰決定尺寸。用兩組原創繁中／英文內容、真瀏覽器量測與標籤排列比較，逐層修正，再把理由帶回Figma功能頁。
- 可組合卡片：內容不同，也能保持更新
卡片結構不同時，從通知、預約與警示三張原創卡抽共同殼，將文案交給屬性、Tone交給變體、可增減Body交給內容槽。更新來源後檢查局部內容，並比較固定案例變體、重設、刪屬性與解除連結的不同代價。
- 多主題與多語：先追來源，再修長內容
換主題後難讀，先查子層模式和局部固定值；換語言後超出，再看原文字型、內容容量及日期等語言情境。把別名參照、文字尺寸與主題配方串成可重走的診斷方法。
- 流程總是成功：補齊可重走的失敗與修正
點得通只代表有一條路。比較多框架固定連線與變數讀寫分流，用本站三份固定資料重走空值、失敗、返回修改與成功，再核次序、元件回饋及重啟初值。
- 可追溯交付：版本、來源與目的要一起帶走
交付缺資料時，先說收件目的，再追目前檔案、資源庫發布／接收及交付快照。分原始來源、靜態圖、原型、動畫與程式脈絡，列回改及驗收條件，讓收件人知道拿到什麼、仍缺什麼。
- 多語服務預約：保住內容，再重走失敗與修正
用原創諮詢服務的繁中／英文長標題及三個固定時段，改窄寬、尺寸責任與時段排列；再走空值、載入中、錯誤、返回保已選與示意成功。網站真HTML可操作，與Figma視覺稿和真正預約系統分開驗證。
- 案例：從白板反例到元件與簡報
從虛構白板證據比較固定高與可組合內容，加入長說明反例後看審查未過，修規則與來源，保留收件標題覆寫，最後另更新簡報快照。不把AI摘要當訪談，也不假裝跨產品自動同步。
- 案例：同一場活動，三種媒介怎麼交？
用同一份虛構春日活動需求簡報比較靜態向量、時間動畫及假設生成候選。換長名與比例，查缺圖、對比和模板限制，再留下有限檢查記錄；不把候選當攝影、來源註記當授權或模板當審批。
- 案例：介紹頁要交設計、程式，還是網站？
從原創小樹工具介紹選Design 原型、程式層、Make或Sites，換窄幅／空內容，查真連結與焦點，再比較目前來源、靜態設計副本與本地公開演練版。不是工具能力偵測，也不執行生成、帳戶或外部發布。
- Specs：設計理由與參照如何交接
設計理由如何交接？用原創需求與文件夾比較Specs、設計畫面和偽碼，核對舊參照與收件者存取。當期公開測試與入門方案／付費席次官方差異保留待核，沒入口仍可用一般文字文件；本站不建立或同步雲端Spec。
- 生成產物：外掛、著色器與單次候選
想重用AI操作，先辨存的是外掛程式、著色器填色／效果，還是一次固定結果。原創標本櫃比較輸入、輸出、保存與再次取用，核共享Design 編輯、代理程式資格與WebGPU；退役文字建議及現行Rewrite／Translate分開，本站不生成或執行工具。