写给小白的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