---
title: "Figma 圖解設計系統｜繪製 ICON 圖標"
slug: iconkeylines
url: https://rar.design/posts/iconkeylines
published_at: 2025-06-29
author: "設計師 Riven"
category: "UI/UX 設計"
access: public_access
---

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

By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2025-06-29

圖標形狀主要以線條和幾何形狀構成，它們具有對稱且一致的外觀，即使在小尺寸時也能確保可讀性和清晰度。圖標網格為圖形元素的一致但靈活的定位建立了明確的規則，可以在圖標之間保持一致的視覺比例，同時每個圖標都被簡化為最小的形式，表達了基本特徵。課程範例Icon Keylines 課程範例延伸教材Google Material Design 3 - Icon grid and keylinehttps://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 基本操作趕緊去試試看吧