网络异常,图片无法展示
|
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 ! 一个好的入门
- 当然 可以做更多修改 比如
网络异常,图片无法展示
|
- 此时
页面 效果这样 , 你可以 随意自定义你的 插件
网络异常,图片无法展示
|