Figma Design 教材 / Class LLL

影像填充：原圖還在，為什麼看不完整？

來源、顯示框與映射，分開觀察

照片被切掉時先查填滿模式。比較填滿、符合、裁切、拼貼及框比例，再分清多填色、四類漸層、圖樣來源與Video播放／方案條件。

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

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

閱讀目標

指出來源影像與顯示框各是誰
按需要選完整顯示或填滿框
改框比例與取景後追蹤可見來源
區分影像拼貼、圖樣與Video的輸入及條件

適用條件與學習範圍

框變窄後照片兩邊不見，是來源被刪掉，還是顯示模式只取了其中一部分？

先能辨認框架與內容；可由下方真補讀框架裁切邊界。此頁不要求上傳私人照片或登入服務。

能分清原圖、框、可見區域與填充模式，知道被遮住的來源仍在；不把所有填色都當一張靜態影像。

主教具只比較一張原創PNG、四種無旋轉影像模式。多填色、漸層、圖樣與Video正文逐項解釋，但不冒稱教具已模擬它們；真實重採樣、播放、權限及輸出需另驗。

原理與判斷

Figma把圖片與影片當作填色，而不是必然有一種獨立的圖片層。框尺寸與來源尺寸不同時，填滿模式決定縮放、位置及顯示範圍；框邊看不見的內容，不等於已從來源刪除。先保留原圖比較，再一次只改框比例或填充模式。填滿、符合保留完整、裁切自行取景、拼貼重複原圖，回答的問題不同；不要靠拖拉外框猜是哪個來源被改掉。

五種填色與多填色，不是一種圖片控制

填滿類型包含Solid、Gradient、圖樣、影像、Video。Layer 填色作用在物件內部，描邊填色作用在描邊；物件可有多個圖層或描邊 fills，每一份有自己的屬性。右側加號增加、色塊編輯、eye顯隱、拖曳改順序、minus移除，作用範圍是那一份填色，不等於整層不透明度。封閉物件的內部填色與開放線的描邊要分清；文字填色改字形，不會自動變成文字框背景。若文字後方要背景，應找承接背景的框架等結構。直接把媒體放畫布會建立以它作填色的矩形；匯入SVG則轉向量層，不能把SVG與影像格式混同。

填滿與符合：填滿框，或保留全部來源

原圖標本160×100、框100×100，置中填滿以1倍覆蓋框，左右各遮30，來源可見62.5%；原圖仍160×100。改成符合以0.625倍完整放入，顯示100×62.5，框內其餘3750平方單位未被影像覆蓋。留空是顯示框未填滿，不是原圖突然多了透明像素。真實Figma的填滿會縮放／定位使物件填滿，比例不同時可能裁掉；符合讓來源完整可見，比例不同可能留空。本站只示範置中、無旋轉的幾何映射，數字不保證等於原生重採樣結果。換成橫框、直框與自己的重要主體時，再選擇哪種代價可以接受。

裁切改取景，拼貼重複同一張來源

裁切可調邊界、位置、尺寸與旋轉，官方明示非破壞性。本站只保留無旋轉、框被覆蓋的取景：裁切放大到200%時，100×100框只取原圖50×50；左右取景可讓不同標記出現，但左台原圖不變。這是有限觀察，沒有模擬所有原生裁切手把。拼貼依原圖百分比縮放再重複。標本設25%時每單位40×25，100×100框需3欄×4列（包含右側裁邊）；不是生成一張新大圖，也不是圖樣引用另一個畫布物件。重複邊緣可能被框切到，不能用「有裁邊」判斷拼貼失效。

漸層：類型、色標與位置分工

Gradient有Linear直線過渡、Radial由中心向外、Angular繞起點順時針、Diamond四點由中心擴展且可調寬高。它們是顏色與位置的分布，不是四張預製貼圖。從色塊選Gradient後再選類型，色標決定各色出現的位置；預設兩色標，可加／移／刪，Flip反向、Rotate改方向。先固定類型，只移一個色標看變化，再改類型比較。同一個顏色加透明度也會改過渡，別把一個填色的透明度當整層透明。色標可引用色彩變數，但變數來源與模式責任由本站專頁承接；本教具不假裝用影像按鈕模擬四種漸層。

圖樣引用來源物件，Video還有時間與資格

圖樣填色的來源是同檔另一個畫布物件，可是單層、群組或框架；Select 來源後再調tile 類型、縮放、間距、alignment與不透明度。來源物件改動會更新使用它的pattern，因此回改前要指出來源在哪裡。影像拼貼重複像素影像，圖樣引用物件，不能只因都會重複就視為同一種填色。 Video是影片或animated GIF的填色類型；官方媒體總覽列影片需付費方案，支援MP4／MOV／WebM。原型專文頁首列教育方案、專業方案、組織方案、企業方案，但正文note只列付費教育方案／專業方案／組織方案，資格措辭並不完全一致；本站不保證特定教育或入門方案帳戶可上傳，先依真實團隊與當期方案核對。專文另外區分入門方案協作者可編已有影片、不能上傳，不代表任何入門方案檔都能新加影片。影片專文列H.264的MP4／MOV、VP8的WebM、300MB上限及Figma mobile 應用程式不支援；填滿面板可預覽／定位時間，原型的Video區有autoplay、loop、sound。GIF只在presentation 檢視播放；靜態預覽不等於播放驗證。本頁不連線播放或呼叫服務，不可用時可選有授權靜態影像替代，但會失去時間／互動資訊。

原圖、取樣與輸出，別靠放大預覽下結論

上傳超過4096×4096的資產時，官方媒體文說會等比例縮到最長邊4096或以下，部分metadata可能流失；這是匯入條件，不等於任何匯出尺寸都能補回細節。影像格式支援JPG、PNG、HEIC、WebP、GIF，TIFF只在Safari；實際格式及影片條件依來源核對，不把一張可開圖推成全部媒體都相容。來源、物件尺寸、縮放、取景及目標輸出尺寸都會影響觀察。本站機構把160×100當教學來源像素與世界單位，畫在等角台上並不等於螢幕1:1；沒有重現Figma壓縮、色彩管理、濾波或匯出管線。保留母稿，在實際目標尺寸和接收工具驗證，不以放大預覽保證畫質。

步驟與觀察

先指出填色的作用對象
在可編輯的Figma Design檔選有權使用的物件，於右側填滿或描邊按加號／點色塊，再選Solid、Gradient、圖樣、影像或Video。檢查目前改一份填色、整層還是物件尺寸；保留副本，不需把私人素材傳給本站。操作名稱對照（中文為本站教學譯名）：右側填滿／描邊 > 色塊 > 填色類型（介面原文：右側 Fill／Stroke > 色塊 > fill type）影像屬性 > 填滿模式 > 填滿／符合／裁切／拼貼（介面原文：Image properties > Fill mode > Fill／Fit／Crop／Tile）影像 > 裁切影像（介面原文：Image > Crop image）圖樣 > Select 來源（介面原文：Pattern > Select source）
以影像原稿比較填滿和符合
選影像並Upload from computer，或由工具列Image/video放入。從影像屬性的填滿模式切填滿／符合，先固定框比較重要主體；再改框比例，辨認被遮的來源與未覆蓋區，不把留空都叫透明背景。
進裁切調取景，再試拼貼
雙擊影像圖層、右側裁切影像，或從色塊填滿模式選裁切；調手把、位置／比例等後Enter或點畫布套用。來源未刪，仍能重取景。拼貼用原圖百分比調單位大小，再看邊緣裁到哪一塊；本站以滑桿提供拖曳替代。
逐份檢查多填色與漸層
增加兩份填色，分別改eye／順序／不透明度，指出各自作用；不要拿整層不透明度來修一份填色。Gradient選類型後只改一個stop，確認加／移／刪、Flip／Rotate的責任，不把色標位置和類型混用。
核對圖樣來源及Video條件
圖樣選Select 來源指向同檔物件，再改來源驗證引用。Video先查真實團隊資格、編輯權限、格式／編碼／大小和播放平台；以填滿預覽及presentation實測，不把縮圖當成功播放。當期資格措辭差異保留，不推測帳戶必然可用。
以目標尺寸驗證並記錄限制
記錄來源尺寸、框比例、模式、取景與輸出用途；更換影像會保留既有模式／cropping／位置設定，需再次核對主體。帶自己的長寬比及接收格式重驗；若需框架裁切內容或遮罩，先分清它與影像 crop的作用層。

常見問題

框變窄後主體兩側消失

先查填滿模式與比例，試符合看全圖或裁切重取景；左台仍保留全部標本，遮住不等於刪除。

符合後框有空位，以為圖片壞了

符合優先完整顯示，長寬比不同本來可能留空。決定要保留全圖或填滿框，再選模式與背景，不用刪來源補空。

換了圖片卻沿用奇怪的取景

官方說更換媒體會保留模式／裁切／位置；重看新來源比例及重要主體，再調整取景。

圖樣沒跟著想像的圖片拼貼改

查圖樣的同檔物件來源、tile 類型／縮放／間距等；影像拼貼與圖樣不是同一來源責任。

影片可見縮圖卻不播放或不能上傳

核對方案／團隊、可編輯、檔案格式／編碼及播放平台。mobile 應用程式不支援及GIF presentation播放條件要分清；資格措辭不一致時保留待核，不用靜態PNG冒稱影片成功。

適用範圍與證據

原教材查核日期：2026-10-22 適用範圍：Figma Design；影像／gradient／pattern等官方列所有方案、可編輯，Video需按付費／團隊及當期條件。Video專文頁首與正文資格措辭差異保留，不保證教育／入門方案帳戶上傳。桌面／瀏覽器、Safari的TIFF、mobile 應用程式及presentation播放分開。來源狀態：2026-10-22依robots單線Scrapling --ai-targeted新抓並閱讀八專文相關主體。來源metadata與資格差異留證，HTTP200不當全部功能驗收；沒有舊cache改日冒稱。示意限制：原創160×100 PNG測試卡與取景台，僅影像四模式的無旋轉有限映射。非照片、官方截圖、Figma重採樣或輸出；不以此靜態圖模擬多填色／漸層／圖樣／Video。素材自製，無外部授權依賴。原生軟體實測：未在原生Figma操作／播放／輸出實測；官方文件與本站瀏覽器證據分開。學習成效驗證：未真人試用，沒有學習成效或遷移證據。

參考來源

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