Wireframer

Wireframer

Jim Raptis · 圖片 · 程式設計

Wireframer 是一款免費的 Figma 外掛,能讓線框圖填上獨一無二的 SVG 插圖。調幾個參數,就能把客製視覺放進任何版面。

Wireframer 的介面預覽

關於 Wireframer

What Is Wireframer

Wireframer 是一款 Figma 線框圖外掛,專門替線框圖產生填充插圖。你得到的不是灰色方塊和假文字,而是可以直接拖進版面的 SVG 圖形。它服務的是那些希望初稿看起來有意圖、而不是一片空白的設計師,也是不少團隊拿来做線框圖填充的順手工具。

外掛出自設計師 Jim Raptis 之手,他同時做了 wireframer.art 這個網頁版。你挑一個風格、調整參數,外掛每次都會吐出一張不一樣的填充插圖。快速草稿和精緻畫面都能用,做為 Figma 線框工具相當輕巧。第二種用途是產生等角插圖,適合需要比平面方塊更有質感的時候。

安裝前有兩件事值得先知道。它跑在 Figma 裡,所以是設計工具,不是獨立網站。它也是個小而專一的工具:負責做填充視覺,就這樣。想要版面範本、原型或完整設計系統的人,得另尋他處。

Getting Started

  1. 打開 Figma,進入社群的 Wireframer 外掛頁面
  2. 安裝外掛,然後在檔案裡從外掛選單啟動它
  3. 調整風格、形狀等參數,直到預覽看起來順眼
  4. 把生成的 SVG 插圖放進你的線框圖或插畫裡

產品資訊

快速了解 Wireframer 的定價、支援平台與效能。

免費方案是
付費方案Free
平台Figma (design plugin), Web
開發者Jim Raptis
類別圖片 · 程式設計
發布日期Dec 2019
最近更新Dec 2019
網站訪問量5.3M
網站全球排名5.9K
API 提供狀態否

適合對象

這項工具最適合的使用者、任務與情境。

使用者

  • UI 與 UX 設計師:希望線框圖的填充內容看起來是刻意安排的,而不是空蕩蕩的灰方塊
  • 自由接案者:獨自工作的設計師,得快速填滿草稿,沒空去找圖庫素材
  • 設計系學生:想讓練習版面在課堂或作品集裡端得上檯面
  • 產品團隊:會分享早期畫面,希望它在評審時讀起來清楚
  • 簡報製作者:臨時要做投影片或提案,需要輕量的填充圖

任務

  • 填滿線框圖:把空的圖片區塊換成填充插圖,讓版面保持好讀
  • 產生等角視覺:替某個區塊做一張插圖,比平面方塊更有層次
  • 做一份草稿:在拿給客戶看之前,先讓低擬真畫面有點樣子
  • 測試版面:把插圖放到不同位置,看整體構成撐不撐得住
  • 完成作品集:替練習作品加一張看得出質感的圖

情境

  • 開始新專案:先把畫面排出來,讓佔位圖從第一版就顯得有意圖
  • 準備客戶評審:把粗略草稿弄得體面一點,讓回饋聚焦在結構而不是空白
  • 課堂教學:讓學生看到填充插圖如何加快線框階段的腳步
  • 組提案簡報:來不及找真圖時,先放一張輕量插畫頂上
  • 勾勒插畫:用等角模式先探索視覺,再動手畫

主要功能

SVG 佔位圖生成

Wireframer 的核心任務,是把幾個設定變成一張獨一無二的線框圖佔位圖。輸出是一張 SVG 填充插圖,屬於向量圖,任何尺寸都保持銳利,放進 Figma 畫框也不會走樣。每張結果都是重新生成的,所以一整頁佔位圖不會看起來重複。這個功能就是拿來取代灰方塊的。

可調參數

你用滑桿和選項控制外觀,而不是靠固定的預設值。參數讓你調整風格和形狀,直到佔位圖與它所在的區塊契合。這份控制權,正是 Wireframer 和靜態填充素材的差別。你不是從清單裡挑,而是把結果調到位。

等角插圖模式

除了單純的佔位圖,這個工具也能做等角插圖。當某個區塊用平面矩形顯得不完整、放一張帶體積感的小圖更好時,就派得上用場。這是線框之外的第二种用途,走的還是同一套可調邏輯。畫面需要一張看起來經過思考的圖時,設計師就會轉向它,而這正是等角插圖外掛的定位。

支援高擬真設計

Wireframer 對快速草稿和較精緻的畫面都合用。在草稿上,插圖讓版面有足夠質感去判斷間距。在乾淨的畫面上,同一份輸出也體面到能分享。它不會逼你在動手前先選定一個擬真層級。

在 Figma 內運行

外掛就住在你的 Figma 工作區裡,沒有匯出再匯入的步驟。你生成插圖,然後放進正在編輯的同一個檔案。整套線框流程都留在同一個地方。對本來就在用 Figma 的團隊來說,它直接嵌進每天的工作流。

網頁版搭配工具

開發者也推出了 wireframer.art 網頁版,選項比外掛更多。想在安裝前先試風格、或需要更廣控制項的人,可以從那裡開始。它是搭配工具而非替代品,用更多彈性處理同一件填充任務。

優缺點

優點

  • 免費安裝,可以在真實檔案上試用而不必付費
  • 每次都生成不一樣的 SVG 插圖,一組佔位圖不會看起來一模一樣
  • 可調參數給你控制權,而不是固定的素材組合
  • 等角模式在填充線框之外多了一種用法
  • 在 Figma 內運行,沒有匯出或重新匯入的步驟

缺點

  • 工具很專一:只做填充視覺,沒有範本也沒有原型功能
  • 需要 Figma 才能跑,沒辦法當成獨立的線框應用程式使用
  • 外掛很小,最後一次更新在 2019 年底,功能組也就此固定
  • 輸出是隨機的,有時得試幾次,佔位圖才會與區塊合拍

常見問題

Wireframer 在 Figma 裡替線框圖填上獨一無二的 SVG 插圖。你調幾個參數,把結果放進版面,初稿就不會看起來像空蕩蕩的灰方塊。