AI帮你实现Figma插件设计，ChatGPT让你无所畏惧

date

password

icon

hashtag

标题

勘误

type

status

slug

summary

调试代码、寻找边缘情况的解决方案以及其他任务仍然需要您的干预。

🛠️设置环境

设置您的代码编辑器

下载并安装 Visual Studio Code 。您将在此处编辑和更新代码。

Figma 中的新开发插件

导航到 Figma 并单击插件图标。在下拉菜单中，选择“开发”。在右侧，您会看到一个加号图标 - 单击此图标，然后选择“新插件”。

按照 Figma 向导步骤操作

将出现新插件向导，选择您的插件是否要与 Figma、Figjam 或两者一起使用。进入下一步，要完全控制用户界面，请选择“自定义 UI”选项。

最后单击“另存为”并选择要存储插件文件的文件夹。

将您的插件加载到 Visual Studio Code 中

打开 Visual Studio Code，然后将 Figma 插件文件夹拖放到其中。

注册 ChatGPT

要使用 ChatGPT，您需要注册。免费版本提供了相当多的功能，但 GPT-4 是一个重大进步。其增强的功能可能会对您的代码输出和调试过程产生积极影响。因此，如果在您的预算范围内，我建议至少尝试 GPT-4 一个月。您会发现它的多功能性超出了插件开发的范围，在各种任务中证明了其价值。

🧐 编写插件要求

在此阶段，您需要专注于制定插件的要求。与产品思维方法非常相似，此阶段将消耗您很大一部分时间，因此正确使用 GPT 可以在编码阶段节省大量时间，这一点至关重要。

好消息是，您只需要所有所需功能的基本轮廓，ChatGPT 将帮助构建产品需求文档 (PRD)。

只需向 ChatGPT 提供核心思维过程，可能是您获得的有关插件的所有想法的集合，它将生成 PRD 结构。从那里开始，只需完善和扩展该结构，直到清楚地概述您的所有需求。一旦您有了最终的 PRD，您就可以指示 ChatGPT 开始创建您的插件了。

ChatGPT-4 是一款出色的工具，它扩展了其功能，甚至可以帮助 API 插件进行编码。然而，正如我们之前提到的，在处理更复杂的插件时，更高程度的编码能力变得至关重要。这是因为，每次迭代之后，您都需要交叉检查代码，以确保产品与您的 PRD 保持一致并按预期运行。

🧑🏻‍💻 使用 GPT 编码

当我们使用 ChatGPT 进入编码阶段时，请从明确的提示开始：

为此 PRD 编写 Figma 插件代码

完成此操作后，让人工智能掌控并发挥其魔力。生成代码的第一次迭代后，将其传输到 Visual Studio Code 编辑器中的相关文件中，保存它，然后返回 Figma。

导航到新创建的开发插件，然后单击“运行”。您的插件窗口应该会弹出。

由于ChatGPT不一定是设计师，所以暂时忽略UI，您的主要任务是确保所有功能正常运行并且不会出现错误。

如果出现问题或某些元素未按预期运行，您可以将您的确切问题转发给 ChatGPT，它将提供更新的代码来解决它。

编码阶段的提示

定义名称和其他语义

在 PRD 中命名对您有意义的按钮、输入字段和类似元素，以便 ChatGPT 在代码中使用这些确切的名称。这可以加快调试过程。

请求代码优化

ChatGPT 还可以帮助进行代码优化。询问它的建议，使您的代码更加高效或性能更高。

利用可解释性功能

使用 GPT-4 的可解释性功能可以更好地理解生成的代码。要求 GPT-4 用简单的术语解释复杂的代码或逻辑。

将控制台窗口中的确切错误复制粘贴到 GPT-4，这将有助于它了解错误的根源并更好地解决它。

✨ 最后的润色

您可以指示 GPT-4 通过合并前端框架（例如 Bootstrap）来增强最终代码，从而为您的用户界面提供更精美的外观。

您还可以自由地在元素上指导 GPT-4，例如号召性用语按钮的放置、其颜色以及每个元素之间或边缘的所需边距。ChatGPT 可以在代码中无缝地实现这些更新。

但是，请记住彻底检查更新的代码，以确保所有更改均已正确实施并且代码仍然有效。

好了，您已经使用 GPT-4 成功创建了第一个插件。

作者：阿努潘·帕里克