100 種 Figma 設計的方法｜UI/UX 設計專欄

Figma 是一款 UI/UX 使用者介面與體驗設計軟體，專用於介面設計和原型製作，能讓多名設計師同時在同一專案上協作，這使得團隊合作變得更加簡單。Figma 支援向量圖形編輯，並提供各種設計元件庫和擴充套件，方便設計師快速建立和調整設計。

Figma 不僅適用於設計師，也對開發者友好。開發者可以直接查看設計的樣式、間距等細節，並導出設計資產和切圖標註，這極大地縮短了設計與開發之間的溝通時間。

我們可以直接註冊並下載軟體到 Windows, macOS 使用，並且 Figma 是網頁瀏覽器就能打開的軟體，因此就算不安裝也可以在任何設備上使用，包括 Linux 作業系統等。

很開心這次可以挑戰鐵人賽！接下來的 30 天我會每天發佈一則關於 Figma 的小教學，並且為了能夠有體驗更好地學習軟體操作，也會搭配一支螢幕錄影的影片，可以點進 YouTube 頻道觀看順便訂閱噢！🥸

https://youtu.be/qcQzexgVu78

Figma 實用 Plugin

你好，我是設計師 Riven

今天我們會來聊一下

有哪些實用的 Figma 外掛

（或是叫擴充套件或稱為插件）

Figma 的 Plugin 數量很多

好好善用的話對我們的設計效率十分有幫助

這堂課我們會介紹 6 個非常實用的外掛來協助你快速產出設計

要使用 Plugin 時

我們要點擊左上方的 Resources

然後切換到 Plugins

再來就可以搜尋要使用的插件

我們首先輸入 iconify

這是一款強大的 Icon 產生器

它提供超過 100 個以上的模組供你挑選

像是基本的 Material Design 也可以選擇

這邊有準備一些線框稿來示範如何套用這些 Plugins

在 iconify 中我們選擇 Solar 這套 Icon

往下滾動可以發現已經有整頁的 Icon 可以選擇

當然我們也可以透過關鍵字去搜尋想要的 Icon

這邊我們搜尋 Chat

下方會根據關鍵字篩選相關的圖標

選擇喜歡的 Icon 後

會自動滾動到下方

此時就可以點擊 Import Icon

然後這個小圖標就會匯入到我們設計中

再來就可以將它貼在我們想要的位置

然後就是圖片的部分

我們都知道精美的圖片可以為整體設計加分不少

Unsplash 這款插件就是知名的免費圖庫所出的擴充套件

同樣方式打開後會直接出現精美的推薦圖片供你挑選

當然你也能搜尋想要的圖片

我們就直接拖曳一張喜歡的圖

可以發現 Unsplash 所提供的圖片畫質非常好

我們可以將圖片變更大小後貼到我們想要的位置

也可以右鍵選擇 Copy properties

然後在矩形範圍貼上就可以將圖片貼在我們規劃好的區域內

下方的圖片也可以用一樣的方式操作

這樣我們的 UI 初稿就完成了

接下來我們來看看這令人驚豔的動畫插件 LottieFiles

打開外掛後就可看到許多免費的動畫

我們可以直接搜尋想要的 UI 動態

例如 Loading

點擊進細節頁可以看更詳細的呈現

也可以調整背景顏色或選擇配色

沒問題的話就可以插入 GIF

插入後我們調整大小放到適合的位置

由於 GIF 無法在靜態畫面上呈現

我們可以選擇 Frame 然後點擊右上方的 Preview 來預覽

在設計中少不了圖表的設計

而如果我們希望快速產生圖表的話

就可以使用 Charts 這個套件

打開 Plugin 後我們選擇長條圖

並調整一下想要的參數就可以加入到畫面中

為了要放在線框稿內

我們調整一下大小再放進去

這樣就得到一個快速的圖表了

假設我們設計完成後需要告訴別人流程是怎麼連接的話

自己拉線會太麻煩

這時使用 Simple Flow 就可以快速完成

打開插件後

下方功能是付費版本可以先忽略它

只要點擊上方的 Copy connetor to clipboard

然後選擇我們要連結的兩個物件

再按下 Command + V / Ctrl + V 就好

接下來你可以依照流程編輯文字

連接後的畫面即使移動也不會跑掉

最後設計完成了，我們需要整理一下檔案名稱

目前圖層還算少可能還行吧

但如果畫面多的時候一個一個命名也太累了

這時就可以利用 Rename It 來快速調整畫面名稱

跟前面稍微不一樣的是我們需要先選取要調整名稱的 Frame

然後再開啟插件

而假設我們希望將 iPhone 13 mini 換成 My social app

就直接對照欄位輸入即可

這款套件厲害的是下方有 Preview 可以看取代後的名稱

不然變更後改到不應該改的又要重來很麻煩的

以上就是這次介紹的 6 款實用外掛

當然 Figma 擴充套件還有很多

歡迎大家再逛逛探索和體驗

不過要提醒的是 Plugins 只是用來輔助

基本工具的熟悉度還是比較重要的噢

這部分就是多練習操作就會提升了

這個單元就先到這邊

我們明天見

關於作者

設計師 Riven

資深數位產品設計師｜虛擬 VTuber

社群傳送門 - https://portaly.cc/designer.riven

在 IT 和網路產業近十年的數位產品設計師，專注於 UI/UX 使用者介面與體驗設計領域，在全臺多間大專院校與社群機構擔任顧問及講師，並於國內外各大線上課程平台開立設計課程，目前已累積超過近萬名學員參與上課。

為 Adobe 官方合作的設計師兼 Insider，曾環島舉辦設計工作坊，並獲邀代表台灣飛往美國洛杉磯參加 Adobe MAX 設計師年會，並以設計師 KOL 角色與 Intel、微軟、華碩、微星等知名品牌合作推廣科技產品。

常在 Medium 寫作設計上的知識與觀察，並得到官方認證 #Design 領域 Top Writer，同時也會在 YouTube 上製作影片教學設計的方法，近期開始實驗使用 VTuber 技術在 IG 用 Reels 短影片分享設計技巧。

▌擅長利用淺顯易懂的內容，將艱難的設計與開發技術，用任何人都能夠聽得懂的語彙，說給每一個人聽。