写给小白的Figma插件开发教程（1）

1、为什么有这一篇？

• 作为一个前端，肯定会有 UI 给你出设计图，大概率会用到 Figma，或者 类似的产品，简单来说你就是需要将这个图还原到网页/app内
  
• Figma 大概这样(登陆后)
  

ps: 如果 UI 没有给你相关的东西，直接给图片，我建议你赶紧跑！ 开始的需求都非常不规范，后续肯定都是问题 ！

2、如何开发插件 ？

1、环境配齐

vscode(官方推荐)
npm + node.js （自行安装）
ts  sudo npm install -g typescript
Figma desktop app
复制代码

Figma desktop appwww.figma.com/downloads/

2、登陆上

3、打开桌面 figma ，add New Plugin

npm install --save-dev @figma/plugin-typings

4、vscode 打开 并且 安装 @figma/plugin-typings

• 安装这个将非常迅速，如果不迅速，考虑换个网络

3、跑起来

此时我们的 plugin 其实 已经可用，虽然 我们还没有修改任何东西，我们拿到的是 默认的模版

• 尝试引入 使用

• 如何 解决 这个错误 ？ 我们 去看看 Read.ME 文件

• 等下 别急着骂 让我帮你找找有效的解决方案

简单来说 需要 build 一下

4、效果

• very good ! 一个好的入门
  
• 当然 可以做更多修改 比如
  

• 此时 页面 效果这样 ， 你可以 随意自定义你的 插件

5、参考文档

Figma document