1、为什么有这一篇?

  • 作为一个前端,肯定会有 UI 给你出设计图,大概率会用到 Figma,或许 类似的产品,简略来说你便是需求将这个图还原到网页/app内

  • Figma 大概这样(登陆后)

Kapture 2022-09-29 at 18.04.43.gif

ps: 如果 UI 没有给你相关的东西,直接给图片,我主张你赶紧跑! 开端的需求都十分不标准,后续肯定都是问题 !

2、怎么开发插件 ?

1、环境配齐

vscode(官方引荐)
npm + node.js (自行装置)
ts  sudo npm install -g typescript
Figma desktop app

Figma desktop appwww.figma.com/downloads/

2、登陆上

Kapture 2022-09-29 at 18.00.04.gif

3、翻开桌面 figma ,add New Plugin

Kapture 2022-09-29 at 18.12.32.gif

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

4、vscode 翻开 而且 装置 @figma/plugin-typings

  • 装置这个将十分敏捷,如果不敏捷,考虑换个网络

image.png

3、跑起来

此刻咱们的 plugin 其实 现已可用,尽管 咱们还没有修改任何东西,咱们拿到的是 默认的模版

  • 测验引入 运用

Kapture 2022-09-29 at 18.38.38.gif

  • 怎么 处理 这个过错 ? 咱们 去看看 Read.ME 文件

image.png

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

简略来说 需求 build 一下

image.png

4、作用

Kapture 2022-10-08 at 17.38.15.gif

  • very good ! 一个好的入门

  • 当然 能够做更多修改 比方

image.png

  • 此刻 页面 作用这样 , 你能够 随意自定义你的 插件

image.png

5、参考文档

Figma document