goabstract/Awesome-Design-Tools · 上手攻略
- 仓库：goabstract/Awesome-Design-Tools
- 链接：https://github.com/goabstract/Awesome-Design-Tools
- 分类：skill · 设计工具清单
- 作者：Tom
- 更新：2026-07-14
是什么
goabstract/Awesome-Design-Tools 是一个设计工具精选列表，由 LisaDziuba 团队维护，2015 年启动，后随 Flawless App 团队加入 Abstract。目前 GitHub 星标数超过 40k，是设计师和产品团队查找工具资源的行业标杆参考。
它不是一款软件，而是一个持续更新的精选目录——收录了来自 Sketch、Figma、Adobe 全家桶到各类插件、小众工具，覆盖设计全流程的各个阶段。类别涵盖 UI 设计、原型、配色、字体、图标、协作、无代码、3D 等 40+ 细分方向。
解决什么问题
- 找工具困难：设计师和开发者在做某个具体任务（如"找个免费的图标工具"）时，往往不知道有哪些选项，这个列表提供了完整的选项清单。
- 选型困难：列表按类别组织，每个工具标注了是否免费、是否开源、是否仅 Mac，帮助快速筛选。
- 保持信息新鲜：大多数精选列表发完就死，这个仓库持续更新，每周都有新工具 PR 合并进来。
快速上手
这是一个纯阅读型仓库，没有可运行的代码，直接访问 GitHub 页面浏览即可：
- 主列表：https://github.com/goabstract/Awesome-Design-Tools
- 设计插件专版：https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-Plugins.md
- 设计会议专版：https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-Conferences.md
- UI Kits 专版：https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-UI-Kits.md
核心分类速览
| 分类 | 代表工具 |
|---|---|
| Accessibility Tools | axe, WAVE, Accessibility Insights |
| Animation Tools | Principle, Framer, Rive |
| Collaboration Tools | Slack, Notion, Miro, Figma |
| Color Picker Tools | Coolors, Color Hunt, Khroma |
| Design Handoff Tools | Zeplin, Avocode, Inspect |
| Design System Tools | Figma, Storybook, Design Tokens |
| Design to Code Tools | Figma to Code, Anima, Locofy |
| Icons Tools | Font Awesome, Heroicons, Phosphor |
| Mockup Tools | Smart Mockups, Placeit, Mockup World |
| No Code Tools | Webflow, Bubble, Framer |
| Prototyping Tools | Figma, InVision, Axure |
| UI Design Tools | Figma, Sketch, Adobe XD |
| Wireframing Tools | Balsamiq, Excalidraw, Wireframe.cc |
核心用法
作为设计师：按需查找
- 打开仓库 README，找到 Table of Contents
- 点击分类标题直接跳转
- 每个工具名即为链接，点进去就是官网
作为开发者：评估设计工具链
# 典型现代设计工具链推荐（基于列表精选）
UI 设计：Figma（或 Sketch）
原型：Figma 原型模式 / Principle
设计系统：Figma + Storybook
配色：Coolors / Color Hunt
图标：Heroicons / Phosphor Icons
设计交接：Figma DevMode / Anima
协作文档：Notion
思维导图/白板：Excalidraw / Miro
字体：Google Fonts / Fontpair
作为 PM：了解协作工具全景
- 任务管理：Asana、Jira、Trello、Notion
- 设计评审：Figma 评论、Filestage、ZipBoard（视觉标注 bug）
- 版本控制：Abstract（Sketch 文件版本控制）、Figma 原生版本历史
- 视频会议 + 协作：Jitsi（开源）、Miro、MURAL
典型适用场景
- 新项目启动：需要为团队选设计工具，参考列表中的主流选项做决策。
- 解决特定痛点：例如"我想找个免费的开源图标库"，直接进 Icons 分类即可。
- 工具迁移：从 Sketch 迁到 Figma 之前，了解两个生态的插件差异。
- 设计流程梳理：了解完整设计流程（调研→线框图→高保真→原型→交接）中每个环节有哪些工具。
- 保持知识更新：定期浏览新上榜工具，了解设计工具行业的最新动态。
坑与注意
| 坑 | 说明 |
|---|---|
| 工具可能已停更 | 列表中部分工具（如 Principle 已于 2024 年停服）需要注意核实当前状态。 |
| 仅 Mac 标注：部分工具有 Mac only 标签，Windows 用户在选择前需注意。 | |
| 免费/付费变化：Adobe 收购和订阅制改革导致很多工具的定价模式发生变化，以官网为准。 | |
| 插件 vs 独立工具：Awesome Design Plugins 是另一个独立文件，插件类工具需去对应文件查找。 | |
| 中文资料匮乏：部分小众工具没有中文文档。 | |
非可执行项目：这是文档型仓库，没有 npm install 可跑，不需要任何代码环境。 |
与同类对比
| 项目 | 规模 | 维护状态 | 特点 |
|---|---|---|---|
| Awesome-Design-Tools | 40k ⭐ | 活跃（持续更新） | 最全，以工具清单为主 |
| Design Tools (designbounds.com) | — | 活跃 | 有 UI 界面，网站形式浏览 |
| Futuress Tools | 较小 | 一般 | 偏独立/边缘工具 |
| SaaS 导航站 | — | 常过期 | 工具站点良莠不齐 |
一句话推荐结论
设计师和产品团队人手一份的设计工具百科全书，无论你是要选型、找替代工具还是了解行业动态，这个 40k+ stars 的精选列表都是最值得收藏的起点——但使用时记得核实工具当前的运营状态，避免引用已停服的产品。