2020年第一波实用设计工具合集

编者按：是 Prototypr.io 在2020年出的一套设计工具合集，其中所涵盖的设计工具和素材类型涵盖个不同的领域，用没得说。

这 2020 的第一波实用的设计干货合集！次的合集当中包含26 款有趣且用的设计工具和素材。工具很地反应出当下的设计趋势——它们泾渭分明地分为「用代码做设计」和「完无需代码做设计」两种趋势。下面我们具看一下吧：

? 配色和字体

1. Gradienta →

为你的设计项目供超过150种 CSS 色彩渐变，Gradienta 是一款开源工具，它供了 JPG、PNG、SVG 等格式的可载素材，并且根据需求择尺寸。此外，这款工具是全符合 MIT 许可的。

2. Cover Colors →

这是一套基于音专辑封面来生成配色方案的工，这你就不会因为无休止的配色选择而不知所措了。

3. Leonardo →

这一款源配色器，它会基于对不对需求配色方案。只需选择好配色对比度，然后复制结果，就能自己的设当中使用了！

4. Litur →

款 iOS 工具让你以随时随地搜集周围的，它根据你的选择的彩，提供不同的组合。此外，它还有创建完整的方案，让你在设计的时直接用上。

5. Fonts Ninja →

Fonts Ninja 可以在你浏览体时候，快速识它，这样便你在设计使用。

6. Handy Font →

这是 5 款手写英字体的合集，Handy Fonts 供同格式的件供你使，包括 OTF 和 WOFF。每款字体都包含有 300 个同的字形和符号，全的标点符号和西字体的支持。

✍️ 平面设计

1. Vectornator Pro for Mac →

Mac版的 Vectornator 一款设具，其中包含一组强的矢具，并且可以速启动，并且可以实时协作。

? 无代码工具

1. Bravo Studio →

Bravo Studio 是款需代码移动端 APP 构工具，它能够将 Figma 原型转换成为 iOS 和 Android 应用，全过程需代码。

2. Appratio →

Appratio 是一款无代码应构建工具，使托拽控件快速成布和功，然后创建 iOS、Android 和 Web 应。这款工具可灵快速地自定义应中的任何容。

3. Slides 5 →

Slides 5 是一款静网站构建工，这款工带有不同的模块和模板，你可以为的项目进行定义计。

4. Fronty →

Fronty 一款基于 AI 的图片转 HTML 转换器，这款具可以与 HTMl  CSS 一起使用，因此可以将图片轻松变真实的网站，无需编写码的能力。

? 原型和线框图工具

1. Figma Auto Layout →

Figma 在倾听用户需求并随不断发展，如今添加了自动布局功能，这意味着按钮可以根据文本大小进调，移动某个控件时候，布局会随自动调，嵌套元素会随着内容进自动调。

2. Figma Mobile Upload →

在进行了头脑暴和集体讨论之后，这款工具就可充当草图和数字设计之间的桥梁，你需要做的是将你拍摄的照片借助这个工具，放到 Figma 件当中。它是团队协作的利器。

3. Third →

Third 是一款插件，让你可以在 Figma 当中导入、添加光源、渲染。它能够进行高辨率的渲染，支持多种不同的 3D 对象和模型。

4. Wireframer →

可以使用这款具提升线框图中的文本。Wireframer 包含独特的可制的 SVG 元素，可以根据项目调整其中的样式。

5. Pixelworm →

为确你的设计能够正确地落地，Pixelworm 是为移动端的设计和开所准备的，它能够检查代码是否和 Sketch 文件相匹。

⚛️ 代码工具

1. React Cosmos 5 →

你可使 React Cosmos 5 来构建可扩展的 UI。借助这款工具，你可轻松地测试和迭代 React 组件，轻松调试代码，创建和发布组件库。

2. Looop.dev →

使用 Looop.dev 可以制作 Canvas/WebGL 动画型！这是一个基于 Web 的创编码工，并且已经拥有一堆可供学习和使用的资源。

3. Zecoda →

Zecode 可以立即将的 Sketch 项目转化 Vue.JS ，这意可以将的设迅速变化响应迅速的网站。

4. Uplaunch →

Uplaunch 是一系列「Coming soon」页面的几何，套库里面包含与 Mailchimp 和 Zapier 集成的 HTML5/CSS3/JS模板，除此之外 Uplaunch 还附带 Sketch、Figma 和 PSD响应的源文件。

5. ApiFlash →

使用 ApiFlash，你可以从网址接捕获个页和移动端界截图！这个 API 可以让你控制界大小、比例、CSS 和 JS 注入等。

⚡ 产品和项目管理

1. Product Management Tactics Vol. 3 →

这是关于产品管理和策略的免费书。这一卷当中包含了 Basecamp、Superhuman、Walmart 等公产品负责人对于不同主题的见解。除此之外，剩下的内容是针对 2019 年产品会议中和行业相关的顶演讲。

2. Sizle →

Sizle 提供了一种的方式构建出色的演示文稿，它包括专业的模板，平滑效果分析具。此外，它还具极简的用户界面，易于浏览。Sizle 的链接踪功能高 FPS 动画可以确保演示过程中的顺畅引人入胜。

3. Pizdata App →

Pizdata 是一款 web 应用，能够帮你更快完成设计任务。款工具非常适合初创企业使用。

4. Gantt →

这款工具能够以精美来呈现项目时表，Gantt.io 含有各不模板，观高效界，多用户编辑功能以及高分辨率导出功能。

?️ 彩蛋

1. TiltMaps v2 →

这款有趣的工能够让你由地创建地球上任何地方的地图海报！只需要输出位置名称即可！