Adobe XD插件综述:使用真实内容和数据进行设计

忘掉lorem ipsum吧。没有什么能比得过使用真实的内容和数据来发现设计上的缺陷以及创建优雅和流畅的设计,比如名称,照片,模拟文本等。特别是在先锋企业和品牌上使用数据驱动的体验来适应客户不断变化的偏好的时代,情况更是如此。数据驱动的设计过程对于把事情搞好至关重要。

使用真实数据还可以让你更接近最终产品,这样你就可以更好地将设计传达给团队成员,客户和他们的用户,以获得反馈和批准。但是,将这些数据应用到你的设计中可能既困难又耗时。

幸运的是,Adobe XD开发人员社区已经创建了许多插件来帮助实现该过程。这些插件允许你添加占位符,并使用来自第三方服务,电子表格,数据库和JSON或实时API的内容快速填充你的设计。下面将介绍5款我们认为值得推荐的插件。

Aleksandar Tasevski开发的UI Faces插件

UI Faces可自动生成头像并将其应用于选定的形状中。你可以筛选头像来源,选择年龄,性别,表情和头发颜色。UI Faces的数据来源于包括Unsplash,Pexels,RandomUser,TinyFaces,IMDB等在内的许多网站的接口,因此你应该能够轻易找到你想要的内容。

Paolo Biagini开发的Calendar插件

使用Calendar插件,你可以使用任何语言生成简单格式化的月度日历,你只需点击几下设置即可根据需要进行自定义。你无需再手动查找月份和日期; 只需选择单元格宽度以及希望如何显示日期的方式即可。

Impekable开发的Google Sheets插件

Impekable开发的Google Sheets插件,通过Google Sheets中的真实内容和数据来帮助填充你的设计,以便轻松地与团队协作。使用该插件,任何人都可以在Google Sheets中输入数据,然后设计人员可以在XD设计中动态更新此内容,而无需手动编辑无数文本字段。

当你需要进行文本更改或创建具有不同内容的设计的多个版本时,此工作流程可帮你提高效率。该插件的设计考虑了Adobe XD的重复网格(Repeat Grid)功能,因此你可以轻松地从Google Sheets中导入动态数据并根据需要进行刷新。它不仅适用于对象组,还适用于使用重复网格(Repeat Grid)制作的任何重复元素。

Adobe XD开发的Airtable插件

使用Airtable插件,你可以使用真实的图像进行迭代设计并从你创建的Airtable Base进行复制。通过在Airtable中生成和迭代创意,然后在Adobe XD中查看它们,能够更有效地与团队和利益相关者进行协作。

例如,看看下面的设计,当本季的家具产品分类发生变化时,新设计可以直接在XD设计的移动应用界面中更新。当你的产品页面文本从15个单词复制到55个时,你可以快速调整XD中的页面布局以确保所有设计元素能够正常显示。

Precious开发的Data Populator插件

Data Populator是一个用实际内容填充设计模型的插件。例如,可以用于从多个数据源手动收集到的联系人或登机牌信息,生成连贯且有意义的JSON数据集,或者来自实际API的真实数据用于实时产品数据更新。你需要做的就是将文本或图像的占位符添加到设计模型中。使用相应的密钥准备JSON数据,本地JSON文件或你最喜欢的实时API,最终,使用数据填充占位符使你的设计模型真实有意义。

正如你所看到的,使用Adobe XD可以轻松地使用真实内容和数据进行设计。如果你已经安装了XD,请转到Add-ons屏幕并选择Plugins菜单,进行检索安装。当然,你也可以单击以下链接直接获取插件: UI Faces, Calendar, Google Sheets, Airtable, 以及 Data Populator.

(编译完)