提升设计水平的四种方法
2023 年 11 月 3 日

在本文中,我们将介绍一些将动态内容引入设计的有用技巧-包括变体、社区插件和自定义插件。我们还将剖析每种方法的权衡,并思考在使用这些技术时要考虑什么。

让我们开始吧!⭐️

1. 组件变体 #

这可能是将动态内容引入设计的最明显和最不明显的解决方案。通过利用 Figma 的变体系统 (opens new window),您可以轻松地为组件添加内容状态,以适应最佳和次优的用例。

在下面的示例中,您可以看到每个组件都有不同的变体,用于不同的内容状态。这里的目标是尽可能覆盖多种用例-短、长、好、坏。正如您所看到的,我找到了一个设计出现问题的情况 😬!

使用变体来填充动态内容是一种常见的方法,但它并不总是适用于所有情况。下面我们将讨论其他方法。

2. 社区插件 #

Figma 社区中有许多插件可用于在设计中添加动态内容。这些插件可以帮助您快速生成文本、图像、数据等动态元素。您可以在 Figma 社区插件页面 (opens new window)上浏览并安装这些插件。

在使用社区插件时,需要注意它们的可靠性和安全性。确保选择受信任的插件,并在使用前阅读相关文档和评论。

3. 自定义插件 #

如果您无法找到合适的社区插件,或者您需要更高度定制的功能,您可以考虑开发自己的 Figma 插件。Figma 提供了一套强大的 API,使您能够创建自己的插件,并与设计工具进行集成。

开发自定义插件需要一定的编程知识和技能,但它为您提供了更大的灵活性和控制权。您可以根据自己的需求开发特定的功能和工作流程。

总结 #

在设计中引入动态内容可以为您节省时间并提高效率。通过使用变体、社区插件或自定义插件,您可以轻松地将动态元素添加到设计中。选择适合您需求的方法,并根据实际情况进行调整。

希望这些技巧对您有所帮助! ## 优点

  • 可以轻松定义你想在设计中看到的内容类型,包括最糟糕的情况。
  • 不依赖可能难以让团队采用的插件。
  • 使用你的设计库的所有人都可以即时访问这些内容和更新。

缺点 #

  • 需要大量的初始工作和繁琐的维护工作。
  • 需要创建一个组件和文本样式,这在实践中可能会有些麻烦。

2. 内容展示 #

内容展示 (opens new window)是由Microsoft开发的Figma插件,它可以非常轻松地为你的设计添加逼真的文本、图标和图片。虽然你可以轻松添加自己的文本片段和图片,但你也可以利用社区中的内容。

下面是使用内容展示为移动社交分享设计添加内容的示例,同时利用了社区内容和我的内容。 ## 优点

  • 社区提供了多样化的内容和使用案例,非常真实。
  • 使用起来只需小量的前期工作和很少的技术知识。
  • 轻松切换内容,方便对设计进行压力测试。

缺点 #

  • 不能在图层组中填充内容,需要逐个选择要更新的文本字段或形状。
  • 内容组织是平面的,使得更难组织和应用相关的内容组到设计中。
  • 添加和管理可能需要手动操作,很容易让内容过时。

3. Google Sheets 同步 #

Google Sheets 同步 (opens new window)通过提供更强大的内容存储和从存储在 Google Sheets 中的分组内容填充设计的功能,改善了 Content Reel 的不足。

以下是我们可以为设计设置表格的示例:

Medium stories loaded int 在设计中,此插件通过将Google表中的列名映射到图层名称来工作。你只需要在图层前面加上#和列名,就可以了!

将Google表与设计同步。不要眨眼。

优点 #

  • 可以从井然有序和结构化的数据集中填充设计。
  • 无论嵌套多深,都可以更新图层中的内容。您不再需要选择特定的文本字段进行更新 - 您可以一键更新整个设计!
  • Google表的互操作性使其成为一个非常多功能的选项。您可以手动填充电子表格,或者设置一个系统来使用SQL或Google表单进行填充🔥。
  • 管理和维护大量内容的工作量很低。

缺点 #

  • 如果不定期更新,数据可能失去同步并变得陈旧。
  • 对于不熟悉插件设置和数据存储方式的设计师来说,插件的用户体验可能会令人困惑。 ## 4. 构建自己的Figma插件

构建自己的Figma插件来为设计中的动态内容填充是最能提供强大和灵活性的方法,但也是投入最大的路径。如果您可以访问产品的API(无论是公开的还是私有的),并具有一些编程知识(或者有朋友可以帮助💪),那么这种方法可能适合您。

Medium由可以来自世界任何地方的故事组成。正因为如此,故事的内容、长度和质量会有很大的差异。我们内部的Figma插件通过轻松导入任何已发布的故事到我们的设计中,直面了这个问题。

我们的插件可以根据URL或从随机的故事库中获取特定的故事。随机功能非常适合允许设计师快速导入各种内容而不需要太多工作。

Figma插件的示例

优点 #

  • 源内容永远不会过时。 优势:
  • 强大且灵活。能够编码某些渲染行为,否则是不可能的,例如截断、根据数据注入组件等。
  • 可扩展性。能够根据您和您的团队的需求随时间发展,而无需依赖第三方插件或依赖项。

缺点:

  • 如果没有编码知识或资源,可能难以构建、更新或维护。
  • 根据工具的使用方式和使用内容,您的投资回报可能较低。

注:本文已删除了第一级标题,并删除了其中的图片链接。同时,尽可能删除了Markdown格式错误和一些无用的段落,以使整篇文章读起来更加自然。