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

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

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

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

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

https://youtu.be/bumu3IQ42io

繪製 Icon 圖標

圖標形狀主要以線條和幾何形狀構成

它們具有對稱且一致的外觀

即使在小尺寸時也能確保可讀性和清晰度

圖標網格為圖形元素的一致但靈活的定位建立了明確的規則

可以在圖標之間保持一致的視覺比例

同時每個圖標都被簡化為最小的形式

表達了基本特徵

接下來點擊「Design file」

建立我們這次操作的畫布

這次在繪製時有提供輔助與參考

輔助除了方便我們操作外

也練習如何確保在小尺寸時的可讀性與一致性

在後續建立團隊內使用的設計系統中是很重要的細節

先貼上我們的輔助與參考

包含：「keylines」、「sample」

再開啟「Frame」並將長寬設定成 256*256

然後將我們 「keylines」 裡面的

「keylines」和「Grid」貼上在新的「Frame」中

點擊「Rectangle」在 「keylines」紅線範圍內

畫出我們包包 icon 的基底

再調整右邊選單的「Stroke」邊框粗細調整成 20

再將「Inside」調整成「Center」

接下來「點擊」黑線上增加錨點

方便我們調整形狀

接續，在右邊選單的「Corner radius」

將四邊變成圓角數值設定 20

下一步我們要加上我們包包把手

點擊「Ellipse」畫出圓形

前面步驟跟剛剛包包基底時的邊框粗度一樣

接下來「點擊」黑線上刪減最下面錨點

讓圓形變成半圓

我們來添加包包外型上小細節

點擊「Pen」畫出包包紐扣

並複製另一個

選取兩個黑線一樣調整邊框粗細調整成 20

再將「Inside」調整成「Center」

接下來調整放置範圍

再來我們選取全部黑線

「點擊」右鍵選單叫出操作選單

點擊「Outline stroke」

再點選上排操作欄的「Union Selection」

這樣之後換顏色都可以一起換色拉

如此一來就完成一個 Icon 基本操作

趕緊去試試看吧

關於作者

設計師 Riven

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

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

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

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

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

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