写给小白的Figma插件开发教程(1)

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

相关文章
|
6月前
|
移动开发 程序员 编译器
三分钟创建一个新应用,ivx的神奇之处【PPT式程序开发】
IVX是一门人人都能快速掌握的可视化编程语言
66 0
|
3月前
|
编解码 数据可视化 小程序
微信小游戏开发(第一篇
微信小游戏开发(第一篇
151 0
|
10月前
|
JavaScript 前端开发 数据可视化
开发|关于微信小游戏开发的入门心得
开发|关于微信小游戏开发的入门心得
110 0
|
10月前
|
移动开发 数据可视化 JavaScript
谈一谈|小白如何使用egret
谈一谈|小白如何使用egret
138 0
|
11月前
|
开发工具
经典飞机大战游戏制作教程1:熟悉开发工具
适合想要学习做游戏的新手,也适合想要学习编程的青少年,另外也适合亲子共学。 想让孩子学习一样东西,除了让他自己去学习之外,还有一种更好的方式,就是跟他一起学习。希望这个系列能够让你体会到做游戏的乐趣,并且在做游戏的过程中学习编程,锻炼逻辑思维。 如果课程内容对你有帮助,欢迎点赞分享,鼓励小蚂蚁继续创作。
190 0
|
11月前
|
缓存 小程序 数据库
微信小游戏开发系列教程
嗨!大家好,我是小蚂蚁。这里整理了一下公众号中写过的一些教程文章,它们已经帮助过很多人做出了自己的第一款游戏,希望还能够继续帮助更多想要做游戏的朋友,进入游戏开发世界的大门。
321 0
|
11月前
|
小程序 开发者
微信小游戏开发基础系列教程开篇
做个游戏并不简单,或者其实比想象中的还要难,我想对于很多学习游戏开发的新手来讲都会这样觉得。即使是再简单的工具,甚至连代码都不需要写,但是用起来还是一个样,跟着教程一步一步的知道怎么做,脱离了教程就两眼一抹黑,无从下手。
80 0
|
11月前
微信小游戏开发系列教程3-熟悉所使用的游戏制作工具
这一节我们会熟悉一下将要使用的游戏制作工具-微信小游戏制作工具,然后制作出第一个“你好,小游戏”的事例,向小游戏开发世界问好。 欢迎体验我的微信小游戏作品精致1010。
79 0
|
XML Java Android开发
安卓开发之ticker2.0版本使用案例(小白易懂)
安卓开发之ticker2.0版本使用案例(小白易懂)
安卓开发之ticker2.0版本使用案例(小白易懂)
|
JSON 小程序 JavaScript
全栈工程师之路-中级篇之小程序开发-第一章第三节阅读官方demo
全栈工程师之路-中级篇之小程序开发-第一章第三节阅读官方demo
152 0
全栈工程师之路-中级篇之小程序开发-第一章第三节阅读官方demo