1 of 27

Design

Awesome Design Tools

Awesome-UI-Templates

Awesome Figma

＃＃內容

視頻
文章
社區
開源插件
插件開發
模板和 UI 工具包
Rest API 集成
客戶
轉換器

視頻

文章

＃＃社區

開源插件

Themer - 一個 Figma 插件，旨在讓您在來自不同已發布庫的同名樣式之間進行交換。
figma-plugins-on-github - 已在 GitHub 上共享的 Figma 插件列表。
Figlight - Figma 的代碼高亮。
FigmaThird - 在 Figma 中導入、點亮和使用 3D 模型。
svg-to-jsx - Figma 插件將 svg 複製為一個反應組件。
figma-latex-complete-plugin - 將 LaTeX 放入 Figma 文檔中。
system.colors - 從流行的設計系統導入調色板。
figma-speech-recognition - 嘿 Figma 語音識別。
FigmaToCode - 在 Tailwind、Flutter 和 SwiftUI 上生成響應式頁面和應用程序。
html-figma - 將 HTML 導入 Figma 圖層的插件。
tailwindcss-figma-plugin - TailwindCSS 的 Figma 插件。
design-tokens - Figma 插件，用於以亞馬遜風格的字典兼容格式將設計令牌導出到 json。

##插件開發

react-figma - 將 React 組件渲染到 Figma。
figma-jsonrpc - 利用 JSON-RPC 在 Figma 插件和 Figma UI 之間進行通信。
figma-api-stub - Figma API 存根。
figplug - Figma 插件生成器。
figma-messenger - 類型安全的 iframe - 主線程通信。
figma-plugin-helpers - 一組有用的幫助函數，可導入到您的 Figma 插件項目中。
create-figma-plugin - 用於開發 Figma 插件的綜合工具包。
figx - 一個全面可靠的 figma 實用程序庫。

模板和 UI 工具包

free-figma-bootstrap-5-ui-kit - 通過一系列具有強大自動佈局功能的預構建 Figma 組件加快設計速度和調整約束。
figma-plugin-ds - 一個用於 Figma 插件的小型輕量級設計系統。
figma-ui-components - 一組非官方的 Figma UI 組件。
figma-styled-components - Figma UI 風格的組件。
tailwindcss-figma-kit - TailwindCSS 的 Figma 套件。

Rest API 集成

storybook-addon-figma - 在故事書面板中嵌入 Figma 設計。
figma-assets-export - 從 Figma 導出資產並將其下載為本地文件。
figma-api-demo - 該項目包含使用 Figma API 的演示應用程序。
Figma.js - Figma API 的簡單 JS 包裝器。
figma-graphql - Figma API 的 GraphQL 連接器。
Figma-To-Pdf - 使用 API 從 Figma 導出 pdf 的簡單演示。
figma-theme - 從 Figma Styles 生成開發就緒的主題 JSON 文件。
figma-to-flutter - 將 Figma 組件轉換為 Flutter 小部件的 Dart 代碼生成器。
Figma to web - 該存儲庫將收集與 Figma 與 Web 集成相關的所有開發。
figma-and-production - 如何同步 Figma 和生產的示例。
Figma Asset Downloader - 優化並直接將資產下載到您的計算機。
figma-slack-updates - 從 Figma 文件的版本歷史中發布更新到 Slack。
figma-tools - 幫助您以編程方式與 Figma 文件交互的工具。
figma-export - 命令行實用程序，用於將顏色、排版、圖標和圖像從 Figma 導出到 Xcode / Android Studio 項目。
figma-lottie - Figma Lottie 集成。

客戶

Figmac - 一款超輕量級的 Figma 桌面應用，提供更自然的 Mac 體驗。
figma-app-ubuntu - Figma，Snap Package（非官方）。
figma-linux - Figma 電子應用程序（非官方）。

轉換器

Aeux - 輕鬆將 Figma 設計移動到 Adobe After Effects。
Figma to Sketch/XD Converter - 允許您在 Sketch 和 Adobe XD 中轉換和打開 Figma 設計。

Awesome Figma

is the first interface design tool with real-time collaboration.

A curated list of awesome Figma stuff that focused on integration Figma and development, e.g. Figma Plugins, Figma Rest API.

Found something cool? Please, !

Videos

Articles

Community

Open-Source Plugins

Plugins development

Templates & UI Kits

Rest API integrations

Clients

Converters

awesome-styleguides

風格指南

故事書

資源

視頻

比較器

工具

Webflow + Firebase用戶認證

Awesome Design Tools

出色的設計工具作為 Flawless App 系列的一部分加入 Abstract！

今天，我們很高興地宣布，Flawless App 已加入Abstract，這是一個設計交付平台，可為設計帶來可見性、責任性、可測量性和可預測性。

Flawless App 是我們的第一家公司，我們為我們的 5 人團隊所取得的一切感到自豪。

自2015 年以來，我們為設計師和開發人員推出了強大的工具- 其中包括Flawless App、Reduce、 [Flawless Feedback] ]（https://flawlessapp.io/feedback）。我們也為社區驅動的舉措投入了大量的愛心和關懷。很棒的設計工具就是其中之一。

＃＃＃＃下一個是什麼？我們的團隊已加入 Abstract，專注於建置 Abstract SDK，以提升開發人員的體驗。一段令人難以置信的旅程已經結束，新的旅程才剛開始。如果您想進一步了解 Awesome Design Tools 的未來，請繼續閱讀我們的常見問題解答。

如何使用和貢獻

現在您位於 Awesome Design Tools 部分，如果您需要插件 - 請前往 Awesome Design Plugins。
若要尋找該工具，請瀏覽目錄或搜尋關鍵字（例如「動畫」、「原型製作」）。
在 Twitter 上詢問 Lisa。

如果您發現了一些很棒的設計工具或插件，只需根據我們的[貢獻指南]（https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Contribution_Guidelines.md）發送拉取請求（他們很簡單，請看一下）。設計工具應在此處提交，插件應在 Awesome Design Plugins 文件中提交。我們免費使用此類標籤！free.svg，開源！[open-source.svg] ( https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) 僅限Mac ![mac.svg](https://github.com/LisaDziuba/Awesome - Design-Tools/blob/master/Media/mac.svg) 工具，不要忘記添加它們。現在我很想看到您的建議！

＃＃表中的內容

輔助工具

無障礙是指創建可供所有人（包括有視覺、運動、聽覺、言語或認知障礙的個人）使用的網站和應用程式的做法。在這裡，您可以找到適用於開發人員和設計人員的網路輔助功能工具、輔助功能測試工具以及輔助功能應用程式：

包容性設計 — Microsoft 團隊提供的方法論和一組工具。

動畫工具

動畫引導人們友善、順利地使用產品。即時互動UI讓使用者感受到即時回饋與情感觸動。這些免費和付費工具旨在使動畫創作變得更加容易。如果您打算製作動畫轉場、微互動或基於滾動的動畫，請使用以下工具：

After Effects — 由 Adobe 開發的數位視覺效果、動態圖形和合成應用程式。
BeatFlyer — 一個網路工具，可讓您從多層合成中快速創建循環且引人入勝的動畫。
Dokyu Motion — 簡化 After Effects 中的動作設計，以便任何剪輯師都可以講述不容忽視的故事。
Haiku Animator — 基於關鍵影格的動畫，將您的 UI 工具連接到開發人員可以輕鬆使用的程式碼。

Drama、Principle、Framer、Invision Studio、Flinto 也屬於 UI 和 UX 動畫應用程式和軟體動畫工具。

＃＃＃增強現實

擴增實境是一種透過向現實世界添加數位資訊層來升級現實世界的技術。AR 的使用日益增加，出現了數十種新的 AR 應用程式、開發套件和 AR 框架。因此，本節收集了不同的擴增實境工具，用於創建、投影和原型設計專注於 AR 的應用程式：

Daqri — 透過將數位資訊疊加到實體環境上，為員工提供專業級擴增實境。
EasyAR — 一款行動應用程式和擴增實境引擎，讓 AR 變得更容易。
HP Reveal — 透過視覺互動為列印內容增加價值。
Layar — 尋找各種基於擴增實境技術的物品。
Lightform — 投影 AR 設計工具。
Unity — 建立高品質的 3D 和 2D 遊戲，並將其部署到行動裝置、桌上型裝置和 VR/AR 上。
Vectary — 為您的網站建立 3D 和 AR。
Vuforia — 適用於行動裝置的 SDK，可用於建立擴增實境應用程式。
Wikitude — 為您的 iOS、Android 和智慧眼鏡應用程式提供圖像和物件追蹤、即時追蹤 (SLAM)、Geo AR 等功能。

協作工具

想要嘗試一些敏捷設計和開發協作的工具？好主意，因為這樣的工具讓設計人員和開發人員的生活變得更加輕鬆，節省時間並提高生產力。嗯，在 Slack 驅動的時代你知道這一切。在這裡您可以找到最適合產品團隊的協作工具：

Airtable — 一部分是電子表格，一部分是資料庫，完全靈活，團隊使用 Airtable 以自己的方式組織工作。
Asana — 工作管理平台團隊用來專注於發展業務的目標、專案和日常任務。
Basecamp — 專案管理套件，旨在從一個地方組織員工、委派任務並監控進度。
Freedcamp — 最具創新性的專案管理方式，完全免費......永遠。
Droplr — 螢幕截圖、檔案分享和螢幕錄影可協助您捕捉和解釋您的想法。
Filestage — 一款敏捷的內容審批軟體，可協助您與客戶和同事一起審查影片、設計和文件。
Float — 一種用於在一個地方規劃專案和安排團隊時間的工具。
HiveDesk — 透過螢幕截圖自動追蹤遠端員工的時間。它可以更輕鬆地監控遠端員工的生產力和管理專案。
Jira — 敏捷團隊所使用的軟體開發工具。
Keybase — 一款免費協作應用程序，內建端對端加密聊天、文件共享、git 存儲庫等！[free.svg](https://github .com/ LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/媒體/開源.svg）
Milanote — 一種易於使用的協作工具，可將您的想法和項目組織到可視板中。
Moqhub — 創意專案的快速線上打樣。取得影像和 PDF 的回饋。
MURAL — 視覺思考與協作。隨時隨地。
Notion — 寫作、計畫、合作與組織。概念就是您所需要的一切—在一個工具中。
ProofHub — 您所有專案、團隊和通訊的一個地方。
RealtimeBoard (Miro) — 用於跨職能團隊協作的白板平台。它最近更名為米羅。
Slack — 無論您從事什麼工作，都是工作協作中心。在這裡，您可以進行對話、做出決定，並且訊息始終觸手可及。
Sunsama — 一個設計精美、面向團隊的任務管理器，可將 Trello/Jira/Asana 票證整合到一個面向日曆的視圖中。
Taskade — 團隊生產力變得簡單、有趣，專為遠端團隊設計。Taskade 具有協作性，可在網路、行動裝置和桌面上即時同步。
Trello — 一個基於 Web 的專案管理應用程序，使您能夠以有趣、靈活且有益的方式組織專案並確定其優先順序。
Workzone — 一款簡單、功能強大的專案管理軟體。
Wrike — 線上專案管理軟體，可讓您全面了解並控制您的任務。
Zenkit — 一個用於安排會議、追蹤專案進度和集思廣益新想法的工具。
zipBoard — 線上視覺錯誤追蹤與網站註釋工具

顏色選擇器工具

如果您正在尋找吸管工具、顏色標識符或顏色捕獲，請查看此部分。使用此處提及的顏色選擇器，您將能夠創建新的顏色組合併定義出色的顏色組合。幾乎所有這些工具都是免費的：

Color by Cloudflare — 一種工具，用於根據UI 元素預覽調色板、循環訪問可訪問的顏色組合以及透過URL 導入或生成方式手動創建調色板。
Color Hexa — 免費的顏色工具，提供任何顏色的資訊並為設計產生匹配的調色板。
Geenes — 一種透過程式碼和草圖檔案匯出建立和諧色彩主題的工具。![free.svg](https://github.com/LisaDziuba/Awesome-Design- Tools /blob/master/Media/free.svg)
Khroma — 基於人工智慧的工具，可根據您的喜好產生調色板。

您也可以使用 Leonardo 建立調色板，這在輔助工具部分中提到。

設計回饋工具

在開發過程中您如何提供並獲取回饋？對於許多產品團隊來說，這個過程通常相當混亂，導致產品延遲和來回溝通的時間浪費。因此，如果您希望獲得有關 UI 問題或視覺錯誤的快速且結構性的回饋，請查看此工具：

GoVisually — 線上打樣、設計審查和批准軟體。

設計交接工具

當設計人員完成工作並需要向開發人員交付具有所有規格和資產的設計時，就會發生設計移交。設計交接工具允許自動產生樣式指南、對設計進行註解、檢查元素。這些工具最大限度地減少猜測並提高設計過程的有效性。

Avocode — 無需設計工具即可開放設計。無需準備圖層即可匯出影像。點擊圖層即可取得程式碼。
檢查 — 準備開發設計。由 Invision 製作。
Specctr — 如果您不幸在 PS、AI 或 ID 中設計 UI，此工具會建立紅線註解。
Sympli — 來自 Sketch、Photoshop 和 Adobe XD 的自動規格和資源移交。與 Jira、Xcode 和 Android Studio 整合。
Zeplin — 自動傳遞具有準確規格、資產、程式碼片段的設計和風格指南。

您也可以在 Relay 中進行設計切換，如設計版本控制部分中提到的。

設計靈感

創作過程可能會很艱難。因此，如果您沒有立即想到想法，請嘗試在其他設計師的作品中尋找靈感。這些設計靈感網站以流行公司和優秀產品的設計模式、用戶流程、電子郵件標記和創意解決方案為特色：

創意作品集 — 精選設計師和開發人員製作的最具創意的作品集。
Dribbble — 一個展示使用者製作的藝術作品的線上社群。從他人的作品中獲得靈感的絕佳資源。
Hover States — 為創意社群展示來自數位文化前沿的偉大作品。
H69.Design — 登陸頁面集合和為設計師提供的免費資源。
Lapa Ninja — 登陸頁設計靈感來自網路。1800 多個登陸頁面範例並每日更新。
Mobile Patterns — 一個設計靈感庫，具有最佳的 UI UX 模式（iOS 和 Android）。
Owwly — 充滿設計熱情的數位產品之家。
pttrns — 流行行動應用程式的設計模式。
設計團隊 — 關於矽谷一家科技新創公司的設計團隊的漫畫。
Typewolf — 幫助設計師為他們的下一個設計專案選擇完美的字體組合。
UI Garage — 為設計師、開發人員和行銷人員提供尋找靈感、工具和最佳資源的一站式商店。
UI Recipes — 每週 15 分鐘最熱門應用程式的 UI 設計課程。
Waveguide — 一個設計知識庫，其中包含數千個人工豐富的產品和品牌體驗範例（行動應用程式、登陸頁面、電子商務、CX/UX 模式範例）。
網頁設計博物館 — 超過 1,200 個精心挑選的網站，展示 1994 年至 2006 年間的網頁設計趨勢。

設計系統工具

我打賭您聽說過設計系統，因為這是一個非常受歡迎的話題。設計系統提供一致、穩健的設計模式，以保持設計和開發同步。它們本質上是規則、約束和原則的集合，在設計和程式碼中實現。在這裡您可以找到用於建置、維護和組織設計系統的工具。

Cabana — Sketch 的高級設計系統，可協助您比以往更快地創造令人驚嘆的產品。
設計系統管理員 — Invision 的設計系統管理員。
Frontify — 建立圖形指南、模式庫、設計系統。
互聯網 — 將設計和工程圍繞單一事實來源連接起來。該工具尚未公開可用（測試版）。
Lucid — 用於建立、管理和共享設計系統的工具。從簡單的元件庫到樣式的詳細描述。
Modulz — 設計、建置、記錄和發佈您的設計系統 — 無需編寫程式碼。
Specify — 用於創建、擴展和維護設計系統的工具。
符號設計系統 — 基於原子元素的草圖設計系統。
Toolabs — 基於設計系統和組件的設計、原型和開發工具。目前尚未公開，但您可以申請搶先體驗。
Zeroheight — 由設計師創建、由開發人員擴展、每個人都可編輯的風格指南。

我們也可以在 Sketch、Figma、UXPin 和 Framer X（Framer X Team Store）中加入此功能。

<文章 id="設計到程式碼工具">

設計到編碼工具

每個人都可以學習開發，但這需要時間和精力。如果您現在需要一個網站或應用程式並且不想僱用開發人員，請關注網站建立者。這種從設計到編碼的工具將幫助您快速而美觀地製作作品集、簡單的登陸或應用程式。

Bootstrap Studio — 一個強大的網頁設計工具，用於使用 Bootstrap 框架建立響應式網站。
Draftbit — 直接從瀏覽器直觀地設計和建立行動應用程式。
EasyLogic Studio — 非常棒的css+svg 設計工具，它也被轉換成如圖所示的程式碼。![free.svg](https:// github.com/LisaDziuba /Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master /Media/open-源.svg）
Grapedrop — 使用易於使用的編輯器設計您的元件、Web 專案並立即在線上發布它們。
PageCloud — 最快、最可自訂的網站建立器，讓任何人可以創建自己理想的網站。
Piinegrow — CSS Grid、Bootstrap 4 和 3、Foundation、響應式設計、HTML 和 CSS 的專業視覺化編輯器。
px.div — 適合開發人員和設計人員的網站建立工具。
Readymag — 一種視覺上令人愉悅的工具，用於在網路上設計從登陸頁面到多媒體長讀物、簡報和作品集。
STUDIO — 從頭開始設計、即時協作並發佈網站。
Supernova Studio — 從 Sketch 匯入設計並將其轉換為 Android、iOS 或 React Native 程式碼。
Tilda — 使用 Tilda 模組免費建立網站、登陸頁面或線上商店，並在當天發布。
Wix — 最簡單且功能最齊全的網站建立器，可讓您建立自己的高度客製化的網站。
Webflow — 在您的瀏覽器中建立響應式網站，然後由我們託管或匯出您的程式碼以託管到任何地方。

<文章 id="設計版本控制">

設計版本控制

開發人員很長一段時間以來都在積極使用版本控制工具，可能是從 2005 年（Git 第一版）開始。對於開發團隊來說，使用版本控制系統是不費吹灰之力的，而設計版本控制系統最近才出現。這個市場正在迅速發展，我們期望設計師在版本控制方面看到更多：

Abstract — 一個供設計團隊對 Sketch 檔案進行版本控制、管理和協作的平台。
Figma Relay — Relay 將您的最新資源從 Figma 直接推送到您的程式碼庫（尚未發布）。
Versions — 為設計人員提供的版本控制工具，具有視覺差異、合併和衝突解決功能。適用於 GitHub、Bitbucket、GitLab 和 Azure DevOps。

<文章 id="開發工具">

開發工具

本節提到開發工具和瀏覽器。開發瀏覽器具有幫助開發人員和設計人員創建和測試網站和應用程式的功能。

Blisk — 提供了一個開發工作區，可以以兩倍的速度開發和測試現代 Web 應用程式。
Litmus — 一個電子郵件行銷活動創建平台，除此之外，它還可以讓您了解 HTML 電子郵件在各種電子郵件用戶端中的顯示方式。
Polypane — 一款從頭開始建立的瀏覽器，用於建立和測試網站和應用程式。

<文章 id="體驗監控">

體驗監控

傾聽使用者的聲音很重要，但了解真實的使用情況更為重要。為此，您需要安裝不同的分析工具、體驗監控軟體和使用者行為應用程式。只需使用有關用戶資料的分析解決方案：

Amplitude — 了解您的用戶，快速發布更好的產品體驗並發展您的業務。
Chalkmark — 在實施之前獲得有關設計的快速回饋，從而提高客戶轉換率和以任務為導向的成功率。
Fathom — 提供簡單、有用的網站統計信息，無需追蹤或儲存使用者的個人資料。
FullStory — 一款可在一個強大且易於使用的平台中擷取所有客戶體驗資料的應用程式。
Heap — 自動擷取每個 Web、行動和雲端交互，然後追溯分析您的數據，而無需編寫程式碼。
Hotjar — 查看訪客如何使用您的網站並收集使用者回饋。
Inspectlet — 在訪客使用您的網站時錄製視頻，以便您可以看到他們所做的一切。
LiveSession - 高品質的使用者會話重播分析。
LogRocket — 查看使用者在您的網站上執行的操作，幫助您更快重現錯誤並解決問題。
Mixpanel — 深入了解所有以使用者為中心的數據，以便根據客戶如何使用您的產品或網站做出更明智的決策並更快地採取行動。
Mouseflow — 記錄滑鼠遊標移動。
Pendo — 衡量並提升應用程式中的客戶體驗。
Smartlook — 使用者會話重播與使用者參與度分析。
Usabilla — 透過在正確的時間提出正確的問題來建立面向未來的客戶體驗。

<文章 id="字型工具">

字體工具

字體通常用於使網頁變得更加美麗。它是任何設計的重要組成部分。在本部分中，您將找到字體產生器和字體查找工具，可讓您管理和使用字體：

Fontface Ninja — 瀏覽器擴展，用於發現任何網站上使用的字體。
Fontown — 一種印刷工具，具有不斷增長的字體目錄，可促進設計人員的工作流程。
FontSelf — Illustrator 和 Photoshop CC 的擴展，可讓您在幾分鐘內將任何字母轉換為 OpenType 字體！
Font Squirrel — 下載廣泛的免費字體。![free.svg](https://github.com/LisaDziuba/Awesome-Design -工具/blob/master/Media/free.svg)
LostType — 第一家按需付費類型鑄造廠。

您也可以使用指定處理字體，這在設計系統工具部分中提到。

<文章 id="漸層工具">

漸層工具

你可以看到漸層顏色無所不在——使用者介面、品牌、插畫、排版。漸層是透過使用兩種或多種不同的顏色來繪製一個元素並在它們之間逐漸淡出而創建的。它可能看起來是一種令人難忘、新鮮和獨特的顏色。要為您的設計製作這樣的漸變，請使用這些漸層調色板。

顏色和字體 — 為數位設計師和 Web 開發人員精心設計的顏色、g 輻射和字體庫。![free.svg](https://github .com /LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)
酷炫背景 — 探索精心挑選的酷炫背景，您可以將它們新增至部落格、網站。

您也可以使用 Leonardo 建立和審核漸變，這在輔助工具部分中提到。

<文章 id="圖示工具">

圖示工具

除了字體之外，每個設計中都使用了圖示。這些基本元素支援並指導產品內的許多使用者操作。毫無疑問，圖標是使用者導航中的重要元素。雖然製作這些小設計元素既困難又耗時，但您可以獲得數千個向量圖示供個人和商業用途。

Animaticons — 一組不斷增長的精美、高分辨率、動畫 GIF 圖標，您可以自訂它們。
Flaticon — 1593000+ SVG、PSD、PNG、EPS 格式或圖示字體的向量圖示。
Freepik — 獨家免費贈品和項目所需的所有圖形資源的集合。
Iconscout — 在一處獲取高品質圖示、插圖和庫存照片。
Iconfinder — 向量圖示 (SVG) 市場。以 IconJar 格式提供的圖示集。
Motion — 免費、簡單的動畫圖示編輯器。
Noun Project — 一切的圖示。
Orion Icons — 具有高階互動式 Web 應用程式的 SVG 向量圖示。
SVGRepo — 一個擁有 300.000 多個 SVG 向量和圖示的網站。

您也可以使用「指定」來處理圖標，這在設計系統工具部分中提到。

<文章id =「插圖」>

插圖

插圖可以用在您的登陸頁面、部落格文章、應用程式或電子郵件行銷活動中。它們使您的設計變得生動有趣。雖然繪製好的插圖是熟練的圖形設計師的任務，但您可以從我們社區中非常友善的人那裡獲取免費的 SVG 圖像和插圖：

Pngtree 圖解 — 超過 13142 張專業設計的不同風格的插畫。

<文章 id="資訊架構">

資訊架構

資訊架構幫助設計人員組織和建立網站、行動應用程式和其他軟體內的內容。因此，用戶將了解產品功能並找到所需的一切。這些資訊架構工具應該允許您創建視覺化網站地圖並改進您的網站內容結構：

DYNO Mapper — 使用可視網站地圖、內容清單、內容審核、內容規劃、每日關鍵字追蹤和網站可訪問性測試來組織網站專案。
Octopus.do — 視覺化網站地圖產生器。即時建立您的網站結構並快速共享它以與您的團隊或客戶合作。
OmniGraffle — 使用這款功能強大且易於使用的應用程式創建精美的圖表和設計。！[mac.svg](https://github. com/LisaDziuba/ Awesome-Design-Tools/blob/master/Media/mac.svg)
OptimalSort — 卡片分類工具，可讓您了解人們如何對 UI 中的內容進行分類。
Treejack — 上傳您建議的網站地圖以查看使用者將如何瀏覽您的網站。
WriteMaps — 建立令人印象深刻的網站地圖！以視覺、有趣且美觀的方式規劃您的下一個網站專案的頁面和內容。

<文章id =「標誌設計」>

＃＃＃標誌設計

徽標是您品牌形象的起點。它反映了產品使命、功能和品牌訊息。理想情況下，徽標在您的產品和用戶之間建立了牢固的聯繫。標誌設計是一門藝術，就像許多其他設計學科一樣。有了正確的標誌設計工具，這種藝術可以更快完成。

Graphic Springs — 從向量格式標誌範本庫中進行選擇，按行業分類。編輯模板的圖形和文本，然後下載。
標誌設計團隊 — 提供價格實惠的專業客製化標誌設計和品牌設計服務。
Logojoy — 使用人工智慧立即為您的企業產生獨特的標誌創意。
Designhill 的 Logo Maker — 只需幾分鐘即可產生 1000 個獨特的徽標，無需設計專業知識。
Logo My Way — 從全球創意設計師的 600 個客製化商標設計中進行選擇。
Logo Package Express — 在 5 分鐘內自動為您的客戶匯出並包裝數十種徽標變體和檔案類型。
Wizlogo — 使用專業設計師支援的簡單且經濟實惠的工具創建標誌。

您也可以使用UI設計工具中提到的Adobe Photoshop、GIMP、Inkscape、Krita和Vectr進行標誌設計。

<文章 id="mockup-tools">

樣機工具

模型是表示產品的視覺方式。線框主要代表產品的結構，而模型則顯示產品的外觀。這些模型工具可協助您建立模型、線框圖、圖表和原型並進行協作：

Artboard Studio — 線上圖形設計應用程式主要專注於產品模型。
Cleanmock — 使用最新的裝置框架（如 iPhone 和自訂背景）創建令人驚嘆的模型。
Craftwork Design — 免費且優質的高品質數位產品，讓您的工作更快、更輕鬆。
Device Shots — 此工具可協助您使用網站或行動應用程式的螢幕截圖免費建立精美的裝置模型。
Dimmy.club — 用於您的網站和應用程式螢幕截圖的裝置模型產生器。
Frrames — Frrames 模型是為您理想的演示精心製作的響應式視窗模型。
Mediamodifier — 在幾秒鐘內創建令人印象深刻的產品模型。
Mockflow — 集思廣益使用者介面創意的最快方法。
Mockuuups — 用於創建漂亮的應用程式預覽或任何行銷資料的拖放工具。
類比影片 — 透過在影片中新增裝置框架來立即建立模型。
Moqups — 協助您在線上框框、模型、圖表和原型上即時建立和協作。
原始模型 — Photoshop 的高品質模型，讓您的設計脫穎而出。
PixelBuddha — 為網頁設計師和開發人員提供免費且優質的優質資源。
Ramotion Store — 為 Sketch 和 Photoshop 精心製作的 Apple 和 Android 模型。
SceneLab — 在線創建逼真的模型和定製品牌設計。
ScreenSpace — 運動設計師的 3D 設備影片。
Screener — 使用此應用程式使用您選擇的模型將一堆圖像插入到主題演講檔案中。![free.svg](https://github .com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)
Smartmockups — 只需點擊幾下即可創建令人驚嘆的產品模型。
shotsnapp — 為您的數位應用程式和網站設計創建精美的設備模型演示。
Threed — 在瀏覽器中產生自訂 3D 設備模型。

沒有程式碼工具

隨著「無程式碼工具」的興起，每個擁有筆記型電腦的人都可以建立和啟動專案。這些工具可協助設計師和製造商創建網站、應用程式甚至遊戲。沒有任何程式碼工具可以自動執行日常任務並且可以在沒有開發背景的情況下使用。查看此處的工具，如果您需要更多工具，請查看“程式碼設計”部分。

Bubble — 建立和託管 Web 應用程序，無需編寫程式碼或僱用工程師團隊。
Retool — 為您提供構建塊，您可以更快地建立工具。
sheet2api — 從 Google Sheets 或 Excel Online 試算表建立 API，無需編碼。
Sheet2Site — 從 Google Sheets 建立網站，無需編寫程式碼。
Shopify — 一個平台，具備您啟動、經營和發展業務所需的所有電子商務和銷售點功能。
Thunkable — 任何人都可以建立本機行動應用程式的拖放工具。
UserGuiding — 建立演練、清單、熱點和模式以改善使用者入門。

像素藝術工具

像素藝術是一種數位藝術形式，其中顏色應用於各個像素以創建圖像。像素藝術可用於創建從複雜的場景和遊戲背景到角色設計或表情符號的一切。如果您想嘗試一下，請查看適用於 macOS 和 Windows 的像素藝術軟體：

<文章 id="原型工具">

原型設計工具

原型是所提出的解決方案的簡單實驗設計。它應該有助於以快速且廉價的方式測試想法、設計假設和假設。原型設計工具使設計人員和客戶能夠了解產品在現實世界中的功能，並就該解決方案進行協作。許多現代原型設計工具可用於線框圖、原型設計和協作：

Axure RP — 線框圖、原型設計、協作和規範生成。
SAP Build — 一套完整的雲端為基礎的工具，用於設計和建置企業應用程式。
Flinto — 一款 Mac 應用程序，用於創建應用程式設計的互動式動畫原型。
Marvel App — 協作設計平台。線框圖、原型、線上設計並在一個地方創建設計規格。
Maze — 一款為設計師和開發人員提供的工具，可為您的 Invision 原型提供分析結果以及可操作的 KPI。
ProtoPie — 將高保真互動組合在一起，建立感測器輔助原型並在幾分鐘內分享您的驚人創作。
Proto.io — 一種用於創建完全互動式高保真原型的工具，其外觀和工作方式與您的應用程式完全相同。
Prott — 一種易於使用且直覺的原型設計工具，可促進團隊協作。
Useberry — 一種可用性測試工具，允許從InVision、AdodeXD、Sketch、Marvel 導入原型，並透過熱圖、視訊記錄、使用者流程、時間條獲取用戶行為洞察以及後續問題的解答。

您也可以使用 Figma、Adobe XD、Sketch 和 InVision Studio 進行原型設計，這些在 UI 設計工具部分中提到。

截圖軟體

截圖是設計和開發工作流程中的典型任務。因此，這些免費且功能齊全的螢幕截圖應用程式可以幫助您輕鬆捕獲螢幕。有些螢幕截圖僅適用於 macOS，而其他螢幕截圖則支援兩種作業系統：

Camtasia — 具有成熟內建編輯器的螢幕錄影機。
CloudApp — 錄製影片、網路攝影機、註解螢幕截圖、建立 GIF。
Snagit — 擷取影像與影片、建立 GIF、註解、編輯與分享。

草圖工具

有時您只需要一支鉛筆和一張紙就可以開始創建您的應用程式或網站。因此，您可以在此處找到具有出色素描表範本的線上素描工具，以加快您的創作過程：

SMM 設計工具

行銷團隊通常需要精心設計的材料。它可以是不同的橫幅、促銷視覺效果、網站圖標、動畫或只是社交平台（如 Twitter 或 Instagram）的精美圖像。在本節中，我們將不斷添加工具，供每個人創建行銷設計。

Canva — 為工作、生活和娛樂創造令人驚嘆的設計 — 即使您不是設計專家！
Crello — 使用網路上最好的軟體創建自己的設計：貼文、封面、圖形和海報。
Stencil — 一種圖形設計工具，旨在輕鬆快速地創建社交媒體圖像。

聲音設計

聲音設計是為網站、應用程式、電影、遊戲或任何其他產品創建音景的藝術。聲音在改變人們與您的產品的聯繫方面具有巨大的潛力。有些聲音設計軟體非常先進，大多數聲音設計師都可以使用，而有些則適合初學者。

Appsounds — 適用於應用程式、遊戲和任何產品的 UI 聲音套件。
AudioJungle — 來自音樂家和音響工程師社群的 836,206 首曲目和聲音。
Max — 使用虛擬跳線連接物件以建立互動式聲音、圖形和自訂效果。
Reaper — 匯入任何音訊和 MIDI，合成、取樣、作曲、編排、編輯、混音和掌握歌曲或任何其他音訊專案。
SoundKit — 一個 UI 聲音庫，專為滿足您的所有介面需求而設計。
UI Sounds — 透過範例學習使用者介面的聲音設計。

庫存照片工具

需要 iOS 應用程式的高品質照片或新橫幅嗎？您始終可以自己拍攝或從庫存照片網站借用。幸運的是，有數百張美麗的免費庫存照片和免版稅圖片可用於任何項目：

Death to Stock — 付費庫存照片服務，偶爾會提供免費包的郵件列表，並且注重看起來不像庫存攝影。

庫存視頻

如果您使用影片內容，您將喜歡這些高品質、手工策劃的庫存影片。您將在下面找到許多優質且免費的庫存影片網站，您可以在您的網站、廣告活動或社交媒體中使用它們：

Videezy — 立即下載數百萬個免費和優質素材和動態圖形。
123RF — 每日超過 100,000 個新內容和 24/7 線上支援。

學習設計的工具

設計+程式碼 — 最佳工具和設計系統的完整課程。
DesignerUp — 一系列自訂進度的課程和指導，可協助您掌握產品設計 (UI/UX)。
Figma Training — 針對 UI 設計師的 Figma 的速成課程。
Interaction Design Foundation — 業界知名的學習 UX/UI 技能的網站。
學習 UX — 學習 UI 和 UX 工具的完整方法。
Sketch Master — 專業人士學習 Sketch 的視訊訓練課程集合。

UI 設計工具

2019 年最好的 UI 設計工具是什麼？您可以選擇下面的任何工具，它可以讓您完成數十種設計任務——網站或行動裝置的 UI、線框、原型、動畫、標誌。對於 UX 和 UI 設計師來說，這些都是很棒且功能齊全的工具：

Affinity Designer — 適用於 macOS、iOS 和 Microsoft Windows 的向量圖形編輯器。
Botmock — 設計、原型設計和測試語音和文字對話應用程式。支援多個平台。
CleverBrush — 一個基於瀏覽器的線上向量編輯器和數位發布工具，可以作為 JS 元件整合到頁面中。
Figma — 一種基於瀏覽器的設計工具，允許即時協作進行設計和原型製作。
Illustrator — 為印刷品、網路、視訊和行動裝置建立標誌、圖示、繪圖、排版和插圖。由 Adobe 製作。
Photoshop — 由 Adobe 開發的圖像和圖形設計軟體。
Studio — 將設計、原型製作和協作整合到一個和諧的工作流程中。由 InVision 製造。
Voiceflow — 為 Amazon Alexa 和 Google Home 製作原型、設計和部署真實應用程式。

使用者流程工具

使用者流程是使用者為實現有意義的目標所採取的一系列步驟。這是規劃客戶旅程路徑和改善使用者體驗的快速方法。因此，如果您需要製作使用者流程圖、使用者流程圖或網站地圖，請看看這些工具：

Flowmapp — 一個用於建立網站地圖和使用者流程的線上工具，可協助您有效地設計和規劃使用者體驗。
NinjaMock — 線框與使用者流程線上工具。連結您的視圖並建立邏輯流原型。全部具有寫意的視覺風格。
Overflow — 將您的設計轉變為可播放的敘述故事的使用者流程圖。
Whimsical — 輕鬆建立流程圖、線框和便條紙。
XMind: ZEN — 腦力激盪與心智圖工具，可在大綱與樹狀圖之間切換。將主題與其他圖表連結。

使用者研究工具

使用者研究透過各種定性和定量方法（訪談、觀察、表格等）幫助您了解使用者行為、需求和動機。這些使用者研究工具可能對您有用：

Appoint.ly — 一個基於網路的日程安排工具，可透過與線上行事曆整合來協助快速安排會議。
Calendly — Calendly 可以幫助您安排會議，而無需來回發送電子郵件。
Crowd Signal — 收集、組織和分析來自各種來源（包括社群媒體和行動裝置）的資料。
Doodle — 用於時間管理和協調活動、會議、約會的線上日曆工具
Evolt — 以乾淨、現代的方式創建使用者角色、故事板、商業模式畫布、體驗地圖、腦力激盪板和情緒板。
Feedback Lite — 使用旨在提高網站效能並提高客戶參與度的客戶之聲解決方案收集高品質的客戶回饋。
GoToMeeting — 一個簡單、功能極為強大的網路會議服務。
Handrail — 端到端、協作式使用者研究與見解平台 — 規劃研究、收集和分析資料並分享您的發現。
Lookback — 使用即時產品或原型遠端運行、記錄和記錄使用者研究會話。
Reflector — Reflector 是一種基本的螢幕鏡像和記錄工具，因此您可以使用任何現有的線框或原型遠端進行使用者測試。
Reframer — 一種研究工具，可協助您的團隊擷取、標記（程式碼）和識別多位研究參與者的質性資料中的模式。
Sticktail — 用於在組織內集中、尋找和分享使用者見解的平台。
Survey Monkey — 線上調查工具，用於捕捉對您最重要的人的聲音和意見。
Typeform — 使用簡單的拖放介面建立任何類型的表單、調查或問卷，甚至接受信用卡付款。
Wufoo — 建立表單、收集資料和付款並自動化您的工作流程。
YesInsights — 簡單的問題和 NPS 調查可改善您的業務。
UserBit — 為您的團隊提供即時研究工具的平台。標記/編碼訪談和回饋、捕捉見解、創建角色、視覺化網站地圖等。
使用者訪談 — 根據職業、人口統計、地理等因素，從擁有 125,000 名成員的社群中招募參與者，進行任何類型的研究。
Zoom — 這是最好的線上會議服務之一。

視覺化偵錯工具

LogRocket — 一種記錄使用者在您網站上執行的操作的工具，以便您可以更快地重現錯誤並修復問題。
Visual Inspector — 用於網站回饋和修復設計錯誤的協作工具。

<文章 id="線框工具">

線框工具

線框是一種視覺模型，概述了網站或應用程式的基本結構。它包含了最基本的元素和內容，可幫助您輕鬆解釋設計想法。線框是一種低保真度的設計展示方式。本節介紹了適用於各種用例的最佳線框圖工具。

Balsamiq Cloud — 輕鬆繪製 UI 草圖。捕捉您的想法，協作設計，讓每個人都參與其中。
Gliffy — 用於建立框架、UML 圖、流程圖、線框圖等的工具。
Pidoco — 此軟體可讓您快速建立點擊式線框和完全互動式的 UX 原型。
異想天開的線框 — 即時線框觸手可及。豐富的可配置元素庫，如按鈕、輸入、複選框。
1200px 網格系統 — 幫助您建立比 960 像素樣式更廣泛的網站設計網格系統。

三維建模軟體

3D 圖形用於遊戲、電影製作、建築、工程和 3D 列印。3D 藝術家和設計師使用本節中提到的特定 3D 建模軟體。

Autodesk — 整合 CAD、CAM 和 CAE 軟體。將設計、工程和製造統一到一個平台。
Maya — 在一個工具集中製作動畫、環境、運動圖形、虛擬實境和角色創建。
Onshape－專門針對科技與零配件設計的建模軟體，是首款全雲3D軟體。
Rhino — 一款基於曲線的 3D 建模軟體，可建立數學上精確的 3D 曲面模型。
SketchUp — 真正為每個人製作 3D 建模的 3D 設計軟體，具有簡單易學且功能強大的工具集。
Vectary — 使用我們的拖放 3D 建模工具創建精美的 3D 模型。
3D Slash — 3D 建模工具，可在所有裝置和所有作業系統上使用，線上和離線。

附錄（參考與啟發）

Awesome Design Tools & Plugins 由 Flawless 團隊的 Lisa Dziuba 和 Valia Havruliyk 策劃。它的靈感來自於設計社群的文章和我們的好朋友 Graeme Fulton 製作的 Prototypr.io Toolbox。如果您發現一些很棒的設計工具，請建議。感謝您讓這個專案變得很棒:)

Awesome Typography

Curated list about digital typography.

Specifications
OpenType
JavaScript
Python
C
C++
C#
Java
Ruby
Go
Rust
PHP
Perl
Processing
Clojure
UFO
Tools with GUI
Font Validator
Font Testing Websites
Miscellaneous
Fonts
TrueType
Books
Videos

Specifications

Microsoft's Documentation
Apple's Documentation
The Compact Font Format Specification - Technical Note #5176.
the-cff-table - Markdown conversion of the Adobe Tech notes 5176 and 5177 about CFF.
Adobe's Documentation

OpenType

OpenType: let's learn how modern fonts actually work
The OpenType Cookbook - Introduction to OpenType features for type designers. (Source).
A bit of font generation - Brief excursion into OpenType.

JavaScript

OpenType.js - Read and write OpenType fonts.
opentype-layout - Experimental word-wrapping and layout for OpenType.js.
canvas-text-opentypejs-shim - Consistent text rendering for (backed by OpenType.js).
CharacterMap - Online Character Map / Glyph / Icon / Font Viewer.
font - Parse OTF/TTF file format directory from buffers for metadata.
fontkit - Advanced font engine for Node and the browser.
Minimal-font-generator - Font's Hello world.
simple-cff-builder - Simple CFF builder for testing fonts with different Type2 charstrings.
ttf2woff2 - Convert TTF files to WOFF2.
ttf2woff - Convert TTF to WOFF, for Node.js.
sfnt2woff - Convert TTF or OTF to WOFF, support Node.js and Browsers.
ttf2eot - Convert TTF to EOT for Node.js.
cubic2quad - Aproximates cubic bezier curves with quadratic ones.
SVG font creator - Create SVG font from separate images.
node-sfnt - SFNT parser and generator for Node.js.
node-unicode-data - JavaScript-compatible Unicode data generator.
fontwr - Font manager for web projects.
Open Type playground - Playground for Open Type experiments with CSS.
ChromaCheck - Feature test for color font support in browsers.
Font Face Observer - Font load events, simple, small and efficient fontfaceobserver.com.
Web Font Loader - Web Font Loader gives you added control when using linked fonts via @font-face.
localFont - Implement localStorage web font caching in seconds.
Fontello - This tool lets you combine icon webfonts for your own project.
GitHub Font Preview - Adds a preview for fonts & glyphs on GitHub with OpenType.js.
unidata - Unicode Character Database for JavaScript.
UCD - Unicode Character Database for JavaScript.
Character Set Inspector - Unicode Character Database for JavaScript.
OpenType - OpenType font parser in JavaScript.
opentype-geometry - Convert Text from OpenType font to three.js 3D.
Plumin.js - Create and manipulate fonts in the browser.
Typr.js - Process fonts in JavaScript.
fonteditor-core - Read, write, transform fonts in JavaScript.
fontmin - Minify font seamlessly.
fontfacegen - Browser font-face generator for creating browser usable fonts from TTF's or OTF's.
NType - 4D Type Extruder.
node-emoji - 😏 simple emoji support for Node.js projects.
custom-fonts-in-emails - Extremely easy way to use custom fonts in emails without having to use art software.
Google Fonts Infos - Extract info out of the Google Fonts archive.
Hyphenopoly.js - JavaScript polyfill for client-side hyphenation.
Hyphenator.js - JavaScript that implements client-side hyphenation of HTML-Documents.
Hypher - Fast and small JavaScript hyphenation engine.
Typeset.js - HTML pre-processor for web typography (hanging punctuation, soft hyphen insertion, optical margin outdents, small-caps conversion and punctuation substitution).
Typeset - TeX line breaking algorithm in JavaScript.
otfcc-cubic2quad - Losslessly turn CFF OTF to TTF using otfcc.
caryll / shapeops - Boolean operations and overlap removal for curves.
OpenType-SVG Workshop - OpenType-SVG Workshop Web application.
A-binary-parser-generator - This project aims to create a tool that can turn a spec file into a parser skeleton for binary data files such as OpenType fonts, PNG images, etc.
font-spider - Smart webfont compression and format conversion tool.
Brotli.js A JavaScript port of the Brotli compression algorithm, as used in WOFF2.
ideohint - Optimized hinter for Ideographs.
subfont - Command line tool to inject Google font subsets used glyphs into your page.
webfont - Awesome generator of webfont, WOFF2, WOFF, EOT, TTF and SVG.
grapheme-splitter - JavaScipt library that breaks strings into their individual user-perceived characters.
unicode-properties - Provides fast access to unicode character properties.
unicode-tr51-emoji - Emoji data extracted from Unicode Technical Report #51 v1.0 – v5.0.
fontblast - Give me an icon-font, and I'll create individual SVG/PNG files for all icons in it.
fontplop - Fast, Simple, & Free Open Source Webfont Converter.
svgfont2svgicons - Extract SVG icons from an SVG font.
glyphhanger - Your web font utility belt. It shows what unicode-ranges are used on a web site (optionally for a font-family or for each font-family). It can also subset web fonts.
Punycode.js - Robust Punycode converter that fully complies to RFC 3492 and RFC 5891.
code-point-at - ES2015 String#codePointAt() ponyfill.
Typefont - First open-source library that detects the font of a text in a image.
node-fonttools - Native bindings to fonttools to decompile and compile fonts.
font-toolkit - Font file manipulating in TypeScript.
variableFont.js - Handles variable fonts through OpenType.js

Python

fontTools - Library for manipulating fonts, written in Python.
fontmake - Compile fonts from sources (UFO, Glyphs) to binary (OpenType, TrueType).
FontReport - Tool to create PDF files containing glyph images and information about a font.
fontdiff - Tool for finding visual differences between two font versions.
kern-dump - Scripts for working with and analyzing kerning information (ATypI 2013).
cu2qu - Cubic-to-quadratic bezier curve conversion.
Font Bakery - Tools to prepare font families for inclusion in github.com/google/fonts.
glyphNameFormatter - Generate list of glyphnames from unicode names.
woffTools - Library for working with WOFF files.
pyftfeatfreeze - With pyftfeatfreeze, you can “freeze” some OpenType features into a font.
RoboFab - Library with objects that deal with data usually associated with fonts and type design.
pyfontaine - Python tool to check font files for language/character set support.
Glyph Nanny - Live report about potential drawing issues in your glyph.
Kernagic - Semi-automatic font spacing tool.
Huerta Tipográfica Letterspacer - HT Letterspacer is a tool for spacing fonts.
OpenType-SVG Tools - Tools and sample files for making OpenType-SVG fonts.
boxDrawing.py - Python script to draw all the box drawing characters and block elements based on parameters.
scfbuild - Create OpenType-SVG color fonts from a set of SVG source files.
color-emoji - Tool to build color fonts using Google color-font format (CBDT/CBLC).
monospacifier.py - Convert variable-pitch fonts to monospace (useful for unicode and indentation-friendly programming).
edf825/SVG-OpenType-Utils - SVG in OpenType Utils (!Old: 2013).
Icon Font to PNG - Python script (and library) for exporting icons from icon fonts (e.g. Font Awesome, Octicons) as PNG images.
Compositor - Basic OpenType GSUB and GPOS layout engine.
UFO Extractor - Tools for extracting data from font binaries into UFO objects.
Noto Tools - Noto fonts support tools and scripts.
compreffor - CFF table subroutinizer for FontTools.
font-line - OpenType vertical metrics reporting and font line spacing adjustment tool.
Flat - Library for creating and manipulating digital forms of fine arts.
PageBot - Scripted page layout program, as application inside Drawbot generating high quality typographic documents that support high quality fonts.

C

otfcc - Parses & writes SFNT structures.
AFDKO - Adobe Font Development Kit for OpenType. See AFDKO Overview.
stb_truetype - Parse, decode, and rasterize characters for TrueType fonts. Single header file.
FreeType - Freely available software library to render fonts.
Raqm - Library for complex text layout.
SheenFigure - Implementation of advanced typographic tables of OpenType specification.
SheenBidi - SheenBidi is the world's most sophisticated implementation of latest unicode bidirectional algorithm.
freetype-gl - OpenGL text using one vertex buffer, one texture and FreeType.
WOFF - WOFF conversion reference code.

C++

font to svg - Render characters from font files into an SVG path.
LCDF Typetools - Utilities for manipulating OpenType, PostScript Type 1, and Multiple Master fonts.
HarfBuzz - HarfBuzz OpenType text shaping engine.
FontView - Demo app that displays fonts with a free/libre/open-source text rendering stack: FreeType, HarfBuzz and Raqm.
Text rendering tests - Test suite for text rendering.
FTGLES - TrueType font rendering library for OpenGL ES on iOS devices (iPad and iPhone).
TTFPatch - Mirror of TTFPATCH by Wolfram Esser, modified to support fonts conforming to newer OTF specifications, built for modern versions of Windows.
stb-truetype-opengl-examples - Examples of TrueType font rendering in C++11 using stb_truetype library and OpenGL 3+.
WOFF2

C#

NRasterizer - Simple and clean TrueType font renderer written purely in c#.
Typography - C# Font Reader (TrueType / OpenType / OpenFont), Glyphs Layout and Rendering.
SixLabors.Fonts - Font loading and drawing library.
SharpFont - Pure managed TTF / OTF reader and renderer.

Java

sfntly - Library for Using, Editing, and Creating SFNT-based Fonts.
Emoji-Tools - Multiple useful tools to help Android and iOS/OSX developers with creating and modifying Emoji Font files.
Tehreer-Android - Library that gives full control over text related technologies such as bidirectional algorithm, open type shaping engine, text typesetting and text rendering.

Ruby

emoji-extractor - Extracts high-resolution emoji pngs from Apple Color Emoji.ttf.
font - Command-line font manager.

Go

font - Parsing OpenType fonts in Golang.
freetype - Freetype font rasterizer in Go.

Rust

font-rs - The fastest font renderer in the world.
font-kit - A cross-platform font loading library.
RustType - Pure Rust alternative to libraries like FreeType.
Pathfinder - Fast, practical GPU rasterizer for OpenType fonts.
Font toolbox
Parser for OpenType fonts
Parser for PostScript fonts
Parser for TrueType fonts
freetype-rs - Rust bindings for FreeType library.
freetype-sys - Low level bindings for the FreeType font library.
truetype - Library for reading fonts from the TrueType format.

PHP

PHP Font Lib - Library to read, parse, export and make subsets of different types of font files.
JoliTypo - Microtypography fixer for the web.
PHP SmartyPants - SmartyPants is a free web typography prettifyier tool for web writers. It easily translates plain ASCII punctuation characters into "smart" typographic punctuation HTML entities.

Perl

Font::TTFMetrics - Fast & easy-to-use parser for true-type font (TTF) file.

Processing

Fontastic - Processing library to create TrueType font files.

Clojure

opentype.clj - A simple API over OpenType.js for Clojure. Runs on the JVM.

UFO

unifiedfontobject.org

ufo-spec - The official Unified Font Object specification source files.
ufoLib - Low-level UFO reader and writer.
ufoNormalizer - Tool that will normalize the XML and other data inside of a UFO.
ufo2ft - UFO to FontTools.
ufoJS - JavaScript API for the Unified Font Object.

Tools with GUI

Non-Free

Fontself Adobe Illustrator & Photoshop extensions for creating vector and bitmap fonts by Drag&Drop. Make fonts the easy way!
Robofont - UFO based (Mac only).
Glyphs - Font editor (Mac only).
Prototypo - Web based font generator with a parametric approach.
FontLab Studio - Font editor for font professionals. Version 5 for Mac and Windows.
DTL OTMaster - Highly sophisticated application for reviewing, editing and altering tables and contours of fonts with a snft ﬁle structure, as there are CFF and TTF flavored OpenType fonts, TrueType fonts and TrueType Collection fonts.
010 Editor - Professional text and hex editing with Binary Templates technology. OpenType template.
Synalyze It! - Reverse Engineering and Binary File Analysis made easy. OpenType template.
TransType 4 - Universal font converter.

Free

FontForge - Free (libre) font editor for Windows, Mac OS X and GNU+Linux.
TruFont - UFO3 font editor. À l’ancienne.
Metapolator - Web-based GUI for creating UFO and Metafont fonts.
Birdfont - Font editor which can generate fonts in TTF, EOT, SVG and BF format.
Glyphr Studio - Free, web-based font editor, focusing on font design hobbyists.
DTL OTMaster Light - In the Light editions of dtl OTMaster only the saving of files is disabled. Checking fonts and exporting OpenType Layout features ﬁles, be and ik formats, and Character Layout (.cha) ﬁles is possible though.
fonteditor - Web-based TTF font editor, live at fontstore.baidu.com.
FontArk FontArk is an innovative browser-based font editor, font creator (BETA), featuring the most versatile real-time multiple glyph editing system.
TTFEdit - TrueType fonts editor. Allows for editing vector-based glyphs.
OpenType-SVG-Font-Editor.
SdfFontDesigner - A generator of bitmap font, based on ttf & otf, rendered with custom shaders in glsl

Font Validator

Font Validator - Font Validator is a tool for testing fonts prior to release. See Install post for Mac.
OpenType Sanitiser - The OpenType Sanitiser (OTS) parses and serialises OpenType files (OTF, TTF) and WOFF and WOFF2 font files, validating them and sanitising them as it goes.
WOFF Validator - Online WOFF Validator.

Font Testing Websites

Axis-Praxis - Axis-Praxis is a website for playing with OpenType variable fonts in modern browsers.
Bulletproof Font Tester - Test your local or remote fonts with the proofing tool developed by a type designer, for type designers. Check out kerning, OpenType features, and language coverage. Explore and animate variation axes in variable fonts.
Cyreal.org Font Testing Page - The Font Testing Page is a tool primarily intended for type designers to 'Drag and Drop' and quickly test their fonts into a browser (active fork of Impallari's testing page).
Font Gauntlet - The Dinamo Font Gauntlet is a tool for proofing, generating and animating fonts.
Wakamai Fondue - The tool that answers the question “what can my font do?”
TypeNetwork TypeTools - Layout tools for exerimenting with variable fonts in various ways.

Miscellaneous

TypeDrawers - Discussion forum for professionals and enthusiasts in the fields of typeface design, lettering, and typography.
Font Squirrel Webfont Generator - Upload OTF or TTF fonts, receive webfonts.
The State of Web Type - "Can I Use" for typography.
UseModify - Open Source typefaces.
ofont - Web interface for font collections (used by usemodify.com)
Git for Type Designers
designwithfontforge.com - Book about how to design new typefaces with FontForge. See designwithfontforge.com.
FontTesting Page - Webpage for testing typefaces.
CSS Utility OpenType - Simple, CSS utility classes for advanced typographic features. See it here.
Alfred Special Characters - Typefacts Special Characters Workflow for Alfred 3.
Typomanie.fr Ressources
Drawing good paths Tutorial - Badly drawn outlines can cause headache. Your letters may look mangled or not appear at all. You can avoid these difficulties if you keep a few basic rules in mind.
Deep Into OpenType Features - What are OpenType features?
The A-Z of typographic terms - Typography terms in images.
Emoj - Find relevant emoji from text on the command-line 😮 ✨ 🙌 🐴 💥 🙈.
Emoji Wrap Monthly Newsletter - Bite-sized summary of what's happening in the world of emoji and Unicode.
Crypto Puzzles - Functions for encryption and stegonagraphy as puzzles or brain teasers. Online demo.
FDBP - Font Development Best Practice documentation.
UnicodeChecker - Explore and convert Unicode.
unicodes - Browse all of the unicodes.
Method of Action - Method of Action is a collection of tools, games and articles to help you learn design.
Encodings and character sets for Programmers - What every programmer absolutely, positively needs to know about encodings and character sets to work with text.
Kernall - Kerning and letterspacing research.
Type Facet - Collection of Python scripts for working with fonts. See TypeFacet Autokern
OpenType feature reference - Documentation and other info about advanced font features
Typography Supply An inventory of typographic tools.
OpenType Feature Bundle - Syntax highlighting and snippets for OpenType feature development in TextMate/Sublime Text.
Type Tools dotfiles - Setup for type tools.
AGL & AGLFN - AGL / AGLFN (Adobe Glyph List / For New Fonts) simply provides mappings from glyph names to Unicode scalar values. See specification.
The Terrible Secret of OpenType Glyph Substitution
I Can Variable Font - Tips for making variable fonts.
You, Me And The Emoji: Character Sets, Encoding And Emoji
Emoji Rolodex - Resourceful links to emoji-related sites, plug-ins, and apps.
OpenType_Table_Source - Documentation for Monotype's OpenType Layout Source File Format.
jenskutilek/TypoLabs2016 - Code examples from Jens Kutilek's TypoLabs workshop.
W3C - Fonts on the Web - Fonts on the Web.
W3C - WebFonts Working Group
Twitter Emoji (Twemoji) - The Twemoji library offers support for +2k emojis, including skin tone and gender modifiers.
EmojiOne - EmojiOne™ is the open emoji standard.
No @font-face Syntax will ever be Bulletproof, Nor Should It Be
Typography is impossible - The practical guide to why laying out type never quite does what you want.
JavaScript has a Unicode problem - The way JavaScript handles Unicode is… surprising, to say the least.
homebrew-webfonttools - Homebrew formulae for font tools.
Font Falsehoods - Falsehoods programmers believe about fonts.
Letterpress Digest - The new podcast about letterpress.
fontspeed - Newsletter on font loading by @zachleat.
Font-Awesome-SVG-PNG - Font Awesome split to individual SVG and PNG files of different sizes along with Node.js based generator.

Fonts

The Gilbert Font - OpenType-SVG font named after Gilbert Baker, the creator of the rainbow flag.
Nanofont - Nano font for testing font format support (TrueType, WOFF, WOFF2).
FiraSystemFontReplacement - Modified version of the Fira Sans fonts to replace the default system font on Mac OS X 10.10 and 10.11.
SansBullshitSans Font - Every buzzword will be replaced by a Comic Sans-styled censorship bar.
Blackout - One font to blackout them all.
Compyx - 8-bit Multicolor OpenType font.
LapisLegit - OpenType-SVG testfont.
AIFont - The fist Chinese font that generated artificial intelligent.
Noto Fonts - Noto’s goal is to provide a beautiful reading experience for all languages.
Noto Emoji - Color and Black-and-White Noto emoji fonts, and tools for working with them.
EmojiOne COLR/CPAL - EmojiOne font in COLR/CPAL layered format.
EmojiOne OpenType-SVG - Color emoji OpenType-SVG font using EmojiOne Unicode 9.0 emoji with diversity and country flags.
Twitter Color Emoji Font - Color emoji OpenType-SVG font using Twitter Unicode 9.0 emoji with diversity and country flags.
Bixa Color - Building Bixa Color, a color font for the web pixelambacht.nl/2016/building-bixa-color/.
fontwr-fonts - Fonts repository for fontwr.
Bungee - Chromatic signage typeface for vertical and horizontal setting.
Aerial Bold Aerial Bold is the first map and typeface of the earth.
wavefont Typeface for rendering data: waveforms, spectrums, diagrams, bars etc.
Adobe Variable Font Prototype - Variable font example in OpenType-CFF2 & TrueType formats.
Microsoft open source fonts - Central location to share Microsoft's open source fonts.
Reinebow - OpenType-SVG color font.
Freizer - OpenType-SVG color font.
Multicoloure - OpenType-SVG color font based on Multicolore Vector Typeface.
null-ttf - This font is null. It's the smallest possible TrueType binary still valid on OS X and with most of its bytes wiped out.
Monotype Variable Font Demo
CFF opcode test fonts - OTF fonts for testing CFF opcode support.
TestFont - Font family for testing OpenType implementations.
BuffaloGals - Buffalo Gals is one of the very first “Variable Fonts”, originally made in 1992 for an Apple TrueType GX developer CD.
Adobe Fonts / Source Emoji - Source Emoji is an emoji font project that began development in order to provide monochrome representative glyphs to the Unicode Consortium for emoji candidates that have been accepted by the UTC (Unicode Technical Committee) but have not yet been fully ratified to become a part of the official standard.
Hasklig - Code font with monospaced ligatures.
Firefox OS Emojis - Emoji set from Mozilla available as SVGs and TTF font.
Iosevka - Slender typeface for code, from code.
Raleway - Elegant sans-serif, designed in a single thin weight.
Adobe NotDef - Maps 1,111,998 Unicode code points to 2,048 .notdef glyphs.
Adobe Blank - Maps 1,111,998 Unicode code points to 2,048 non-spacing and non-marking glyphs.
Adobe Blank 2 - Based on Adobe Blank, and differs mainly in that the number of glyphs has been reduced to only two, thanks to the Format 13 'cmap' subtable.
Width Test - For testing width-related GSUB features, specifically 'fwid' (Full Widths), 'hwid' (Half Widths), 'twid' (Third Widths), and 'qwid' (Quarter Widths).
Source Han Sans - Set of OpenType/CFF Pan-CJK fonts.
Source Han Serif - Set of OpenType/CFF Pan-CJK fonts.
Open Emoji - Will provide open and free access to visual communications technology, namely emoji, for the entire universe.
Overpass - Open source font family inspired by Highway Gothic.

For more, check awesome-fonts!

TrueType

Truetype font software - List (Big!) with descriptions here.

Books

Fonts & Encodings - From Advanced Typography to Unicode and Everything in Between Google Books Preview.
Unicode Explained - There are hundreds of different encoding systems for mapping characters to numbers, but Unicode promises a single mapping. Google Books Preview.

Videos

Contribute

➡️Pull request! (Or open an issue here).

License

To the extent possible under law, Joël Galeran has waived all copyright and related or neighboring rights to this work.

Awesome UX Design Styleguides

用戶體驗風格指南和設計系統和工具包的精選列表

設計系統 -

指南/樣式指南

by Altinn- 設計系統基於所謂的原子設計方法，而不是設計頁面設計組件，可以在不同的環境中組裝和重用網絡解決方案。
by Ant Financial - 一個具有自然和確定性價值的設計系統，用於更好的企業應用程序用戶體驗。
by Atlassian - Atlassian 產品中使用的 Atlassian 設計指南。
由奧迪 - 基於奧迪外觀的原則：多樣性、誠實和平衡。
由加拿大政府提供 - Aurora 設計系統是由加拿大政府數字合作部為其數字化設計的核心設計指南產品。
by Commonwealth of Australia - 澳大利亞政府設計系統提供了一個框架和一套工具來幫助設計師和開發人員構建政府產品和服務更輕鬆
by auth0 - Cosmos 是一個用於構建 Auth0 產品的設計系統。
by auth0 - auth0 產品中使用的設計模式、組件和資源的結合。
Skyscanner - Backpack 是設計資源、可重用組件和創建 Skyscanner 產品的指南的集合。
Blackboard 的 - 為教育體驗而設計
by Appear Here - Bloom 是 Appear Here 的設計模式和指南的中央存儲庫。
by estonia - 愛沙尼亞設計團隊創建的愛沙尼亞品牌視覺語言
由 Brainly - 此風格指南用於 Brainly 網站的所有語言版本。
由 IBM - Carbon 是 IBM 的開源數字產品和體驗設計系統。
by Rei - REI 數字設計系統演示框架
- 消費者金融保護局的用戶界面框架
by Pusher - Chameleon 是 Pusher 使用的前端模式、變量和助手庫
[] (https://github.com/vmware/clarity) 由 VMWare 提供 - UX 指南、HTML/CSS 框架和 Angular 組件協同工作以創造卓越的體驗
由 Mesosphere - CNVS（發音為“Canvas”）是一個用戶界面元素和組件系統，用於跨 Mesosphere 站點和產品使用
by COOP - 包含樣式和靜態資產的前端工具包，用於構建 Co-op 品牌的數字內容。
by Royal Canin - Design Language 是一個共享設計系統，統一了 Royal Canin 的全球數字風格。
by Duolingo - 的設計語言
Eurostar 的 - Eurostar Web UI 的構建塊。
by Microsoft - 用於構建無縫融入 Office 和 Office 的體驗的官方前端框架365.
by Alfa-Bank - Alfa-Bank 中的設計系統
by MYOB - 前端界面元素的集合，可以在 MYOB 基於瀏覽器的產品中重複使用。
家庭搜索的 - FamilySearch.org 網站的全球風格
by Envato - 基礎設計系統是預定義令牌、用戶界面組件的集合及其使用指南。
by National Instruments - 用於設計和開發 National Instruments 軟件的系統
by BBC - Global Experience Language(GEL) 是 BBC 的共享設計框架。一個可重複使用的交互模式系統，用於組裝 BBC 的整個在線輸出。
by Pinterest - Pinterest 跨產品使用的設計語言
by GOV.UK - GOV.UK 設計系統由政府數字服務維護
[] (https://github.com/grommet/grommet) 由 HP Enterprise - 提供可訪問性、模塊化、響應性和主題的部件設計系統、部件框架 (react)
by Bring & Posten - 可以組裝在一起以構建任意數量的應用程序的設計組件的集合。
由 Help Scout 提供 - 本風格指南是幫助 Help Scout 團隊成員快速行動並獲得一致體驗的一種方式
by HubSpot - HubSpot Canvas 是 HubSpot 用於構建產品的設計系統。
[] (https://github.com/liferay/lexicon-site) 由 Liferay - Lexicon 是一種設計語言，為在 Liferay 產品生態系統中構建接口提供通用框架。
by Salesforce - Salesforce Lightning 設計系統包括創建符合 Salesforce Lightning 原則、設計語言和最佳用戶界面的資源實踐
Mailchimp 的 - Mailchimp 的產品線指南
Marvel 的 - Marvel 產品的 UI 組件、設計模式、品牌資產和代碼指南的實時清單
by Google - Material 是一個適應性強的指南、組件和工具系統，支持用戶界面設計的最佳實踐
- 一個網絡設計系統，可讓您快速構建高質量、可訪問的應用程序。由創建
by MongoDB - MongoDB 設計系統包含構成所有 MongoDB 產品用戶體驗的 UI 構建塊。
by Morningstar - 品牌、視覺、用戶體驗和技術標準的集合，內置於中央庫中，以便團隊可以快速構建高質量、一致的體驗.
by Mozilla - Mozilla 網站的設計系統
by Trello - Nachos 是跨產品使用的 Trello 設計系統
Opower 的 - Opattern 是一個設計系統和風格指南，適用於所有創建 Opower 產品的人。
by Financial Times - Origami 是一組用於幫助構建網站的服務、組件和工具。
by Gitlab - 也稱為 GitLab 的開源設計系統，作為 GitLab 背後的資源、組件和設計指南
FutureLearn 的 - 這是 FutureLearn 設計系統。
by Mozilla Firefox - Firefox 的光子設計系統
[](https ://github.com/wework/plasma) 由 WeWork - Plasma 是 WeWork 用於創建合理、現代界面的設計系統
由 Pluralsight - 用於跨 Pluralsight 產品創建有凝聚力的設計的 UI 構建塊。
由 Pivotal Software - Pivotal UI 是為 Pivotal 品牌設計的 React 組件的集合
[] (https://github.com/Shopify/polaris) 由 Shopify - 實用指南，幫助人們了解如何使用 Polaris 為 Shopify 平台進行設計。
由 GE Digital 提供 - Predix 設計系統是使用現代 Web 組件標準構建的，因此開發人員可以以最小的坡度開始使用我們的構建塊-向上。
by Priceline - Priceline.com 設計系統，為用戶創造始終如一的出色體驗
由 Github - 使用 GitHub 的前端框架 Primer 構建網站的資源、工具和設計指南。
Heroku 的 - Purple 為用戶界面的美學、功能和形式提供了指導，以提供一致的體驗。
Intuit 的 - QuickBooks 設計系統的使命是提供提升 Intuit 品牌的令人愉悅的客戶體驗。
by JetBrains - 這個 UI 組件集合旨在為 JetBrains 內部構建的基於 Web 的產品提供所有必要的構建塊
by Lonely Planet - Rizzo 是lonelyplanet.com 的 UI 層。Rizzo 還為 LP 的頁眉和頁腳、資產和样式指南提供服務。
by Seek - SEEK 的生活方式指南，由 React、webpack、 CSS 模塊和更少
by Instacart -Snacks 是一個基於 JavaScript 和 React 的組件庫。它有一個與 Instacart 風格相匹配的默認主題。
Buzzfeed 的 - Solid 是 BuzzFeed 的 CSS 樣式指南。您可以在中閱讀有關 Solid 的更多信息。
SpareBank1 的 - SpareBank1 跨學科的通用語言，以確保 SpareBank1 解決方案中的設計一致。
by Quicken Loans - Spark Design System 是一個模式和組件系統，用於為 Quicken Loans 金融科技產品系列創建用戶界面
[](https ://github.com/StackExchange/Stacks) by Stack Overflow - Stacks 提供您在整個 Stack Overflow 中快速設計、構建和交付連貫體驗所需的一切
ACL 的 - Starling 設計系統是實現一致性、更好地記錄模式和展望我們未來的一個組成部分。
StudyPortals 的 - 基於 StudyPortal 的設計原則進行設計。
由 Meetup - Meetup 產品設計指南。包括我們設計團隊的流程和原則以及視覺設計
by Hudl - Uniform 是 Hudl 的設計系統。它的存在是為了通過設計和代碼實現來統一 Hudl 的產品。
美國政府 - 美國網頁設計系統幫助聯邦政府建立快速、可訪問、適合移動設備的網站。
by USAJOBS - 描述 USAJOBS、Open Opportunities 和 Agency Talent Portal 的設計語言和可重用組件
[](https uSwitch-uStyle 包含與 uSwitch 核心設計原則相關的文檔和指南
by VTEX - 由 React 組件庫支持的 VTEX 設計系統
by Wonderbly - 基於 Wonderbly 設計原則的設計系統
by Workday - 深入研究 Workday 設計標準、寫作指南和劇本，以創造卓越的企業體驗。
[![Repo Star](https://img.shields.io/github/stars/zendeskgarden/css-components.svg?label=&style=社交）]（https://github.com/zendeskgarden/css-components）由 Zendesk - Garden 是 Zendesk 產品的用戶界面組件。

＃＃資源

＃＃貢獻

歡迎提出建議和 PR！

＃＃執照

Awesome UX Design Styleguides

Curated list of UX styleguides and design systems and toolkits

Design System -

Guidelines/Styleguides

by Altinn- The design system is based on so-called atomic design methodology, where instead of designing pages design components that can be assembled and reused in different web solutions.
by Ant Financial - A design system with values of Nature and Determinacy for better user experience of enterprise applications.
by Atlassian - Atlassian Design Guidelines used across Atlassian products.
by Audi - based on the principles of the Audi look: variety, honesty and balance.
by Government of Canada - Aurora design system is a central design guide created by the Digital Collaboration Division within the Government of Canada for their digital products.
by Commonwealth of Australia - The Australian Government Design System provides a framework and a set of tools to help designers and developers build government products and services more easily
by auth0 - Cosmos is a Design System to build Auth0 products.
by auth0 - Conjunction of design patterns, components and resources used across auth0's products.
by Skyscanner - Backpack is a collection of design resources, reusable components and guidelines for creating Skyscanner products.
by Blackboard - Designs for the educational experience
by Appear Here - Bloom is Appear Here’s central repository for design patterns and guidelines.
by estonia - The visual language of Brand Estonia created by Estonian Design Team
by Brainly - This style guide is being used across all language versions of the Brainly website.
By IBM - Carbon is IBM's open-source design system for digital products and experiences.
by Rei - REI Digital Design System presentation framework
- The Consumer Financial Protection Bureau's user interface framework
by Pusher - Chameleon is a library of front-end patterns, variables, and helpers used by Pusher
by VMWare - UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experiences
by Mesosphere - CNVS (pronounced "Canvas") is a system of user interface elements and components built for use across Mesosphere sites and products
by COOP - A front-end toolkit containing styles and static assets for building Co-op-branded digital content.
by Royal Canin - Design Language is a shared design system that unifies Royal Canin's global digital style.
by Duolingo - Design language by
by Eurostar - Building blocks for Eurostar web UI.
by Microsoft - The official front-end framework for building experiences that fit seamlessly into Office and Office 365.
by Alfa-Bank - Design system in Alfa-Bank
by MYOB - collection of front-end interface elements that can be reused across the MYOB browser-based products.
by Family search - Global styles for the FamilySearch.org website
by Envato - The Foundation Design System is a collection of predefined tokens, user interface components and guidelines for their usage.
by National Instruments - A system for designing and developing National Instruments Software
by BBC - Global Experience Language(GEL) is the BBC’s shared design framework. A system of reusable interaction patterns used to assemble the BBC’s entire online output.
by Pinterest - Pinterest’s design language used across products
by GOV.UK - The GOV.UK Design System is maintained by the Government Digital Service
by HP Enterprise - Part design system, part framework (react) that provides accessibility, modularity, responsiveness, and theming
by Bring & Posten - Collection of design components that can be assembled together to build any number of applications.
by Help Scout - This style guide is a way to empower members of the Help Scout team to move quickly and have consistent experience
by HubSpot - HubSpot Canvas is the design system that HubSpot uses to build products.
by Liferay - Lexicon is a design language that provides a common framework for building interfaces within the Liferay product ecosystem.
by Salesforce - The Salesforce Lightning Design System includes the resources to create user interfaces consistent with the Salesforce Lightning principles, design language, and best practices
by Mailchimp - Guidelines by Mailchimp for their product line
by Marvel - live inventory of UI components, design patterns, brand assets and code guidelines for Marvel products
by Google - Material is an adaptable system of guidelines, components, and tools that support the best practices of user interface design
- A design system for the web that lets you quickly build high-quality, accessible apps. Created by
by MongoDB - The MongoDB Design System contains the UI building blocks that make up the user experience across all MongoDB products.
by Morningstar - A collection of brand, visual, UX, and technical standards built into a central library so that teams can quickly build high-quality, consistent experiences.
by Mozilla - A design system for Mozilla websites
by Trello - Nachos is Trello's design system used across product
by Opower - Opattern is a design system and style guide for everyone who creates Opower products.
by Financial Times - Origami is a group of services, components, and tools used to help build websites.
by Gitlab - Also know as GitLab's open source Design System acts as Resources, components, and design guidelines behind GitLab
by FutureLearn - This is the FutureLearn design system.
by Mozilla Firefox - Firefox’s Photon Design System
by WeWork - Plasma is a design system for creating sensible, modern interfaces by WeWork
by Pluralsight - The UI building blocks for creating a cohesive design across Pluralsight products.
by Pivotal Software - Pivotal UI is a collection of React components that are styled for the Pivotal brand
by Shopify - practical guides to help one understand how to design for the Shopify platform using Polaris.
By GE Digital - The Predix Design System is built using modern web component standards so developers can start using our building blocks with minimal ramp-up.
by Priceline - Priceline.com Design System to create a consistently great experience for users
by Github - Resources, tooling, and design guidelines for building websites with Primer, GitHub's front-end framework.
by Heroku - Purple provides guidelines for the aesthetic, function, and form of user interfaces to provide a consistent experience.
by Intuit - The QuickBooks Design System mission is to deliver delightful customer experiences that elevate Intuit brand.
by JetBrains - This collection of UI components aims to provide all of the necessary building blocks for web-based products built inside JetBrains
by Lonely Planet - Rizzo is the UI layer for lonelyplanet.com. Rizzo also serves LP's header and footer, assets and Style Guide.
by Seek - Living style guide for SEEK, powered by React, webpack, CSS Modules and Less
by Instacart - Snacks is a JavaScript and React based component library. It has a default theme matching Instacart's styles.
by Buzzfeed - Solid is BuzzFeed's CSS style guide. You can read more about Solid in .
by SpareBank1 - SpareBank1's common language across disciplines, to ensure consistent design in SpareBank1 solutions.
by Quicken Loans - Spark Design System is a system of patterns and components used to create the user interface for the Quicken Loans family of Fintech products
by Stack Overflow - Stacks provides everything you need to quickly design, build, and ship coherent experiences across all of Stack Overflow
by ACL - The Starling Design System is an integral part of accomplishing consistency, better documented patterns, and a vision for our future.
by StudyPortals - Design based on StudyPortal's Design priniples.
by Meetup - Guidelines for product design at Meetup. Includes our design team’s processes and principles as well as visual design
by Hudl - Uniform is Hudl’s design system. It exists to unify Hudl’s products through design and code implementation.
by United States government - The U.S. Web Design System helps the federal government build fast, accessible, mobile-friendly websites.
by USAJOBS- Describes the design language and reusable components of USAJOBS, Open Opportunities, and Agency Talent Portal
by uSwitch- uStyle includes documentation and guidelines relating to uSwitch's core design principles
by VTEX - The VTEX Design System backed by React component library
by Wonderbly - Design System based on Wonderbly Design principles
by Workday - Delve into Workday design standards, writing guidelines, and playbook to create exceptional enterprise experiences.
by Zendesk - Garden is where user interface components for Zendesk products.

Resources

Contribution

Suggestions and PRs are welcome!

License

webflow-masterclass

Webflow MasterClass。通過免費影片課程學習網頁設計

用Webflow簡單地建立自定義網站

完整的網站開發過程

通過12個小時的分步影片內容，了解如何從頭到尾建構像素完美的網站。

開始你的Webflow組合

作為課程的一部分，建立一個功能齊全的網站，並獲得Tenten學院專家的個性化回饋。

不需要編碼即可以製作網站 (No-Code)

掌握一個視覺化的開發工具，快速建立令人難以置信的網站，而無需學習如何編碼。

掌握一個視覺化的開發流程，將你最好的創作付諸實踐

學習一個簡化的流程，使用Webflow為客戶建立定製的、完全互動的網站。在本課程結束時，你將能夠。

使用一個強大的視覺化開發工具，快速建立像素完美的網站。
實現令人驚嘆的動畫和互動。
在您的工作中重新獲得創意自由，不受模板的限制。
展示一個以你的第一個Webflow網站為特色的作品集。

課程中你將會學到什麼

第一章

Webflow簡介

歡迎
如何更好地利用本課程和社區
你需要什麼樣的Webflow計劃？

第二章

Webflow基礎知識

Webflow有什麼不同
基本的HTML/CSS概念
基本網站Demo
掌握布局。顯示設置
掌握布局。網格
掌握布局。Flex
解決的Flexbox遊戲
掌握版式設計。位置
布局工具使用的真實案例
使用圖片和背景
如何建構網站
如何有效地設置樣式
使用自定義字體
使網站具有響應性
響應性的挑戰
響應性挑戰--已解決
基本互動
Webflow的本地組件
符號
出錯時的修復

第三章

項目實施一

建立一個真實世界的客戶單頁網站
自定義布局的挑戰
自定義布局的挑戰 - 解決了

第四章

動態網站

了解CMS
使用CMS
高級CMS過濾
導入CMS數據
創建電子商務網站
使用表格並與其他系統整合
內容管理系統的挑戰
內容管理系統的挑戰 - 已解決

第五章

動畫與互動

了解觸發器和動畫
創建彈出式窗口
滑入效果
懸停時的三維旋轉
視差效果
水平滾動部分
小樂蒂動畫
創建一個預載入器

第六章

項目實施 ii

最終挑戰--單頁組合項目

第七章

高級用例

整合一個預訂系統（或任何其他第三方工具）
導出到WordPress或Shopify
雙語言網站
用（複製-粘貼）自定義程式碼創建令人敬畏的效果

第八章

網站開發流程

完整的Webflow網站流程概述
如何正確地導出和導入圖片
使用風格指南工作
隱私和可訪問性的考慮
QA - 測試您的網站
客戶是否應該使用Webflow主機？
啟動前的檢查表。搜索引擎和最終設置
上線

第九章

項目管理

如何向客戶推銷Webflow
當客戶不願意購買時
如何將網站交付給客戶
客戶CMS培訓
Webflow網站的定價
完美的Webflow網站提案
維護Webflow網站

第10章

案例分析--客戶網站

項目計劃
項目設置與字體
創建風格指南
設置內容管理系統和虛擬內容
建立主頁
移動響應
內容管理系統項目頁面
生物收集頁面
公司簡介
體驗頁面
產品頁面
搜索結果頁面
互動
最後設置

第11章

案例研究 - CyberTruck網站

特斯拉Cybertruck網站在100分鐘內完成

第12章

將這一切結合起來

成為一個真正的大師
結論 - 下一步是什麼？

12個月的我們的社區訪問權

加入專業網頁設計師社群，交流與分享提昇彼此的能力!

每周的現場辦公時間

從Tenten Academy的專家那裡獲得個性化的、無障礙的支持和回饋。

建立你的網路

建立聯繫，發現商業機會，並與世界各地的網頁設計師進行合作。

現實生活中的教訓

從現實生活中活躍的專業人士的社區中學習經驗和教訓。從志同道合的設計師那裡獲得回饋、工作機會和技巧。

投資於你的未來

三個月的付款計劃(278美元/月)

分三期付清你的課程費用。你將獲得終身使用權，以及所有未來的更新。

單次付款695美元

預先支付，節省139美元! 享受終身使用該課程和所有未來的更新。
每個課程都包括一個無問題的30天退款保證。

常問問題

為什麼Webflow比其他網站建設程式更好？

Webflow是一個非常強大的視覺開發工具，它允許您創建高度定製的、真正優質的作品--當然，也可以相應地調整您的價格。Webflow還能為您處理網站開發的所有技術重任，因此您可以專注於您最擅長的工作：為您的客戶創造令人驚嘆的高價值作品。

我已經知道如何編碼，為什麼還要學習Webflow？

Webflow提供了一種超快速的網站建設方式--我們所說的是幾個小時，而不是幾天或幾周。如果您是一名設計師，您也會喜歡在Webflow中工作的視覺效果，看到您所建構的網站即時成型。

Webflow是免費的嗎？

Webflow提供了一個免費的計劃，許多學生在學習這個課程時都會使用。然而，對於您未來的客戶項目，我們建議投資於他們的付費層級。

在本課程結束時，我是否能夠為我的客戶建立網站？

是的，你會學到一個逐步的過程，你可以在任何未來的項目中使用。除此之外，在本課程結束時，您將擁有您的第一個Webflow網站，我們的團隊將給您提供個性化的回饋。我們希望您有充分的信心在您的投資組合中展示您的Webflow技能。

我的付款方式有哪些？

您可以分三個月付款，也可以一次性付款，以節省更多費用。我們通過PayPal和Stripe安全地處理所有付款，購買后您將立即收到電子信箱收據。如果你需要一張更詳細的發票作為記錄，請告訴我們，我們將很樂意幫助你。

我可以使用該課程多長時間？

您可以終身使用該課程，並可在12個月內進入 Tenten 社區。不僅如此，今後所有未來的內容更新都可以瀏覽。

我可以使用Webflow建立一個電子商務網站嗎？

可以的。Webflow最酷的地方之一就是它的靈活性。你的工作不受模板內置功能的約束，所以你可以真正創造出你的客戶所需要的東西。在Webflow大師班的第四章中，您將了解到所有關於電子商務和其他動態網站建設的功能。

我需要知道如何編碼嗎？

不需要。這就是使用Webflow這種強大的視覺化開發工具的神奇之處。你不需要知道如何編碼，就可以創建一個像素完美的、高度定製的網站。視覺介面將引導你完成這一切。

Webflow大師班和Webflow大學之間有什麼區別？

Webflow大學有一些很好的教程和快速課程，但並不是要帶你完成作為自由職業者建立和銷售Webflow項目的整個過程--就像我們在Webflow大師班中所做的那樣。不僅如此，大師班是唯一一門讓你建立整個網站，並作為課程的一部分接受個性化的教師回饋的課程。

本課程與《網頁設計》有什麼不同？成為專業人士課程的差異再哪？

MasterClass 課程是關於設計過程的。我們確實涵蓋了你在開發方面的選擇，但不包括實際實施中的細枝末節--這就是 Webflow 大師班的意義所在你將學習到一個循序漸進的過程，使用 Webflow 將你的設計變成功能齊全、像素完美的網站。

webflow-masterclass

Webflow MasterClass。通過免費影片課程學習網頁設計

用Webflow簡單地建立自定義網站

完整的網站開發過程

通過12個小時的分步影片內容，了解如何從頭到尾建構像素完美的網站。

開始你的Webflow組合

作為課程的一部分，建立一個功能齊全的網站，並獲得Tenten學院專家的個性化回饋。

不需要編碼即可以製作網站 (No-Code)

掌握一個視覺化的開發工具，快速建立令人難以置信的網站，而無需學習如何編碼。

掌握一個視覺化的開發流程，將你最好的創作付諸實踐

學習一個簡化的流程，使用Webflow為客戶建立定製的、完全互動的網站。在本課程結束時，你將能夠。

使用一個強大的視覺化開發工具，快速建立像素完美的網站。
實現令人驚嘆的動畫和互動。
在您的工作中重新獲得創意自由，不受模板的限制。
展示一個以你的第一個Webflow網站為特色的作品集。

課程中你將會學到什麼

第一章

Webflow簡介

歡迎
如何更好地利用本課程和社區
你需要什麼樣的Webflow計劃？

第二章

Webflow基礎知識

Webflow有什麼不同
基本的HTML/CSS概念
基本網站Demo
掌握布局。顯示設置
掌握布局。網格
掌握布局。Flex
解決的Flexbox遊戲
掌握版式設計。位置
布局工具使用的真實案例
使用圖片和背景
如何建構網站
如何有效地設置樣式
使用自定義字體
使網站具有響應性
響應性的挑戰
響應性挑戰--已解決
基本互動
Webflow的本地組件
符號
出錯時的修復

第三章

項目實施一

建立一個真實世界的客戶單頁網站
自定義布局的挑戰
自定義布局的挑戰 - 解決了

第四章

動態網站

了解CMS
使用CMS
高級CMS過濾
導入CMS數據
創建電子商務網站
使用表格並與其他系統整合
內容管理系統的挑戰
內容管理系統的挑戰 - 已解決

第五章

動畫與互動

了解觸發器和動畫
創建彈出式窗口
滑入效果
懸停時的三維旋轉
視差效果
水平滾動部分
小樂蒂動畫
創建一個預載入器

第六章

項目實施 ii

最終挑戰--單頁組合項目

第七章

高級用例

整合一個預訂系統（或任何其他第三方工具）
導出到WordPress或Shopify
雙語言網站
用（複製-粘貼）自定義程式碼創建令人敬畏的效果

第八章

網站開發流程

完整的Webflow網站流程概述
如何正確地導出和導入圖片
使用風格指南工作
隱私和可訪問性的考慮
QA - 測試您的網站
客戶是否應該使用Webflow主機？
啟動前的檢查表。搜索引擎和最終設置
上線

第九章

項目管理

如何向客戶推銷Webflow
當客戶不願意購買時
如何將網站交付給客戶
客戶CMS培訓
Webflow網站的定價
完美的Webflow網站提案
維護Webflow網站

第10章

案例分析--客戶網站

項目計劃
項目設置與字體
創建風格指南
設置內容管理系統和虛擬內容
建立主頁
移動響應
內容管理系統項目頁面
生物收集頁面
公司簡介
體驗頁面
產品頁面
搜索結果頁面
互動
最後設置

第11章

案例研究 - CyberTruck網站

特斯拉Cybertruck網站在100分鐘內完成

第12章

將這一切結合起來

成為一個真正的大師
結論 - 下一步是什麼？

12個月的我們的社區訪問權

加入專業網頁設計師社群，交流與分享提昇彼此的能力!

每周的現場辦公時間

從Tenten Academy的專家那裡獲得個性化的、無障礙的支持和回饋。

建立你的網路

建立聯繫，發現商業機會，並與世界各地的網頁設計師進行合作。

現實生活中的教訓

從現實生活中活躍的專業人士的社區中學習經驗和教訓。從志同道合的設計師那裡獲得回饋、工作機會和技巧。

投資於你的未來

三個月的付款計劃(278美元/月)

分三期付清你的課程費用。你將獲得終身使用權，以及所有未來的更新。

單次付款695美元

預先支付，節省139美元! 享受終身使用該課程和所有未來的更新。
每個課程都包括一個無問題的30天退款保證。

常問問題

為什麼Webflow比其他網站建設程式更好？

我已經知道如何編碼，為什麼還要學習Webflow？

Webflow是免費的嗎？

Webflow提供了一個免費的計劃，許多學生在學習這個課程時都會使用。然而，對於您未來的客戶項目，我們建議投資於他們的付費層級。

在本課程結束時，我是否能夠為我的客戶建立網站？

我的付款方式有哪些？

我可以使用該課程多長時間？

您可以終身使用該課程，並可在12個月內進入 Tenten 社區。不僅如此，今後所有未來的內容更新都可以瀏覽。

我可以使用Webflow建立一個電子商務網站嗎？

我需要知道如何編碼嗎？

Webflow大師班和Webflow大學之間有什麼區別？

本課程與《網頁設計》有什麼不同？成為專業人士課程的差異再哪？

Design

Awesome Design Tools

Awesome-UI-Templates

Awesome Figma

視頻

文章

開源插件

模板和 UI 工具包

Rest API 集成

客戶

轉換器

Awesome Figma

Contents

Videos

Articles

Community

Open-Source Plugins

Plugins development

Templates & UI Kits

Rest API integrations

Clients

Converters

awesome-styleguides

awesome-styleguides

風格指南

故事書

資源

視頻

比較器

工具

Webflow + Firebase用戶認證

Awesome Figma

視頻

文章

開源插件

模板和 UI 工具包

Rest API 集成

客戶

轉換器

awesome-styleguides

awesome-styleguides

風格指南

故事書

資源

視頻

比較器

工具

Awesome Figma

Contents

Videos

Articles

Community

Open-Source Plugins

Plugins development

Templates & UI Kits

Rest API integrations

Clients

Converters

awesome-design-systems

標籤

備註

學分

README-en

Categories

UX/UI Resources

Art and design

Auto and Vehicles

Beauty

Books and Reference

Business

Comics

Communications

Dating

Education

Entertainment

Events

Finance

Food and Drink

Health and Fitness

House and Home