协同工程与设计工具 | CSS-Tricks

在任何大型公司工作，最大的障碍总是**规模**问题。无论是工程、设计还是它们如何协同工作，沟通都是企业成功的关键。以下是一些我在大型团队协作中发现非常有帮助的工具。在众多工程师和设计师（更不用说像我这样的混合型人才）参与的情况下，无缝协作并长时间专注于共同目标可能具有挑战性。以下是一些我亲眼见证过的，能够确保紧密和无缝协作与沟通的工具。

Zeplin

在大型公司中，设计师最耗时的任务之一不是构思或设计，而是生成规范。无论您是为 Web、Android 还是 iOS 设计，Zeplin 都极大地提高了生产力。您可以导入您的 Sketch 文档，Zeplin 甚至会导出代码片段。您可以直接从屏幕导出资源，并在必要时以多种像素密度导出。如果您愿意，甚至还可以与 Slack 集成。

我听说一些设计师说，因为此工具会导出包含调色板的样式指南的指南页面，所以他们被迫更加严格地遵循其组件库的颜色选择——如果他们稍有偏离，就会变得非常明显。在一个一致性至上的世界里，这对跨团队协作来说是天赐之物。它节省了每个项目的大量时间，因为设计师不再需要为每个设计都指定所有填充、字体粗细和间距。

CodePen

在快速获取灵感方面，像CodePen和Dribbble这样的网站以其激发创意的能力而闻名。设计师和开发人员花大量时间在这些网站上通过代码和像素来表达自己。但我发现 CodePen 是一个在专业环境中进行协作的绝佳场所。以下是如何以及为何我在大型团队中使用它的细分。

1) **它对于调试很有用**。与数百名其他开发人员一起处理大型代码库，可以成为一段奇妙的学习经历，部分原因是通过代码审查提高了代码质量，但也因为您面临的挑战。您不仅仅是在编写代码，您还在编写其他人可以阅读的代码。

作为一名开发人员，能够在一个数百万用户会看到的庞大代码库上工作，这是一件令人兴奋的事情。但另一方面，您经常必须在这些大型团队中快速行动，并且有很多活动部件。因此，能够单独查看一部分前端代码成为了一个强大的调试工具。

动画胜过千言万语。
– Rachel Nabors

2) **原型设计是 CodePen 证明其重要性的另一个原因**。我曾与一些团队合作，他们经常展示交互构思，并且我们必须非常快速地生成可能被丢弃的代码。CodePen 通过其私有笔和私有合集帮助我们为沟通目的创建快速工作。我通常会截取我正在处理的页面的屏幕截图，以免构建整个页面，并且绝对只定位我需要演示的交互部分，并将其放置在页面的顶部。不可避免地，经过一些迭代后，我将为我的产品经理提供几个不同的版本供他们浏览，因此我将创建一个私有合集。

私有合集允许我将我的同事可以一目了然地浏览和使用的新工作的多个版本组合在一起。它也成为其他希望分叉我的笔并将其用作模板的设计师/开发人员的资源，以便他们拥有已编译的站点范围内的样式表和 JS 文件。

3) **CodePen 拥有一个活跃的社区，他们致力于解决常见问题**。我们很多人使用 CodePen 的原因与我们使用 Stack Overflow 的原因相同：如果我们遇到问题，其他人可能也遇到过。有大量的笔可以反向工程以更好地理解一种技术，甚至还有组织良好的设计模式来解决一些常见的用例。如今，如果您不依靠社区来帮助您学习，那么您就是在做不必要的工作。

Quip

Quip 是一款由我以前的一位同事兼工程主管 Joe Tuson 向我推荐的工具。我使用 Quip 来共享协作文档，甚至用于组织大型项目，例如高级别地设计系统。它比维基更容易上手，维基看起来更正式，并且倾向于只写一次，然后传达出去，就不再修改了。Quip 通过其易于使用的 GUI 和查看更改通知的功能（包括更改时间）来鼓励协作。我处理的大部分内容都是专有的，因此我在下面创建了一个虚构的示例文档，以便您了解其工作原理。

我特别喜欢的是，即使在侧边栏的通知中，您也可以看到谁查看了更改，这使您可以掌握有多少人了解了文档内容。

我们都希望产品→设计→工程→QA 的瀑布式工作流程能够以整洁的线性方式进行。不幸的是（或者也许是幸运地），这种工作流程不允许快速迭代。Jira 或 Github 中正在进行的项目的工单和模型流可能会变得有点混乱。Quip 通过允许模型与我们的待办事项列表位于同一位置，从而对快速的设计和产品更改变得非常有帮助。它易于维护，因为它易于更新、评论，并且删除也很简单。

他们有浏览器版本和桌面应用程序，因此自定义您的通知偏好非常简单。快速共享项目的实时文档非常宝贵。

Lingo

大多数大型公司使用 Dropbox 等存储空间来存放设计文档，但如果您只需要一个图标怎么办？The Noun Project 拥有一个应用程序，允许您无缝浏览大量视觉信息并按项目分组。如果您有共享的产品插图（例如用于视觉品牌的一致性通用 SVG），此工具非常棒。

它们支持许多不同的文件格式，如果您打开了应用程序并正在截取屏幕截图，则会收到一条通知，允许您一键导入屏幕截图。这对于协作处理设计的一些不同版本以及一目了然地传达所有版本非常棒。就我个人而言，我会制作产品模型的几个不同版本，并为每个版本截取屏幕截图，并在导入 Lingo 时将其导入。然后，我可以将每个审查过程分开，甚至可以轻松地将它们全部呈现给设计审查。

我发现此工具在处理图标方面特别有用。在大型团队中查找正确的图标并使组件库和精灵表保持最新可能非常繁琐。Lingo 使查找、组织和使您的图标系统保持最新变得非常简单。

Elegantt

大多数人都知道 Trello 泳道简单易用的好处，但我最喜欢的是它的插件功能，称为 Elegantt。这是一个甘特图功能，允许您绘制您将要开展的工作以及时间安排。作为一名不断平衡许多不同类型项目的人，我发现这很有用，因为您可以直观地了解自己是否承担了过多的工作，从而最大限度地提高生产力或设定适当的界限。

无论您是设计师、工程师还是两者兼而有之，与其他团队或跨团队的协作都与实际工作同等重要。这些是我在大型系统上尝试、测试和喜欢的工具。如果您也有一些适合您的工具，请随时在评论中添加更多内容。我们分享得越多，我们一起工作得越好。