Back

資深網頁設計師常用的 Figma Plugin 推薦 2024

資深網頁設計師推薦的 Figma 外掛清單,大幅提升網頁視覺設計過程的執行效率、團隊協作的順暢、降低時間與跨部門的溝通成本,而且外掛的免費版本通常就夠用了!完全適用對象為網頁設計師、UIUX 設計師或本來就是用來專案管理、腦力激盪發想、行銷工作的使用者等(更新時間:2024/01/01)

「實戰經驗分享,非只是網路資料整理」- Irving 爾文

現今使用 Figma 進行網頁設計或 UI 介面設計是相當主流且普遍的,我通常搭配用 Photoshop 處理影像合成或圖片色調、Illustrator 用來製作編輯品牌標誌 Logo 或小圖示 Icon、向量插圖等,匯出圖檔後再匯入到 Figma 進行網頁排版。此篇分享我在執行網頁設計時常用的 Figma 外掛,大大提升執行效率、降低時間成本。若想進一步了解網頁設計的基本概念與實作經驗交流與分享,無論是行銷人、工程師、平面設計師等其他領域的人想要了解更多「網頁設計」都歡迎加入網頁設計的學習 Line 社群

🍉 若你還沒有 Figma 帳號,可以前往註冊免費帳號,免費版就很好用了!我自己試用了好一陣子,最後直接升級為 Professional 版本,解開頁數與檔案限制,目前完全成為我的設計專案中心。

Photoshop 或 Illustrator 這兩套軟體發展是越來越強大,但也越來越「肥大」,交換檔案時還不時會遇到「掉圖、掉字體」的問題,無論是開個檔案或團隊協作是相當麻煩且瑣碎;而 Figma 的出現,立即解決了「團隊遠端討論、線上即時協作、操作靈敏、使用體驗極佳」,尤其是完全為了 UIUX 設計而生的功能與格式,加上持續擴大的外掛資源,可說是網頁設計師或 UIUX 設計師的最佳工具。

以下我用影片搭配文字快速簡介一下 13 款 Figma 外掛,未來會持續新增內容,主要紀錄在此頁中,歡迎蒐藏此頁(Mac:command + D、Windows:Ctrl + D)並隨時回來瀏覽 ^^

PDF 檔匯入

PDF to Figma – Figma 支援 PDF 文件的拖拽匯入,匯入後會轉成圖片。

外掛名稱

PDF to Figma

外掛簡介

Figma 支援 PDF 文件的拖拽匯入,匯入後會轉成圖片。

使用情境

因為遇過不少甲方(品牌方、客戶)或公司內部的其他部門的人會傳有關「網站地圖、網頁視覺或排版 Wireframe 線框圖」的 PDF 檔案給網頁設計師或工程師,這對我來說使用上相當不便。身為網頁設計師,一邊要開啟 Figma,一面要開啟 PDF 檔查看需求細節,兩者切換挺麻煩的。而用 PDF 軟體放大縮小也很卡、不順暢,時常令人懊惱,所以透過此外掛 PDF to Figma 可以將「需求檔」直接匯入 Figma,縮放瀏覽超順暢。

若發現 PDF 匯入時卡住了,外掛會提示說「檔案過大之類的訊息」,那應該是 PDF 的寬高像素真的太太太大了,Figma 也會限制以防當掉,這時候我改將 PDF 用 Photoshop 開啟,再快速切成兩三個部分將 PDF 圖檔複製貼上到 Figma 中。

小訣竅:若想將 Figma 中的這些畫面「合併成一個 PDF 檔」輸出,那該怎麼做呢?首先須將你的內容全部分別設定在 Frame 中並依序命名編號,並全選,然後點擊工具列的 File > Export Frames to PDF,完成!


網頁截圖

html to design – 將任何網站轉換為完全可編輯的 Figma 設計

外掛名稱

html to design

外掛簡介

將任何網站轉換為完全可編輯的 Figma 設計。利用現有網站,將其 HTML 匯入到 Figma 中,以便開始您自己的設計,而無需從頭構建每個元素。

使用情境

我們在研究其他競品網站或蒐集相關的優質網站頁面設計時通常就安裝瀏覽器 Chrome 的擴充套件如 捕捉網頁擷圖- FireShot 去抓整頁的圖,但有時因頁面太長,所以即使整頁截圖到了,但畫質解析度變差了。後來發現 html to design 外掛不僅能將超長的網頁擷取出來,直接存在 Figma 檔案中,網頁中有圖片或圖示都是可以獨立選取使用,亦即「順便切好圖」,這太神了!

網頁中若有影片或動態特效如視差滾動等會很有可能無法截圖到,這時候就只能將該段回去使用 Chrome 擴充套件截圖了。解決方案就多種方式綜合使用、互補有無。免費方案每個月可以「使用 10 次」,所以若用完了,需要等下個月重新開始計次,或,用另一個 Figma 帳號繼續使用 ^_^


圖片修正

Pixel Cleaner – 一個點擊就可以清除選取物件參數的小數點後所有數字

外掛名稱

Pixel Cleaner

外掛簡介

一個點擊就可以清除小數點後所有數字,包括自動佈局、排版、位置、尺寸等。

使用情境

很多人應該有遇過將圖片上傳到網站時,圖片有莫名的白邊出現,然後回去檢查圖片時又找不出原因,其實出現圖片白邊的原因有幾種可能:圖片本身的邊緣有一條 1 像素的淺灰色、圖片在原始檔中長寬有小數點、圖片在原始檔中 XY 位置有小數點等。發現問題後,又要將圖片一張一張丟回 Photoshop 細修後匯出,很麻煩對不對?那有沒有一次解決這些所有問題的方式?使用 Figma 外掛:Pixel Cleaner 一鍵消除所有圖檔方方面面的小數點問題,而其中「圖片本身邊緣的淺灰色 1 像素」這問題就得手動移除,其他秒殺解決。

若只有修正一兩張圖片可能無感,但若一次要修十幾二十張圖片以上,那你會發現,在 Figma 中可以一次選取所有圖片,按下外掛按鈕一次完成修正,當下節省了至少半小時以上乏味的重複動作與時間。


圖層管理

Sort Layers – 按照名稱或位置對圖層進行排序

外掛名稱

Sort Layers

外掛簡介

按照名稱或位置對圖層進行排序。

使用情境

有關圖片排列整理,我最常使用的情境有兩種:一來我將每個網頁切圖後的所有圖片需要一次命名與由上到下或由左到右排序;二來我得將數十張攝影素材直接匯入 Figma 中分類後,也是需要分區塊排序與匯出使用。光這兩種需求,Sort Layers 就幫了我很大的忙。我以往還懶得找解決方案就手動慢慢排序,其實有夠浪費青春一大把,這類重複動作的任務真的要能自動化才是王道啊!

圖層命名小訣竅:先搭配 Sort Layers 將檔案排序後,選取相關的圖層,在「圖層上方」按右鍵跳出選單後選擇「Rename」,在 Rename to 的欄位上填上檔案名稱,名稱接著可以點擊 Number ↑ 或 Number ↓ 新增數字編號遞增或遞減排序。

有關圖層命名設定可以參考官方文件 Rename Layers – Figma,通常 Figma、Sketch 等網路內容比較偏向手機應用程式的行動介面設計或非常 UIUX 領域的格式,而我更專注在「網頁設計與 SEO」時的網站實務,不同領域有不同需求的產出與作法,有關網頁圖片如何優化可閱讀這篇文章:如何製作與優化網頁圖片 SEO


圖庫匯入

Unsplash – 在設計中插入來自 Unsplash 的精美圖像

外掛名稱

Unsplash

外掛簡介

在設計中插入來自 Unsplash 的精美圖像。

Pixels – 直接從 Pexels 添加完全免費的圖像到您的設計中

外掛名稱

Pixels

外掛簡介

直接從 Pexels 添加完全免費的圖像到您的設計中。

使用情境

進行網頁視覺設計或撰寫部落格文章時常會需要用到免費可商用圖庫,網路上熱門圖庫不少,這邊列出我自己滿喜歡的、可以提升文章美感與質感的 Unsplash、Pixels,國內外品牌網站部落格其實也滿常見。

以往在進行網站專案時,網頁設計排版會需要文案和圖片素材、撰寫部落格時文章也會有圖文,於是將文案存在 Word 或 Google Doc 中,然後圖片另外存放本機或雲端資料夾。但自從有了 Figma 後,我的作法改成 Figma 存放統一彙整圖片,必要的話還可以試排版一下或調整圖片尺寸與裁切。直接透過此外掛將我常用的 Unsplash、Pixels 圖庫在 Figma 中直接匯入相當便利,不用切換畫面,省下了下載圖片再上傳的繁瑣步驟。

有發現某些 Figma plugin 有 All in one 的圖庫匯入功能,但匯入圖片的速度稍微慢了一下,所以我還是選用速度快多了的單一圖庫匯入 Plugin


擷取顏色

Get Palette – 可以幫助使用圖像創建美麗的顏色調色板

外掛名稱

Get Palette

外掛簡介

Get Palette 可以幫助使用圖像創建美麗的顏色調色板。

使用情境

有時我們會為配色感到煩惱,對吧?有時我們需要配色的靈感,有時我們在進行品牌設計創造的靈感板就會需要整體配色的配色盤(colour palette),有時我們發現某些影像、照片、圖片配色相當迷人且適合,但只能用軟體或 Chrome 擴充元件的顏色滴管工具大概吸取畫面中的幾個部分、大概配色組合一下。現在我直接使用 Figma 外掛:Get Palette 秒速滿足這個需求,將任意一張圖片匯入 Figma,啟用外掛,立即顯示該圖片的幾種主要顏色,馬上可以感受到配色的方式所營造的氛圍,讓我們直接使用或蒐藏或微調。

此外掛只能使用在 JPG、PNG 圖片,無法使用在 SVG 圖檔。有的 Plugin 在顯示顏色時會同時顯示色碼的值,但這款不會,只能一個一個點擊然後複製右邊參數顯示的色碼。我會選這款是因為發現其有個功能我滿喜歡的,就是可以自己決定想要產生幾個顏色數,區間是 1 – 10 個。

若真的一時沒有安裝或使用 Figma,也是有不少類似功能的線上工具可以使用,例如 Image picker – Coolors 就可以上傳圖片或貼近任意圖片網址 URL 就可以自動建立該圖的關鍵色碼。至於網頁程式常用的顏色代碼 HEX / RGB 的值我是搭配另一款 Plugin 可以快速顯示在檔案中:ColorLabels


色碼顯示

ColorLabels – 將色彩樣式建立顏色代碼

外掛名稱

ColorLabels

外掛簡介

能夠以單擊的方式將色彩樣式建立顏色代碼。

使用情境

設計過程中會透過圖片搜尋、情緒板(Mood Board)建立等視覺資料找靈感,而顏色所營造的視覺印象與情感傳遞是相當重要的,透過 Figma plugin:Get Palette 將圖片的色系建立出色塊,然後為了方便後續設計和網站開發使用,再用 Figma plugin: ColorLabels 快速將這些色塊產生顏色代碼,這兩種外掛組合可說是合作無間。格式可以選擇 HEX、RGB、HSL、HSB 等,網頁常用的則是 HEX、RGB,我自己則主要使用 HEX 色碼,例如白色 #FFFFFF、黑色 #000000 等

有注意到 ColorLabels 一直在更新中,之前使用時色碼格式還沒有那麼多選擇,現在新增了功能,除了快速顯示色碼,還可以顯示該色碼的「顏色名稱」,這挺有趣的!


圖示 Icon

Iconify – 將眾多圖標作為向量形狀匯入到 Figma 文檔

外掛名稱

Iconify

外掛簡介

將 Material Design Icons、FontAwesome、Jam Icons、EmojiOne、Twitter Emoji 等眾多圖標(包括超過 100 個圖標集,總共包含超過 100,000 個圖標)作為向量形狀匯入到 Figma 中。

使用情境

網頁設計中除了圖片之外,圖示、小圖示的使用也是相當重要的存在,可以是自己創作的、也可以用熱門的圖示資源庫如 Bootstraps Icons、Google Material Icons、Font Awesome 等。而 Figma plugin:Iconify 就同時彙整了這些資源,讓使用者可以自由選擇與插入 SVG 檔案到設計畫面中使用,節省了很多力氣,免切換視窗以及免到處瀏覽下載。

網站使用的圖示 Icon 我通常選用 SVG 格式,放大縮小解析度都能保持清晰,也由於是 SVG 格式,所以可以根據內容透過撰寫網頁語法 CSS 任意調整顏色、互動、態等設定,網站開發友善。


品牌 Logo

Brandfetch – 立即提供數百萬個標誌、顏色、字體等資源,幫助您優化設計流程

外掛名稱

Brandfetch

外掛簡介

品牌隨手可得 ✨ 跟尋找最新品牌資產說再見 — Brandfetch 立即提供數百萬個標誌、顏色、字體等資源,幫助您優化設計流程。確保您的品牌符合品牌形象,並輕鬆存取,只需將其添加到全球品牌平台 Brandfetch 即可。

使用情境

我們會在設計中用各種圖示 Icon 作閱讀引導、畫面點綴等,還有一種情況也常碰到:就是可能會使用其他品牌或服務的 Logo 圖示,畢竟不是每家公司都會將自己的品牌資產 Brand Assets 保存好或是放在官網上給人下載,有些很好找,有些很難找、甚至找到後畫質不好比較難用。

這款 Figma plugin:Brandfetch 多多少少有幫助,有彙整大部分知名品牌 Logo 的 SVG 檔,如 Google、Nike、LV、Apple、Amazon、Shopify 等,尤其是電商網站常用到的付款圖示有些找得到如 Visa、Master Card、PayPal 等,對於找不到的就回網路上找檔案了,例如維基百科 Wikipedia 中有不少品牌的 Logo 圖檔可以下載使用,或直接到 Figma Community 搜尋關鍵字:payment icons 就會找到爆多的資源可以使用。

因為不希望用到模糊低畫質的圖檔,會破壞整個畫面的質感,我以前的作法就是到處搜尋 Google 看有沒有辦法找到原始檔並蒐藏,例如 SVG 或 ESP ,找不到的話至少要找到解析度高一點的 PNG 透明背景圖檔,最後的選擇則是 JPG 檔(要去背比較麻煩),從其中可知,最好編輯的檔案是 SVG 檔。


背景圖

Subtle Patterns – 從 Subtle Patterns 獲取圖案圖像

外掛名稱

Subtle Patterns

外掛簡介

從 Subtle Patterns 獲取圖案圖像。

使用情境

好久以前應該是網路誕生開始到 2014 年前後會常常看到網頁設計背景很喜歡用「重複排列的圖騰」,現代網頁設計趨勢似乎比較少見了,改為大圖背景或純色、漸層色打底、大量的留白、巨大的標題等,這之後可以另外專門分享。

那 Figma plugin:Subtle Patterns 什麼時候會用到呢?其實我還是有的,只是我搜尋的素材是不過於花俏的圖騰當背景使用,可能是細緻灰色或黑色顆粒質感、淺細灰階方格之類的,妥善納入排版還是增加視覺的豐富度而不單調。

有時候全白背景或全單色背景看起來有點說不上的空洞,當然這還是看設計的內容是什麼而定。另外,我也常用在設計社群媒體的貼文使用,例如 Facebook (Meta)、Instagram、Twitter 等,意外地好用!這方式滿推的。


漸層色

CoolHue – Gradient Color Palette – CoolHue 精選漸變色板,提供 60 多種現成的漸變效果

外掛名稱

CoolHue – Gradient Color Palette

外掛簡介

CoolHue 精選漸變色板,提供 60 多種現成的漸變效果,可以通過單擊 CoolHue 調色板上的漸變來使用漸變效果,或者隨時生成新的隨機漸變效果。

使用情境

漸層色用得好,可以讓設計畫面非常新穎、有活力。若你比較偏好用漸層背景,或只是想要快速套用某種漸層色然後再去調整一下,那此外掛 CoolHue – Gradient Color Palette 可以滿足這個需求。無論是用來做網頁設計、社群貼文素材等使用皆可。


示意圖和示意文字

Content Catalog – 可以幫助設計生成頭像和文本字符串

外掛名稱

Content Catalog

外掛簡介

Content Catalog 可以幫助設計生成頭像和文本字符串。只需選擇一個或多個圖層,然後從目錄中選擇一種內容類型應用即可。

使用情境

網頁設計師或平面設計師應該都有用過這樣的情況:就是沒有文案或素材時,但專案已經啟動,行銷或對方正在準備內容中,而我們設計師也不太可能空等,每一分每一秒都在流逝,所以雖然這不是最佳執行設計的狀態,但也是會採取一些行動,至少先起個頭、拉個排版框架出來都好。

以前我常去圖庫或是乾脆用灰階色塊充當圖片區域、亂打幾串文字或使用線上工具自動產生一堆沒有任何意義的示意文字,而現在我直接使用 Figma plugin:Content Catalog 處理,大量選取指定區塊、一鍵生成「示意文字」,類型包含隨機頭像圖片如人物或狗或貓、英文名字、電子郵件、電話、數字等;而若是需要隨機圖片如背景、風景等之類的,則另外搭配圖庫匯入相關的 Figma plugin UnsplashPixels 即可。

常聽到的先放假圖假文字排版吧!我是比較習慣改用「示意圖」和「示意文字」稱呼之 ^^,「假」聽起來有負面的感覺。


此篇文章會持續更新、汰舊換新,以及新增更多用過好用的 Figma plugin,在設計實務中提升執行效率,會陸續紀錄在此份外掛推薦清單中,除了當作分享之外,其實也是作為自己的線上筆記,隨時可以翻閱 ^^ 若有網頁設計相關的任何問題都歡迎來信討論 irving@irvinglab.com

爾文打造的客製化 ChatGPT

  • SEO 搜尋引擎優化
  • Shopify Liquid Dev 程式開發
  • Web Design 網頁設計
  • 備註:歡迎前往試用,接下來會持續更新與優化,也可隨時給我回饋 ^^ 感恩!GPTs 已可以設定即時搜尋其他網站上的資料,確切地說,原本使用 Bing,並使用另一個 ChatGPT Plugin 來執行任務,該工具允許使用者提供一個(或多個)URL,並可以選擇請求與 URL 進行交互,提取特定資訊或如何處理 URL 中的內容,請求可能包括重寫、翻譯等。若遇到任何使用上的問題可隨時來訊息或截圖跟我說。

加入 Line 的學習社群

成為網頁設計師 | Irvinglab 爾文實驗室

  • 簡介:邁向網頁設計師之路,了解網頁設計的基本概念與實作經驗交流與分享,無論是行銷人、工程師、平面設計師等想要了解更多「網頁設計」都歡迎加入討論。
  • 網址:https://share.irvinglab.com/be-a-web-designer

Shopify 網站設計與架站學習交流 | Irvinglab 爾文實驗室

  • 簡介:分享主題從網站規劃、設計到建立等相關內容,透過學習交流與經驗分享,讓彼此成長更加快速,主要以 Shopify 建立電商網站為主。
  • 網址:https://share.irvinglab.com/shopify-line-group

WordPress 網站設計與架站學習|Irvinglab 爾文實驗室

SEO 資源彙整與學習|Irvinglab 爾文實驗室

加入 WhatsApp 的學習頻道

Shopify eCommerce Web Design 網站設計學習交流|Irvinglab 爾文實驗室

AI、設計與行銷工具

設計 Design

  • Figma:UIUX 設計師和網頁設計師首選必用的線上設計協作軟體,若你是行銷人、專案管理、團隊主管、遠端協作等也都非常適用!大幅提升執行效率、降低溝通成本。最近發現一個很讚的 Figma Plugin,並且我已經購買:Table To Figma,可以串接資料庫大量建立圖片,例如串接 Google Sheets、Notion 等,而且是一次性付費!優惠不知道何時,可以去瀏覽一下。而 Musho AI 這款 Figma 外掛則是則是結合 AI 自動產生網頁設計圖,雖然很棒,但其實現存已經有爆多 Design Template 可以使用,而且更精緻,未來就看其能否推出殺手級的功能。
  • Untitled UI:現成的 UI 套件,使用 Figma 的設計師一套即用,可以參考其架構與設定,多多觀摩!The world’s largest and most popular Figma UI kit. Kickstart any project, save thousands of hours, and level up as a designer.
  • Fotor:線上 AI 影像修圖和去背是專攻的強項,應該有勝過 Canva,平面設計與社群模板 Template 也都有,AI 系列工具強大內建,包含:Image Generator、Face Generator、Art Generator、Photo Effect Photo Enhance、Background Remover、Object Remover、Avatar Generato 等。我當時是想找 AI Mockup 產生器發現此款,完全被打中!
  • Canva:線上完整的平面設計工具集錦,若團隊沒有設計師,那 Canva 真的是神助攻!解決行銷、社群、平面設計、簡報等需求,版型一應俱全
  • Placid.app:競爭對手是 Canva,兩者提供近乎相似的線上設計工具 Automations for on-brand creatives
  • Creative Market:這個平台是目前看過擁有許多種類高質感的設計素材商店,雖然 Canva 擁有的設計範本也不錯,但若說 Canva 是 80 分的素材,那 Creative Market 就是 90 分 High-quality Stock Photo, Graphics, Fonts, & Design Templates
  • Envato Elements:無限下載的付費資源素材:包含圖片、影片、音樂、音效、平面設計、插圖、簡報模版等,這個也是我常常在用的素材平台
  • Coolors:色彩靈感來源,快速建立色票與漸層的配色工具,上傳任一圖片擷取其色票、配色對比度確認、現成色卡一覽無遺直接使用等,The super fast color palettes generator!

網域註冊 Website Domain

  • GoDaddy:選擇網域建議到全球最大最主流的 GoDaddy 平台購買,然後再串接到 Shopify、WordPress 或你用的架站平台。然後也不建議直接在架站平台本身購買網域,之後若要遷移網站或不想使用此平台時,網域會被綁定在平台中。所以網域和架站平台分開單獨選擇比較理想。若有網域選擇障礙或相關問題也歡迎寄信給我或透過社群傳訊息給我。

網站架站 Website Builder

  • Webflow:這款應該是相當多設計師知道的、新潮的 No Code 架站平台,打造客製化品牌官網或作品集網站都不是難事,還有一個強項是動態設計、互動設計的功能設定,相當值得使用!Create a custom website | Visual website builder
  • Super — Create Websites with Notion:若你是 Notion 的使用者或設計師,或想快速簡單且 No code 建立一個自己的網站或作品集,以 Notion 為主要編輯內容與排版,非常適合透過 Super 打造網頁頁面!基本的版型將 Notion 變得更像「網頁」的模樣呈現。我之後也會用這樣的組合取打造另一個網站,一旦完成會更新在這!
  • Framer:輸入文字,數秒內即可生成網站的 AI 工具!這對設計師來說值得研究研究!
  • Ycode:它的出現主要是對戰 WebflowFramer,除了提供價格相對優惠一些,功能面還不容小覷,綜合比較下主打的 CP 值!不過動態方面 Webflow 還是比較強
  • Relume:若是 Figma 設計師和 Webflow 架站的愛好者,可以玩玩看!Access the world’s largest library of Figma & Webflow components and build better websites in hours, not days.
  • Siter.io:又一款免程式碼的網頁編輯器 No-code website builder,介面有點類似 Figma,Siter is a no code website builder for creatives. Create fully responsive portfolios and landing pages directly in the browser.

線上影片錄製 Online Screen Recorder

  • Tella:線上螢幕錄製,可以再錄製完螢幕講解影片後直接分享連結,超級方便!尤其可以用在跟客戶或客服講解說明使用,省下不少另約會議時間,無論是團隊內部或外部溝通、錄製線上課程使用、線上簡報等都適用!Online Screen Recorder for Mac & Windows

雲端儲存 Cloud Storage

  • Dropbox:目前用最久也最愛的、主要在使用的雲端儲存軟體。經過了多年,新增了不少功能,其中一個最常用的就是其推出的螢幕錄影功能 Dropbox Capture,搭配鍵盤快捷鍵快速錄製影片,錄完就直接雲端了,速度超快,分享連結都自動產生,這成為我快速跟客戶與團隊成員溝通的最佳方式!

品牌標誌設計 Logo Design

  • Looka:用 AI 產生無數個品牌 LOGO,有夠方便至極!平面設計師的工作再度受到挑戰…… 我自己因為有數個新品牌正在建立中,先免費試用,覺得有夠讚,後來我就選擇了付年費方案也不貴,直接取得整組 Brand Kit 素材,還可以隨時進後台編輯與修改!Design a Logo, make a website, and create a Brand Identity you’ll love with the power of Artificial Intelligence. 100% free to use.

網站分析 Web Analytics

  • Fathom Analytics:愛死這款網站數據分析工具,因為 Google Analytics 最多只能儲存十幾個月的數據,那我經營網站十年以上,不就一半以上的數據都沒了?!為了找一款可以儲存所有數據工具,比較多種多款之後選擇了這款,不僅將舊版 GA 也能將新版 GA 全部匯入進去,數據全部備份啦!興奮!歡迎前往免費試用 30 天!先用用看,好用再選付費方案即可。我是選了付費方案,年費可以省 17%。
  • Plerdy:全方位的網站優化分析工具,目標為提供網站優化與轉換率,擁有如此多的功能費用也算平易近人,包含 Heatmap、Session Replay、NPS、Ecommerce Analytics、Event Tracking Tools、Funnel Analysis、SEO Checker、UX assistant、Ecommerce Analytics 等,而 AB Testing 完全免費!

AB Testing 網站 AB 測試

  • VWO:這款是我夢寐以求的 AB Testing 主流軟體,其功能的專業程度與順暢度相當高!可以先用免費試用三十天,有提供免費版和付費版,免費版可以當作小試身手,若專注在網站轉換率搭配大量測試各種設計與文案版本測試則可以考慮升級為付費版本。官網著名客戶有 Disney、Amazon、iPROSPECT、SimilarWeb 等
  • Mida:非常輕量化的測試工具,不會減慢網站速度,避免頁面載入時間過長,以免影響轉化率。同樣有可視化編輯器,設定容易上手。另外在 AI 的説明下,只需點擊幾下即可生成新的變化創意。光光前述的這三點就相當吸引人使用看看。Lightweight A/B Testing Tool
  • Convert:這也是一款非常扎實、重量級的的 AB Testing 主流軟體,跟 VWO 時常被拿來比較,官網註明客戶有 Sony、Audi 等
  • ABtesting AI:有用過 AB Testing 在優化網站嗎?來試試 AI 的 Testing,有免費方案可以測試
  • ClickMagick:在找 AB Testing 工具時發現 ClickMagick,也看了其他 YouTuber 簡介,感覺相當易用,找時間實測
  • Plerdy:全方位的網站優化分析工具,其中 AB Testing 功能完全免費!太佛心!

電商分析 Ecommerce Analytics

  • Shulex:電商網站的競品分析工具很多,這款我試用了一下分析 Amazon 產品頁可以自動分析評論、產出該產品的人物誌、正面和負面評論的項目與比例等,讓我可以快速了解產品的使用者輪廓與痛點,滿推薦使用看看。
  • PPSPY:Shopify Store Spy & Shopify Dropshipping Monitor Tool 發現這工具真是大開眼界,可以用 AI 尋找 10 倍利潤的熱賣產品,主要針對 Shopify 商店,包含快速監控對手、進行市場研究、熱銷產品研究找到利基市場、進行大量店舖主題設計參考等

音訊轉文字 / 文字轉語音 AI Voice / Text To Speech

  • Murf AI:文字轉影音,聲音質感優質,有整合於 Canva 使用。AI Voice Generator – Versatile Text to Speech Software
  • Rask.ai:AI 影音配音工具,告別昂貴的翻譯員。目標是用人工智能提供不亞於人類的配音和翻譯體驗。Translate video & audio Unlock Worldwide Potential with AI

心智圖 AI

  • MyMap AI:通過簡單的聊天介面將你的文字想法轉化為視覺化內容,如心智圖和演示文稿。非常適合學生、教師和專業人士使用,無需設計技能。節省時間的工具,用於輕鬆協作的視覺創作

SEO 搜尋引擎優化

  • Wincher:一款追蹤 SEO 成效的工具,算是超級簡易版的 Ahrefs,可以直接連接 Google Search Console 簡約地呈現數據,用一用也是清爽的,有提供免費版可以使用,免費版最多追蹤五個關鍵字
  • Pro Rank Tracker:另一款追蹤 SEO 成效的工具,介面簡約,瀏覽舒適,有 Mobile App 可以下載,提供免費試用 14 天,SEO Agency Rank Tracking & Reporting Tool
  • AlsoAsked:People Also Ask keyword research tool 若要撰寫 SEO 文章,這是一款可以考慮使用的工具,輸入關鍵字後會自動產生樹狀圖表呈現內容延伸標題
  • Surfer:SEO 工具,主要可用做 SEO 內容編輯者使用, AI 產生 SEO 文案、關鍵字推薦、SEO Audit 等功能,介面設計滿新穎的,賞心悅目!可以玩玩看,七天內可以退款。

文案 Copywriting AI

  • Writesonic:快速創作部落格、廣告、電子郵件和網站所需的內容,並進行SEO優化,這是最令人期待的 AI 內容產生軟體!其中可以安裝 Chrome extension,然後快捷鍵可以直接呼叫輸入視窗,超級方便。即將推出 ChatSonic AI Bot for Businesses: Customer Support AI Chatbot,類似 Chatbase,這類線上客服 AI Chat 比以往的 Bot 還更人性化且反應不會過於機器人。
  • CopyAI:行銷文案 AI 自動產生器 CopyAI is an AI-powered copywriter that generates high-quality copy for your business.
  • Frase:彈指之間用 AI 協助搜尋、撰寫與優化 SEO 文章

網站客服 AI Chatbot

  • Chatbase:利用您擁有的知識庫,打造一個AI聊天機器人,並輕鬆將其添加至您的網站中

網站多功能工具 Website Widgets

  • Elfsight:跨平台各種功能多合一的 Widget,例如 Instagram Feed、Popup 跳出視窗、客製化 Google map 設計等,跟 Common Ninja 相似,但收費方式不同
  • Common Ninja:跨平台各種功能多合一的 Widget,例如 Instagram Feed、Popup 跳出視窗、客製化 Google map 設計等

電子報訂閱 Newsletter

  • Beehiiv:滿新穎的電子報訂閱工具,相當輕巧。時常被拿來跟 Substack 相比,近年很多國外新創公司、創作者等偏好使用,也是我主要使用的軟體,功能齊全之外,在撰寫內容時介面非常乾淨,相當適合文字創作者的書寫環境。
  • ActiveCampaign:Email 行銷、電子報系統(MailChimp 的替代方案之ㄧ)

社群媒體管理平台 Social Media Management Platform

  • SocialBee:越來越多社群媒體需要同時管理、排程貼文、觀看成效,若一次要管理五六個以上的渠道,那可以考慮這款,一站整合所有社群帳號在同一個介面,可以同時設定各個社群媒體的貼文內容、發布時間等,還可以整合 Canva 設計圖片、內建 AI 產生文案等功能 AI-Powered Social Media Management Tool – Schedule your social media content with ease, from one place, for all your profiles.
  • Tailwind:一站整合社群媒體和電子郵件行銷,也有生成式 AI 文案、Pinterest 和 Instagram 的排程發佈工具等,跟 SocialBee 有點像,相比之前起跳方案較便宜些 Social Media & Email Marketing Tool

課堂會議 AI 即時筆記  AI Tutor

  • Study Fetch:用 AI 輔助學習,我看到一個很強大的美國課堂實際 Demo 就是教授在台上講課,而這位實測者就打開筆電和 Study Fetch 直接錄音、即時語音轉錄文字,然後即時線上 AI 交談,可以問「剛剛教授在講什麼?」,Study Fetch 的交談回覆就會幫你摘要,太酷!我想這不僅可以用在學校課堂上,平時工作開會等相關場合都可以用的。Revolutionize Your Learning With Ai – Study Fetch transforms your powerpoints, lectures, class notes, and study guides into flashcards, quizzes, and tests with an AI tutor right by your side.

多合一行銷平台 Marketing Platform

  • Simplified:是一款 AI 的 All-in-one 軟體,適合大小團隊的行銷團隊都適合使用並進行協作。提供數百萬張免費圖片、影片和音訊剪輯、數千個設計師版型、支持 30 多種語言的長篇和短篇內容寫作。內容日曆可用於安排和發布社交媒體貼文。有提供「永久免費」的版本,若需要更多的功能可以再升級付費方案即可!An Easy to Use All-In-One App For Modern Marketing Teams
  • GetResponse:All-in-one 行銷平台,包含電子郵件行銷 Email marketing、登陸頁建立 Landing pages、行銷自動化 Marketing automation 等功能,可以先註冊帳號使用免費版,覺得需要未來再升級!這軟體類似 Hubspot

消費者研究 Customer Survey

  • PickFu:PickFu 是美國消費者在線調研工具,可進行在線的測試、優化和即時消費者調研問卷,取代猜測。透過 PickFu,你可以立即獲取至多 500 條來自美國消費者的意見。通過尋求眾人的智慧,幫助你做出更好的商業決策
  • SurveySparrow:全渠道顧客滿意度調查管理平台 Omnichannel Experience Management Platform
  • Qwary:全渠道 CX 客戶體驗平台,可幫助企業獲取客戶反饋並通過設計精美的專業調查來衡量 NPS、CSAT 和 CES,以改善購物體驗和產品性能

市場趨勢 Market Trends

  • Exploding Topics:在趨勢成為趨勢之前發現趨勢,發現新的機會。此軟體的共同創辦人兼 CEO 是我非常推崇的國外 SEO 專家 Brain Dean,立馬吸引我的注意力,其官網也有揭露使用此產品的有 Google、Apple、Netflix、Amazon、Samsung 等國際品牌公司。See new market opportunities, trending topics, emerging technology, hot startups and more on Exploding Topics.

表單測驗 Quiz & Survey

  • Opinion Stage:建立免費的測驗、投票、表單等工具,視覺質感和功能運作不錯!也有提供付費方案,提高每個月的回應數
  • Tally:這款表單提供爆多功能且是免費版就可以使用的,可以是 Typeform 的另一個選擇
  • Typeform:質感優雅的線上表單
  • NoteForms:專門整合 Notion 的表單建立,其官方網站首頁揭示使用者包含哈佛大學、耶魯大學、現代汽車等都有在用。因為我本身主要使用 Notion 管理專案,這大大方便多了,快速建立表單、蒐集回饋直接存到 Notion,節省不少切換軟體與資料轉移的人力

使用者研究 User Reserach

  • UXPressia:快速創建專業的顧客旅程地圖 Customer Journey Map、人物誌 Persona 和影響地圖 Impact Map,還有各種模板可以直接套用。

線上客服 Online Chat

  • Help Scout:線上客服(Zendesk 的替代方案)
  • Tidio:設計優質的線上交談工具 Online Chat

線上課程 Online Course

  • LearnWorlds:創建與銷售線上課程網站平台
  • Teachable:創建與銷售線上課程網站平台

線上社群 Online Community

  • Circle – The all-in-one community platform for creators and brands:真的是多合一多功能的線上社群平台,包含討論區、舉辦線上活動、線上課程、線上即時群組對話、為您的社群和內容收費等,還有 AI 驅動的連接和學習 Community AI。比較了多款建立討論區的線上社群平台,Circle 的介面設計簡潔、耐看、聚焦內容與交流,相當推薦!

會員制 Membership

  • Outseta – All-in-one membership software:支付、身份驗證、CRM、電子郵件——應有盡有。Outseta 為創始人提供了在幾分鐘內通過其網站、SaaS 產品或在線社區獲利的工具。可以串接 Webflow、Framer、WordPress、Discod、Notion 等。

網站軟體素材資源 Saas Resources

  • AppSumo:限時優惠的一次性付費數位軟體販售平台(大幅降低成本)
  • MotionElements:專業的影片素材、版型、外掛
  • MotionVFX:專業的影片素材、版型、外掛

聯盟行銷 Affiliate Program / Referral Program

  • Partnero:市面上有許多建立聯盟行銷的關係管理平台,這款是我看過介面優質、申請註冊流程都相當順暢的一款軟體,可以用用看 The Ultimate Platform for Partnership Management

一頁式個人網頁 Online Presence with Liinks

  • Liinks:一頁式多連結網頁,整合多個社群、官網的一頁式網站

線上研討會 Online Webniar

線上預約系統 Booking Appointment

  • TidyCal:Lifetime deal – AppSumo,一次性付費,終生更新,來自 AppSumo 自行開發,在經營初期想先節省  Calendly 訂閱制費用長期下來的一定成本,可以考慮 AppSumo 這款,雖然在許多進階功能上還沒有追上,但很多基礎功能例如實用的預定月曆會議、整合 Google Calendar、Zoom、PayPal 等就滿實用的
  • SimplyBook:線上預約排程系統 及 App 預約軟體

自動化軟體 Automation

  • Make:視覺化自動化工作流程,將數據串接等在各種軟體來回穿梭,提升工作效率
  • Bardeen AI:結合 AI 的自動化工作流程,整合各種常見 App
  • Axiom ai:No code 自動執行網站操作和重複​​任務
  • Repurpose.io:一個貼文自動發佈到多個社群平台,開始有這種需求,以往每次都要一個平台一個平台登入然後貼文 Repurposing content for social media the easy way

資訊圖表 Infographics

跨境收款 Online Payment

  • Payoneer 派安盈:安全、快速,一站式跨境收款
  • Wise:跨境帳戶,進行國際付款、收款
  • Checkout Page:還頭一次看到這種概念,專門打造結帳頁面 Checkout page,但要串接 Stripe 帳號
  • SamCart:打造線上快速收款方式,並且要大量模板可直接套用,這邊有 Demo 影片簡介,另外其還有推出線上課程建立的功能。Create an eCommerce storefront with SamCart to make it simple to sell digital products online with innovative checkout and conversion boosting features.

網路爬蟲 Web Crawler

  • Apify:Full-stack web scraping and data extraction platform

線上互動產品 Demo 引導 – Interactive Demo Guide

  • Guidde:透過 AI 將建立影片文件,滿神奇的!錄製影片後會自動拆解每個步驟,並為每個步驟自動產生標題與內文,然後還會自動產生影片講解投影片,選擇語音自動講解,這軟體用做大量需要錄製軟體操作教學文件滿便利的。Magically create video documentation with AI
  • Arcade:線上建立產品互動式 Demo,使用者可以邊聽邊點擊畫面持續往下一個步驟畫面走,非常適用於軟體教學、操作指引,讓初步接觸的人可以有個印象、提升熟悉的效率,透過畫面切換直觀上更容易吸收理解,後台還有使用者的數據查看所建立的 Demo 互動指標 Create Interactive Product Demos – Arcade is an interactive demo platform that allows teams to create effortlessly beautiful demos in minutes.*
  • Guideflow:可以製作線上互動式操作步驟產品 Demo 引導畫面,相比於瀏覽圖文教學的文章,互動式畫面切換更有沈浸感 The most advanced interactive product demo platform*

VPN

  • Surfshark:Surfshark VPN 最近開始用,還滿好使用的!原本需求是想要瀏覽某些國外網站卻被強制自動轉址,所以用 VPN 解決此問題

Podcast

  • Firstory:平台上架、贊助訂閱 與廣告盈利 最完整強大的 Podcast Hosting 省去所有繁瑣上架流程,我們將你錄好的音檔自動發佈到 KKBOX、Apple Podcasts、Spotify 和 Google Podcasts 等收聽平台
  • Descript:錄製 Podcast 線上工具,包含影音剪輯、Podcast 錄製、螢幕錄影等功能。There are simple podcast & video editors and there are powerful ones. Only Descript is both & it features magical AI, so you can skip the hard part of editing. Get started for free
  • Riverside.fm:專門針對錄製 Podcast 的 All-in-one 線上工具,包含錄製 4K 和剪輯影片。Record Podcasts And Videos From Anywhere
  • Podcastle:錄製 Podcast 的線上工具,包含影片和聲音剪輯、聲音轉文字等功能。Podcastle is the simplest way to create professional-quality podcasts. Record, edit, transcribe, and export your content with the power of AI, in an intuitive web-based platform.

手機應用程式開發 Mobile App Development

  • FlutterFlow:這個滿強大的,可以直接拖拉式介面建立手機應用程式,直接發佈在 iOS 和 Android,有點像是用 WordPress 打造網站的後台。FlutterFlow lets you build apps incredibly fast in your browser. Build fully functional apps with Firebase integration, API support, animations, and more. Export your code or even easier deploy directly to the app stores!
  • AppMySite:這個令人振奮!因為我已經有網站,所以相當有此需求。其主打的功能是將你現有的網站打造成手機應用程式 mobile app,例如將你的 WordPress 或 Shopify 進行轉換(Shopify 即將推出),後來也推出直接客製化 mobile app,有點像 FlutterFlow,估計是相對適合初入門使用者。AppMySite’s no-code DIY mobile app creator powers you to make premium native apps for Android & iOS.

網站開發 Web Development

  • CSS Scan 3.0:在進行網站開發時,檢查、複製和編輯 CSS 的最快速、最簡單的方式,跟「檢查元素」說再見——透過滑鼠懸停於任何元素上,即可立即檢查其 CSS,並透過一個點擊複製其所有規則。
  • ShipFast – 快速發布你的 App,創辦人在官網闡述自己的故事:我意識到我一遍又一遍地做同樣的事情:設置 DNS 記錄、監聽 Stripe webhook、設計定價部分……因此,我出於 3 個原因建立了 ShipFast:1. 節省時間,專注於重要的事情:建立業務、2.避免令人頭疼的問題,例如以垃圾郵件結尾的電子郵件或等待 3 天才能獲得 Google 批准、3. 快速盈利 – 發貨越多,學到的越多,賺的就越多。The NextJS boilerplate with all you need to build your SaaS, AI tool, or any other web app and make your first $ online fast.

全球隱私法的數據隱私合規解決方案 Compliance Solution

  • Termly:全球隱私法的數據隱私合規解決方案,需要合規解決方案,但又不想花費數千美元的法律費用?Termly 的合規套件可以説明您保持最新狀態並遵守隱私法律,例如 GDPR、CCPA、PIPEDA、電子隱私法規等——免費。 Data Privacy Compliance Solution for Global Privacy Laws

購物回饋金 Shopping Rewards

  • ShopBack:常常網購的人一定要申請的啦!我時常在 Apple 官網購買 iPhone、MacBook,還有博客來買一堆書、PCHome 買 3C 產品、Hahow 熱門線上課程等,其他還有超爆多的線上商店如蝦皮 Shopee、Yahoo 購物中心、保健食品 iHerb、家樂福線上購物、Klook 旅遊、Booking.com 訂房等等都可以使用,並且累積回饋金後至少 200 元新台幣,就可以轉帳到自己指定的銀行帳戶,超方便!

陸續蒐藏與研究……

有任何想問的問題,歡迎填寫表單留言或寄信給我 irving@irvinglab.comFB 粉絲團直接線上交談,我們一起交流、成長!附上我的網頁設計作品,可以來逛逛喔!歡迎加入 Shopify 網站設計與架站學習交流:Line 社群 一起交流與學習!但在美國的用戶無法加入台灣的 Line 社群,所以我也另外建立了 Telegram 社群,兩邊珍貴的經驗會同步分享與整理,或加入專接收資訊非討論的 WhatsApp 頻道若想進一步了解服務內容,可以加入 Irvinglab 爾文實驗室的 Line@ 官方帳號留下訊息給我們

爾文讀書中,跟我一起讀書去!精選書單 (持續更新):前往瀏覽
爾文上課中,跟我一起上課去!精選課程 (持續更新):前往瀏覽

Leave a Reply

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *