无需编写代码即可快速创建真正的 Angular 原型。

设计师投入大量时间为其产品设计组件和功能，但设计师的愿景与开发人员的现实之间通常仍然存在差距。

“作家可以写一本书。音乐家可以创作歌曲，动画师可以创作短片，画家可以创作绘画。但大多数充满活力的艺术家都无法实现自己的创作，这让我心碎。” —动态图片中的布雷特·维克多

我们希望尽快改变这一点

我们是 Google 的一个用户体验工程师团队，正在与 Angular 合作开发他们的产品Angular 设计师计划。虽然距离公开发布还有几个月的时间，但我们已经开始构建一个所见即所得的原型设计工具，允许设计人员使用 Angular 组件创建真实的、数据驱动的原型。

许多文章都讨论了当前设计工具缺乏真实数据的反应迟钝的本质；设计师无法在感觉像是他们的最终产品的媒介中工作。相反，设计师仅限于创建静态模型，这些模型不能很好地传达体验，并且如果他们想要构建更具交互性的原型，通常只能依靠自己。

设计师已经准备好采用动态的、数据驱动的工作方式，并且网络能够提供他们想要的工具。我们使用的工具塑造了我们的想法并定义了可能性的极限。改变工具，改变我们的思维。

共同建设。按比例构建。

我们希望团队能够在设计和开发之间进行更有效的沟通。由于设计人员和开发人员使用不同的媒介（模型与代码），沟通不会自然发生。然而，在设计人员能够使用与开发人员相同的组件来组装页面的世界中，他们现在可以使用相同的语言。

公司已投资于其设计系统的组件化（考虑材料或清晰度），现在有大量可用的组件。让设计人员可以访问所有这些组件将使他们能够与开发人员从单一事实来源进行工作。随着产品或公司规模的扩大，这将极大地帮助提高一致性和质量。

原型设计工具生命中的一天

想象一下，设计师 Dan 有一个原型，他在 50 个不同的屏幕上使用了一个表格组件。在获得用户对设计的反馈后，Dan 决定允许用户选择隐藏表中的列。 Dan 与工程师 Emma 进行了交谈，她能够将隐藏列功能添加到组件中。 Emma 推送更新后，Dan 打开他的项目，发现新功能正在他所有 50 个屏幕的表格组件中运行！

Dan 完成设计后，他向利益相关者 Stacey 发送了一个链接。她打开原型预览并单击工作流程的每个阶段。由于原型是用真实的组件和真实的数据构建的，她能够很好地了解最终的结果，并给予热烈的认可。 Emma 打开 Dan 的项目，并能够为原型中的每个页面导出 Angular 模板，以便快速启动所需的前端工作。

让我们一起让它变得更好。

我们还没有准备好分享该工具，但我们很乐意收集您对这个想法有用性的想法。如果您有几分钟的时间，请填写此调查问卷，以便我们对其进行改进。

加入我们不断壮大的团队！

这只是一个开始，我们的团队正在快速成长！我们正在招聘才华横溢的工程师，以对设计系统创建者和用户的生活产生重大影响。如果您正在寻找挑战并希望帮助我们实现这一目标，我们很乐意与您交谈！加入我们的团队！

—蒂姆·索耶和布莱尔·梅特卡夫

文章来源地址：https://blog.angular.dev/moving-design-beyond-pictures-1509c315f94e