跳到主要内容

5个工具,弥合设计 - 开发差距

Web和应用程序设计中一个古老的问题是如何弥合设计和开发团队之间的差距。虽然沟通提供了可能是弥合这一差距的最有效手段,但某些工具可以提供有效的代理。

这些工具通过在数字设计和开发之间创建共享语言来实现这一目标,提供任何一方可以在各自的专业领域内理解和使用的输出。

01.综合设计模式库

Shopify’s Polaris has set a new bar for style guides

Shopify的Polaris为风格指南设置了一个新的栏

模式库提供的优势,如Shopify Polaris有时被忽视的是,它们为我们提供了效率。有了强大的模式库,您不必花费太多时间来讨论这个模态应该是什么样的,甚至是模态是否是解决此问题的正确解决方案。

对于许多问题,您所要做的就是查看图书馆和bam!有适合工作的正确工具,随时可用 - 并以设计师和开发人员都可以立即理解和使用的方式呈现。如果您坚持使用库,则不需要重新划分基本内容,例如间距和类型大小,让您专注于更突出的细节,例如“此链接在何处?”

当然,新模式不可避免地会出现。对于那些,您需要与开发人员和设计系统团队(或您公司所称的任何组合)密切合作,以开发规范和代码。

02. 一个Webflow

Life can get pretty meta at Webflow

生活可以在Webflow上得到很好的元素

与开发者沟通的最佳方式之一是给他们一些由代码组成的东西 - 一个完全交互的对象,带有可点击的按钮,可填写的表格和可随浏览器宽度缩放的页面。这样,您可以向人们展示,而不是描述互动。

Webflow允许设计人员创建生产就绪HTMLCSS,和JavaScript的通过完全可视化的界面。即使开发人员不想使用其代码 - 由于内部框架通常也是如此 - 它仍然为他们提供了高保真的设计指南,而无需创建红线。

在Webflow博客上关于Intuit的设计师如何使用Webflow的采访中,高级视觉设计师Nathan Bailey说:“Webflow强迫你为任何元素创建CSS。它创建了这个间距并立即将其级联。所以这就是这个强迫规则的大多数设计产品没有。“如果一点点强制执行的设计规则听起来不错,请查看。

03. FIGMA

Figma 2.0 has really broadened its offering

Figma 2.0确实扩大了它的产品范围

自推出以来,Figma一直是设计协作领域的坚实力量,但凭借Figma 2.0,它确实拓宽了其产品范围。现在,设计人员不仅可以在Figma中创建功能原型,还可以将他们的工作交给开发人员,他们可以在“代码模式”下访问设计,为他们提供所需的所有样式信息,而无需等待规范文档。

04. Zeplin

Just reviewing artboards in Zeplin can give you a whole different perspective on the process

只需查看Zeplin中的画板,就可以为您提供完整的视角

Zeplin非常擅长促进设计师与开发人员之间的合作,可能是因为它是专门为此而设计的。在桌面和Web应用程序之间工作,设计人员可以将画板导出到Zeplin。这会自动为您的设计文件创建一种“开发友好”的视图,捕获CSS样式,字体,颜色,切片 - 简而言之,开发人员需要开发一大堆将您的设计变为现实。

InVision用它的新产品创造了一个非常相似的产品检查,还有一个名为Sketch的插件测量这也可能对你有所帮助。

05. 成帧器

Framer embraces text editor-inspired UIs

Framer拥有受文本编辑器启发的UI

另一个旨在将设计与代码无缝结合的工具 - 从而有助于弥合设计与开发之间的差距 - 是Framer。

与Webflow非常相似,它融合了设计和代码,尽管Webflow主要面向寻求不同编码方式的设计人员,但Framer采用了文本编辑器启发的UI。因此,如果你是(哼)独角兽类型,或者你正在追逐那个全栈设计师品牌,那么Framer可能只适合你。

相关文章:



翻译字数超限