DesignSystems.com

關於 DesignSystems.com

DesignSystems.com 是由 Figma 發行的設計系統刊物，透過入門指南、實務文章、團隊訪談與研討會內容介紹系統建立和維護。網站將內容分為設計與開發、流程與人員、基礎入門等方向，兼顧視覺規則與團隊合作所需的方法。

入門文章涵蓋間距、網格、版面、圖示、字體與內容策略，讓讀者從常見組成開始理解設計系統。實務內容進一步討論跨平台元件、無障礙、元件貢獻與治理，也收集公開的設計系統資源入口。適合設計師與工程師在建立共同規則、規劃元件用途或調整維護流程時，選取相關主題作為參考與討論材料。

功能特色

主要功能

• 版面規則指南：說明基準網格、欄位網格、間距與版面的基礎規劃。
• 圖示與字體教材：提供圖示建立、命名、使用，以及字體選擇、字級與行高等入門指南。
• 內容策略指南：討論設計系統元件中內容與介面短文案的規劃起點。
• 團隊流程案例：整理元件貢獻、設計與開發協作及系統治理等實務文章。
• 公開系統資源：列出多個公開設計系統與 Figma Community 資源的連結入口。
• 設計與開發協作：收錄跨平台元件、語意化變數與無障礙設計系統的實務文章。
• 研討會內容：整理 Schema by Figma 各地活動的講題與演講內容。
• 投稿與更新訂閱：提供分享文章想法及訂閱新文章、指南的入口。

使用情境

• 設計師開始整理設計系統時，以版面、圖示、字體及內容策略指南建立基礎規則。
• 設計與工程團隊面臨元件維護分工問題時，閱讀貢獻流程與治理文章討論合作方法。

相似工具

• Adobe Color — 學習網站
• Adobe Learn — After Effects — 學習網站
• Apple Human Interface Guidelines — 學習網站
• Baymard Institute UX Knowledge Hub — 學習網站
• BP&O — 學習網站
• Brand New — 學習網站
• Butterick’s Practical Typography — 學習網站
• Color（Method of Action） — 學習網站
• Figma Learn — 學習網站
• Fonts In Use — 學習網站
• GoodUI — 學習網站
• Google Fonts Knowledge — 學習網站

加入創作邦會員

收藏實用內容、下載免費模板，訂閱電子報。

精選工具

• Comet — Comet 是 Perplexity 的 AI 瀏覽器，整合搜尋與助理功能，可協助閱讀、比較網頁內容、準備郵件草稿與整理學習計畫。
• Lovable — Lovable 可透過對話介面建立軟體產品，協助把想法製作為網頁應用程式。
• Pexels — Pexels 是照片與影片素材資源平臺。
• DOTOWN — DOTOWN 提供像素插畫下載，官方標示可商用，可用於圖示、文件與其他創作。

新工具

• justfont blog — 分享中文字體基礎、字型排版應用與字體設計入門的繁中文章及教案。
• LottieFiles Tips and Tutorials — LottieFiles 官方教學文章，分享設計系統、狀態機、介面動畫與 Lottie 流程。
• Adobe Learn — After Effects — Adobe 官方 After Effects 教學，涵蓋文字動畫、視覺效果與動態模糊。
• Pentagram Work — Pentagram 官方作品集，分享品牌識別、策略、包裝與動態等專案案例。