Iconset 免費 icon 圖示管理軟件,跨裝置同步圖示庫

UI 設計師時常需要收集和使用圖示集 (icon set),如 Font AwesomeMaterial Design Icons,但要從多個圖示集中搜尋同類型的圖示是很費時和困難的。圖示管理軟件如 IconJar 可以讓你整理圖示集,以關鍵字搜尋圖示,節省時間,提高工作效率。

以下介紹另一款圖示管理軟件 Iconset,雖然功能沒有 IconJar 那麼齊全,但Iconset 是免費、支援 macOS 及 Windows 雙平台,並且能夠跨裝置同步圖示素材,讓你輕鬆同步公司和個人電腦的圖示,或者跟同事共用素材。

Iconset 基本功能

Iconset 介面

Iconset 與其他圖示管理軟件類似,以資料夾 set、子資料夾 group 和標籤 tags 來管理圖示、支援「黑暗模式」、將圖示設為「最愛」及調整預覽尺寸等功能。要在 Sketch、Figma、Affinity Designer 或 Powerpoint 等軟件使用圖示,只需拖拉圖示到軟件中即可。

與 IconJar 不同的是,圖示集都會自動按名稱排序,不支援手動排序,所以見仁見智。

同步圖示庫,協作必用!

進入設定後,你會看到圖示庫 Icon Library 有兩個選項:移動 Move 和切換 Switch,圖示庫也就是程式中所有圖示集的集合。

移動:將現在的圖示庫移動到別處。
切換:切換到另一處的圖示庫(替換現在的圖示庫)。

從下圖可見,我現在的圖示庫放在 Dropbox 中,因此你只需將本地圖示庫放到 Google Drive、Dropbox 等雲端儲存空間,即可以跨裝置或跟團隊同步圖示庫。

(右欄)放在 Dropbox 的圖示庫

如果你不想跟人分享整個圖示庫,你也可以選擇分享個別的圖示集,只需從右鍵選單中選擇「Copy Link to Set」,並與有安裝 Iconset 軟件的人分享連結,對方打開連結後便能匯入圖示庫到軟件中。

複製圖示集的連結
同步圖示庫後,可透過分享連結打開指定的圖示集

一鍵匯入圖示集

從網頁一鍵匯入圖示集
Iconset 的圖示集資源頁 – Icon Sets

這個功能很貼心,將程式視窗縮窄或使用 macOS 的分割畫面,便可以拖拉圖示到旁邊的圖像設計軟件裏,跟設計軟件的插件 Icondrop 和 Kitchen

面板模式 (Panel Mode)

這個功能也蠻貼心的,你可以將程式視窗變窄或者分割畫面也沒問題。這時候就可以拖拉圖示到旁邊的程式或圖像設計軟件裏,概念跟設計軟件的圖示類插件 IcondropKitchen 有異曲同工之妙。

既然功能差不多,買 IconJar 不是蝕慘了嗎?其實 Iconset 有這些分別…

不要再問有沒有 PNG,功能全為 SVG 圖示而設

你有沒有發現 Iconset 沒有匯出功能?

與 IconJar 不同,Iconset 沒有一次性匯出多個尺寸的功能,甚至不能獨立匯出為 PDF、PNG 或 JPG。你只能拖曳或複製 SVG 圖示,或者複製為 Base64、Data URI、JSX 等程式碼,方便在網頁上內嵌和引入 SVG。

複製選項

基本功能還待日後補齊

Iconset 沒有換色和更改圖示尺寸的功能,匯出時都會跟隨原圖,所以設計師需要自行再手動調整一下,但鑑於 Iconset 是免費使用,所以我覺得還可以。

拖放圖示時會使用匯入時的原有尺寸

身為 UI/UX 設計師,我覺得 Iconset 值得一用!

  1. 如官網所言,搜尋速度真的很快,隨打隨搜。
  2. 同步圖示庫,Iconset 是不二之選。
  3. 方便複製程式碼,並以內嵌方式在網頁上置入 SVG。
  4. 造福 Windows 用家的設計軟件。
  5. 免費,個人使用是很不錯的!

雖然功能不及 IconJar 齊全,但免費用很化算。請大家當個乖乖設計師,不要下載盜版,沒錢也有免費工具可用啊!

Iconset – 圖示管理工具
https://iconset.io/

澄清一下,這文章不是業配喔!只是身為一位懶懶的設計師,為了令工作愉快,我會嘗試各種設計工具使工作變得有效率,所以我想和同行分享一些不為人熟悉的設計軟件。

如果你對設計工具有興趣,歡迎閱讀我的另一篇文章: