反轉影像顏色是在位元層級將每個紅色、綠色和藍色通道替換為其互補值，對每個通道套用 output = 255 減去 input 的公式，同時保留 alpha 通道不變。當套用於完全不透明的來源時,這條規則會將黑色變成白色、白色變成黑色、紅色變成青色、綠色變成洋紅色、藍色變成黃色,過程中不涉及任何感知校正、gamma 調整或底片遮罩移除。想要在點陣圖(例如 JPG、PNG、GIF 或 WebP)上產生此效果的 Figma 使用者,無法直接在 Figma 內套用,因為 Figma 的原生色彩控制項作用於填色、描邊和圖層效果,而不是作用於匯入點陣圖內部的像素資料。可靠的做法是先從 Figma 匯出影像,在本機執行以瀏覽器為基礎的 RGB 反轉,然後將新的靜態 PNG 以替換圖層的方式拖回同一個 Figma 檔案。
為什麼 Figma 無法自行反轉點陣圖
Figma 將匯入的點陣圖視為不透明的像素容器。你可以移動、調整大小、遮罩、以圖層不透明度混合它們,並套用整個圖層的混合模式(例如 Difference 或 Invert),但 PNG、JPEG、GIF 或 WebP 內部的底層位元值會保持你置入時的狀態不變。原生的圖層混合模式會將像素與圖框中位於其下方的內容重新組合,並不會改寫儲存的位元。
真正的位元層級反轉只會發生在向量填色、描邊、文字,以及 Figma 自有圖層上一小組效果上。一旦你將手機拍攝的 JPG、PNG 螢幕截圖,或從行銷匯出的 WebP 放到 Figma 畫布上,你就已經將顏色鎖定在固定的點陣位元中。設計師會求助外掛,或更常見地,先在 Figma 外部編輯檔案,再將其換回來。
反轉影像顏色工具正好符合那個外部編輯的步驟。它會讀取實際的位元容器,透過瀏覽器解碼第一個影格,對 Canvas 所公開的每個 RGBA 位置套用公式,並以原始尺寸匯出靜態 PNG。不會上傳任何內容,不會由伺服器重新壓縮,也不會在未經你許可的情況下取樣或調整大小。
先將影像從 Figma 匯出
先在 Figma 內匯出你想要反轉的影像。在 Layers 清單中選取該圖層,然後在右側面板中選擇 Export。為了讓工具的容器檢查通過,請選擇最接近你要反轉之來源的格式:
- 如果你的來源具有透明度或銳利邊緣(例如 UI 螢幕截圖、圖示或貼圖),請選擇 PNG。
- 對於相片和雜訊較多的產品照片,請選擇 JPEG,並接受失真壓縮的權衡取捨。
- 當來源是動畫 GIF,而你只想要第一個影格反轉後的靜態預覽時,請選擇 GIF。
- 當來源是具有透明度的現代網頁匯出檔時,請選擇 WebP。
請將匯出維持在原始解析度。反轉工具會拒絕任一解碼邊超過 8,192 像素,或總像素面積超過 24,000,000 的檔案,因此 4K 或 8K 相片完全可能在進行任何反轉之前就被拒絕。如果你的匯出檔案太大,請先使用 Image Resizer 流程將圖層縮小,或裁切掉多餘的邊緣,再進行匯出。
使用瀏覽器工具在本機反轉影像
一旦檔案存到磁碟後,反轉本身只需三個操作步驟,並且全程都在你目前的瀏覽器分頁內完成。
- 開啟反轉影像色頁面,選擇 PNG、JPEG、GIF 或 WebP 檔案。等待位元容器偵測、瀏器解碼和尺寸驗證完成,且未出現任何錯誤。
- 工具會反轉解碼後的第一個影格,並並排顯示兩個原始尺寸的 PNG 預覽:一邊是來源,另一邊是反轉後的結果。請加以比較,以確認效果符合你想要的樣貌。
- 確認尺寸和回報的輸出位元大小,然後下載靜態 PNG。檔案會以真正的 PNG 容器和原始像素尺寸,儲存到你的下載資料夾。
下載是透過 Canvas 的 toBlob 流程進行,因此輸出會是一個完整的 PNG,絕不會是不完整的檔案,也不會是被悄悄降階成 JPEG 的檔案。如果反轉因某項防護(例如 null Blob、輸出超過 32 MiB,或同步例外)而失敗,忙碌狀態會清除,不會留下任何過期的下載,讓你可以放心地重新執行該步驟。
將反轉後的 PNG 放回 Figma 中使用
將下載的 PNG 直接拖入開啟中的 Figma 檔案。Figma 會將其視為一個全新的點陣圖圖層,反轉後的顏色已經烘焙到像素中。將新圖層置於原始圖層之上,為其重新命名以利辨識,並在確認替換後的結果符合你的圖框版面配置後,隱藏或刪除來源圖層。
如果原始影像位於元件或鎖定的圖框中,請將新圖層放在同一個圖框上,然後在來源上按右鍵並將其移至最下層,或在使用移動工具複製其變形屬性後將其刪除。偏好非破壞性往返流程的設計師,通常會將來源圖層設為靜音,並在其上方使用反轉圖層,這樣檔案就能在不重新執匯出的情況下進行切換。
對於已經使用共用元件的大型畫板或設計系統,一個乾淨的做法是將反轉後的 PNG 儲存到 Figma 素材庫,或儲存到已連線的團隊素材庫,讓每個消費端圖框都能拉到同一個反轉版本。
色彩對應規則,以表格呈現
反轉規則與 Figma 用於向量填色和描邊的位元層級運算相同。因為它是位元運算而非感知運算,所以下表的對應是精確的:
| 來源顏色 | RGB 輸入 | 反轉後的 RGB 輸出 | 可見結果 |
|---|---|---|---|
| 純黑 | (0, 0, 0) | (255, 255, 255) | 白色 |
| 純白 | (255, 255, 255) | (0, 0, 0) | 黑色 |
| 純紅 | (255, 0, 0) | (0, 255, 255) | 青色 |
| 純綠 | (0, 255, 0) | (255, 0, 255) | 洋紅 |
| 純藍 | (0, 0, 255) | (255, 255, 0) | 黃色 |
| 中間灰 | (128, 128, 128) | (127, 127, 127) | 接近中間灰,差一個位元 |
最後一列是有意設計的:真正的中間灰位元是 128,而 255 減 128 得到 127,不是 128。位元規則不會對齊到完美的鏡像,而是產生字面上的互補位元。因此,對同一組解碼位元執行兩次反轉,會還原為原本的值,這是最簡單的方式來確認該演算法是位元精確的,而非近似值。
開始前必須知道的檔案、邊界與像素限制
有四項獨立的限制會決定工具接受或拒絕你的檔案。全部都在精確的邊界進行檢查,只要超出位元或像素一個單位,就會遭到拒絕:
| 限制 | 數值 | 檢查位置 |
|---|---|---|
| 輸入檔案大小 | 最大 15 MiB | 回報的 File size 與實際的 ArrayBuffer 長度 |
| 解碼邊長 | 每邊最大 8,192 像素 | 在 createImageBitmap 回報尺寸之後 |
| 解碼總面積 | 最大 24,000,000 像素 | 解碼點陣圖的寬度乘以高度 |
| 輸出 PNG 大小 | 最大 32 MiB | 在 Canvas 將結果編碼之後 |
15 MiB 的輸入預算和 32 MiB 的輸出預算是刻意分開的,因為一旦每個像素都完全不透明,解碼後的 PNG 大小可能會膨,特別是對於雜訊較多的相片。如果反轉後的 PNG 超過 32 MiB,工具會在發佈 URL 之前讓匯出失敗,因此你絕不會看到寫到一半的檔案,或被悄悄以失真的 JPG 取代 PNG。
容器檢查同樣在位元層級上嚴格執行。工具不會信任檔名、檔案選擇器的篩選條件,或作業系統的 MIME 標籤。它會驗證 PNG 的簽章加上 IHDR 與結尾的 IEND、JPEG 的 SOI、隨後的標記與結尾的 EOI、GIF87a 或 GIF89a 的標頭加上 logical-screen 結構與 trailer,或是 WebP 的 RIFF 大小加上 WEBP 標記以及一個有界範圍的 VP8、VP8L 或 VP8X 第一個區塊。魔術位元被截斷、被重新命名的任意檔案,以及不支援的格式(例如 SVG、AVIF、HEIC、BMP、TIFF 或 PDF),都會在 Canvas 開始工作之前就失敗。
這個效果是什麼,不是什麼
反轉是一種位元通道的視覺效果,不是色彩管理轉換,也不是底片負片修復。它不會線性化 gamma、不會建模感知互補色彩、不會移除掃描檔中的橙色遮罩、不會校正曝光,也不會進行色調分級。EXIF 方向標籤、GPS、ICC 色彩設定檔、註解以及其他來源中繼資料,都不會被帶入 PNG 匯出檔中,因為 Canvas 的像素匯出不會保留它們。當動畫、嵌入的設定檔或中繼資料很重要時,請保留原始檔案。
動畫 GIF 和動畫 WebP 輸入會使用瀏覽器解碼後的第一個影格,並成為單一的靜態 PNG。後續的影格、時間、循環、調色盤和銷毀行為都不會被保留,這對於目標是為 Figma 圖層產生單一反轉圖形的用途來說,是正確的行為。如果你需要在動畫流程中取得反轉結果,請先使用 GIF Splitter 將來源分割成影格,反轉每個圖塊,然後使用 GIF 製作工具將它們重新組合起來。
本機瀏器處理有助於私,但成功的解碼並非惡意程式分析、內容審查、作者身分驗證,也不能證明影像可安全使用。請將輸出視為你所產生的位元,而非關於來源的證據。