Figma 圖解設計系統｜繪製 ICON 圖標

圖標形狀主要以線條和幾何形狀構成，它們具有對稱且一致的外觀，即使在小尺寸時也能確保可讀性和清晰度。

圖標網格為圖形元素的一致但靈活的定位建立了明確的規則，可以在圖標之間保持一致的視覺比例，同時每個圖標都被簡化為最小的形式，表達了基本特徵。

課程範例

Icon Keylines 課程範例

延伸教材

Google Material Design 3 - Icon grid and keyline
https://m3.material.io/styles/icons/designing-icons#b78d77c6-91dc-45d3-a1a2-a1effcf4d411

接下來點擊「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 基本操作

趕緊去試試看吧