Figma 情蒐組合技 — 高清長頁面截圖 + 截圖文字辨識

圖片來源 Unsplash — 萬用的工具

今天分享 2 種實用冷門技巧 — 高清長頁面截圖 ( by Insert Big Image ) 與截圖文字辨識 + 整理 ( Recognize + TextCutter)，利用這免費 3 個 Plugin 可以進行高精緻度的參考案例蒐集。

先來說明一個日常產品設計日常會發生的情境 :

小明要設計一款電商購物車，小明決定針對國內前 10 大電商的 PC / 手機網頁做競品調查，將其全部截圖，放入 Figma 中。

這些電商網頁的截圖很長，Desktop 中長達 5 個捲屏；手機上則因為小螢幕而長達 10 個捲屏。

當圖片置入 Figma 時，Figma 會強制壓縮圖片的長寬、限於單邊 4096px，導致小明置入的競品截圖資訊模糊且尺寸失真。

置入高清長頁面截圖

圖 1 — 直接貼上導致圖片壓縮 ; 圖 2 — Insert Big Image 讓螢幕截圖以原始比例載入；圖 3 — Insert Big Image 操作流程

1. 如前述圖 3 ，我先用 Chrome 插件 GoFullPage 將網頁做滾動截圖，截完的長截圖再以 png 型式存到電腦中
2. 開啟 Figma Plugin — Insert Big Image
3. 將電腦中的長截圖拖拉進 Plugin 工作區
4. 完成！ Plugin 自動將圖切成多段迴避掉 Figma 的「過大圖片壓縮機制」，放到同一個 Frame 裡接續起來。

現在我們蒐集到很多參考物了，開始進行設計。

當小明在設計時，突然想 Copy 競品網頁上的文字 ( 商品 / 價錢 / 使用條款 ) 作為擬真資料用時該怎麼辦？

一個一個回去找當初截圖的網頁嗎？
一字一字手 Key 嗎？

不，讓我們在 Figma 中直接圖像文字辨識。

一字一字手 Key 嗎？不，讓我們在 Figma 中直接圖像文字辨識。

截圖文字辨識

1. 截取要辨識的圖。
2. 開啟 Plugin — Recognize，選擇要辨識的語言。
3. 完成後獲得多個 Text Layer，包含各個文字辨識結果。
4. 當要把多行文字合一、以利整段複製時，用 TextCutter ( 我在《Figma — 中英空白修正與多行文字拆合》後半段有介紹使用方式 )
5. 完成。

截圖文字辨識 + 結果整理成單一 Text Layer

日常設計工作中也有一些其它會使用到截圖文字辨識的情境 —

1. 如 PM / 行銷發需求給設計師時給的參考圖
2. 從 Mobbin 等參考案例庫取得的競品 UI 圖
3. 複製他人的簡報資訊 ( 我們沒有編輯權時 )

儘管市面上也有不少免費服務做文字，但因為需要先將截圖存檔、再上傳到免費服務中，流程相較螢截圖到 Figma 中做辨識多了存檔、上傳 2 步驟。

相較之下本次的方法更適合大量作業用。

為何不使用 html.to.design

最後，談論一下為何不使用 html.to.design 將網頁轉成完整設計稿？

html.to.design 這個 Figma Plugin 只有限額免費，目前每 30 天提供 12 次。

FREE version includes up to 12 imports every 30 days

而且若網頁中有 body 以外的捲軸時，其截取容易失敗。我認為它更適合用在很確定要換原成設計稿的情境 — 例如把公司的舊網站建檔以做重新設計。

以上是我這次的分享，謝謝~