在 Figma 中建立圖片佔位符，意指將一張扁平、大小正確的 PNG 拖入框架中，讓版面在真實美術素材完成前看起來已經齊備。最可靠的做法是先在瀏覽器中產生佔位圖，再拖入或匯入 Figma。本地建立的 PNG 可離線使用，絕不會因為外部佔位符服務變更回應而改變，而且能精確符合你想填入之框架的像素尺寸。由於佔位符是你電腦上的一個真實 PNG 檔，Figma 會把它當作一般圖片素材處理:可以調整大小、套用遮罩、隨畫布其他內容一起匯出，之後再換成最終美術素材。這種做法也避免了為了一個帶文字的矩形就安裝 Figma 外掛，並且當你與協作者分享 Figma 檔案時，草稿依然保持自包含。
圖片佔位符在 Figma 框架中的作用
Figma 中的佔位圖是一種替代性素材，用來佔據最終照片、插圖、螢幕截圖或產品算圖將會出現的視覺位置。與其讓框架留白——這會迫使審閱者自行想像該放什麼——設計師會放上一個有標註的矩形，同時傳達尺寸與用途。常見的慣例是把目標尺寸直接打在矩形上，例如 1200 × 630，這樣任何檢視檔案的人都能一眼看出該位置預期的長寬比與解析度。
佔位符在設計流程的三個時刻最為有用:低擬真度的線框稿(著重於版面與層級)、中擬真度的 mockup(文案與結構已接近定案但真實照片尚未到位)，以及設計交付(開發人員需要清楚知道每張圖在建置中的位置與大小)。在這三種情況下，佔位符都回答了每位審閱者都會問的同樣兩個問題:這個位置多大以及這裡要放什麼類型的圖。
為何本地 PNG 往往是更好的佔位符
Figma 提供多種方式來填滿框架的佔位內容。你可以畫一個矩形並在上面打字、安裝一個可放入風格化素材的社群外掛、貼上遠端佔位符 URL，或匯入自己產生的 PNG。每種方法各有利弊，正確的選擇取決於你最在意的是視覺擬真度、檔案可攜性，還是隱私。舉例來說，託管於遠端的佔位符 URL 一旦該服務變更回應、重新導向或離線，就會立刻失效——這對交付給客戶或長期保存在文件中的檔案來說是真實的風險。
| 作法 | 可離線運作 | 顯示真實尺寸 | 需要外掛或 URL | 跨編輯穩定 |
|---|---|---|---|---|
| 來自 Placeholder Image Generator 的本地 PNG | 是 | 是(尺寸已燒入) | 否 | 是 — 檔案永遠不變 |
| Figma 矩形加文字 | 是 | 僅在你自行輸入時 | 否 | 是 |
| 社群佔位符外掛 | 視外掛而定 | 通常否 | 是 | 可能因更新而損壞 |
| 託管佔位符服務的 URL | 否(需要網路) | 有時 | 是(第三方) | 否 — 服務可能變更 |
本地產生的 PNG 對大多數 Figma 工作來說最接近實用上的甜蜜點:看起來是有意為之、會標示尺寸、不依賴任何第三方，而且能以一般圖片素材的形式存在於共享的 Figma 檔案中。同一檔案之後也能當作固定素材來對框架截圖，因為標籤會告訴你實際渲染的尺寸。
使用 Placeholder Image Generator 製作 Figma 用的圖片佔位符
Placeholder Image Generator 會產生你將拖入 Figma 的 PNG 檔。畫布繪製、文字渲染、PNG 編碼、預覽與下載全部都在瀏覽器分頁中執行，不會上傳到任何伺服器。單一位置使用一次，或在一張 mockup 螢幕需要多個不同佔位符時批次使用皆可。
- 以整數像素輸入確切的輸出寬度與高度。對應你想填入的 Figma 框架尺寸;每邊接受範圍為 1 到 10,000 像素，並受總計 40 百萬像素畫布預算的限制。
- 使用原生選色器選擇背景與文字顏色。兩者皆使用六位數十六進位值;背景會塗滿整個畫布，文字則繪製於前景色上，不會自動調整對比、漸層或透明度。
- 可選擇性地取代預設的尺寸標籤。留空會列印已驗證的尺寸(例如 1200 × 630)，或輸入最長 80 個 Unicode 字元的短字串——工具會去除空白、將文字水平與垂直置中，若文字會超出畫布則以省略符號縮短。
- 選擇Create placeholder，然後檢查結果列中確切的尺寸、實際渲染的標籤，以及大約的檔案大小。
- 下載 PNG。檔案會命名為 placeholder-WIDTHxHEIGHT.png，在充滿 mockup 素材的資料夾中容易辨識。
若單一佔位符不足以應付整張 mockup 螢幕，請為每個位置重複上述步驟。由於頁面上的預覽可能會依你的螢幕進行視覺縮放，在將素材對應到 Figma 框架時，請一律信任結果列中印出的尺寸，而不是螢幕上看到的大小。
將產生的 PNG 拖入 Figma 框架
PNG 一旦存到電腦中，加入 Figma 就只是指指點點的事。下列流程在 Figma 桌面應用程式與瀏覽器中皆可運作。
- 在 Figma 中，選取你想填入的框架。從右側屬性面板記下其寬度與高度——在 Placeholder Image Generator 中輸入相符的數字，讓素材以正確大小置入。
- 將下載的 placeholder-WIDTHxHEIGHT.png 從檔案總管直接拖到 Figma 畫布上。Figma 會將它匯入為一個置於游標位置的圖片圖層。
- 若框架已將 Fill 設為 Image，請改將檔案拖到圖層面板中的框架縮圖上——Figma 會取代填色，而不是在上方建立獨立圖層。
- 調整匯入圖片的大小以完全符合框架。使用右側面板中的位置與尺寸欄位輸入目標寬度與高度，或按下 K 啟用縮放工具，並以 Shift 鎖定比例。
- 若該框架位於元件內部，在圖片圖層上按右鍵並選擇Set as thumbnail——這會讓元件的每個實例都參考這個佔位符，直到你換成最終素材。
- 當真實美術素材送達時，以同樣方式將佔位符圖層替換為最終圖片。框架的大小與位置不會變動，周圍的版面保持完整。
對於較大型的 mockup 集合，File → Place Image → Multiple 可讓你一次匯入多張佔位符，並排列成網格，接著再拖入正確的框架。以目標位置為下載的 PNG 命名——hero.png、avatar-1.png、product-card.png——即使尚未開始拖放，也能讓 Figma 圖層面板保持易讀。
值得預先建立的常見 Figma 框架尺寸
預先以標準尺寸產生佔位符，能在你知道同一張 mockup 將出現在多種情境時節省時間——例如登陸頁 mockup 上的社交分享卡片，或是同時作為 Open Graph 預覽的 hero 圖片。下列清單使用廣為通用的慣例;Figma 本身並不強制，你的設計可能需要不同的長寬比。
| 用途 | 常見寬度 × 高度(px) | 預先建立的原因 |
|---|---|---|
| 社交分享 / Open Graph 圖片 | 1200 × 630 | 符合通用的大型預覽矩形 |
| 登陸頁上的寬幅 hero 橫幅 | 1920 × 720 | 常見的桌面 hero 長寬比 |
| 方形產品卡 | 800 × 800 | 同一素材適用於格狀、輪播與個人檔案縮圖 |
| 手機螢幕 mockup | 390 × 844 | 常見的現代手機視口基準 |
| 大頭貼 / 圓形個人檔案 | 512 × 512 | 在任何圓形裁切前先確保來源為正方形 |
從熟悉的尺寸開始，代表你產生的佔位符會與之後建置環境所期待的尺寸對齊。若設計最終採用不同的長寬比，請以新尺寸重新產生佔位符，而不是拉伸既有的那張——Figma 會重新取樣，標籤仍然會對應新的渲染尺寸。
Placeholder Image Generator 如何產生 PNG
了解產生佔位符時背後的運作會有幫助，因為同一套機制也說明了為何這個工具的行為具有確定性。表單送出後，產生器會將寬度與高度驗證為 1 到 10,000 範圍內的整數，並確認總像素數不超過 40 百萬像素的預算。接著它會將兩個顏色輸入標準化為六位數十六進位值，選擇你自訂的標籤或已驗證的尺寸作為要渲染的文字，並將標籤修剪至 80 個 Unicode 字元。
畫布元素會以已驗證的寬度與高度(以自然像素為單位)建立。背景使用標準的 fillRect 繪圖基本型別塗滿整個畫布，標籤則以瀏覽器內建的文字繪製 API渲染，水平與垂直皆置中。字級會依圖片較短的一邊縮放，最小 12 像素，最大 96 像素。接著畫布會透過瀏覽器的 toBlob 機制編碼為 PNG，產生扁平、廣泛相容且文字周圍沒有壓縮瑕疵的檔案。每當任何輸入變更時，可下載的物件 URL 就會被撤銷，因此過期的預覽絕不會被誤認為當前設定。
由於沒有任何遠端服務、AI 模型或外部圖片參與，結果是完全可重現的:相同的尺寸、顏色與標籤必定產生相同的 PNG。這種確定性在佔位符同時作為截圖測試或針對 Figma 框架的視覺回歸檢查之固定素材時特別有用。
可預測的 Figma 預留位置技巧
- 從你現有的設計代幣中挑選一個背景顏色。像 #e5e7eb 這種中性灰色讀起來像是「預留位置」又不會太突兀，而深色模式檔案則可以使用 #1f2937 搭配淺色標籤。
- 選擇通過快速對比度檢查的前景與背景組合。這個工具不會幫你調整對比度，所以在 Figma 畫布上，淺灰標籤配淺灰背景會很難閱讀。
- 在早期的線框稿中使用預設的尺寸標籤，這樣任何檢視檔案的人都能一眼看出目標渲染尺寸。一旦該位置的角色確定後，再切換到語意化標籤——例如 hero-photo、product-shot、avatar-1。
- 將原始 PNG 與 Figma 檔案保存在一起。如果你之後需要以不同解析度重新建立模型，產生器可以在幾秒內以新尺寸重建新素材，你無需重新繪製任何東西。
- 如果需要在放入預留位置後反轉或重新上色，另一個 適合 Figma 的本機反轉工作流程 可以在不離開瀏覽器的情況下重新繪製像素。
想深入了解，請參閱 如何在上傳前為 HTML 製作影像預留位置。