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

相关文章
|
4月前
新手编写markdown笔记一条龙
新手编写markdown笔记一条龙
53 0
|
8月前
|
开发框架 JavaScript 前端开发
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
67 0
|
9月前
uniapp项目实践第二章:使用vscode开发uniapp项目
uniapp项目实践第二章:使用vscode开发uniapp项目
1882 0
|
9月前
|
编解码 数据可视化 小程序
微信小游戏开发(第一篇
微信小游戏开发(第一篇
370 0
|
JavaScript 前端开发 C++
前端基础知识备忘(1)
巩固下备忘下前端的基础知识
1523 51
|
CDN
网站美化代码系列(持续更新)
网站美化终极奥秘:创作第一,体验第二,避免繁杂,简洁为上!
409 0
网站美化代码系列(持续更新)
|
XML Java Android开发
安卓开发之ticker2.0版本使用案例(小白易懂)
安卓开发之ticker2.0版本使用案例(小白易懂)
|
存储 编解码 前端开发
聊一聊前端开发中既熟悉又陌生的图片
聊一聊前端开发中既熟悉又陌生的图片
394 0
聊一聊前端开发中既熟悉又陌生的图片
|
JavaScript
写给小白的低代码教程(2)
写给小白的低代码教程(2)
185 0
这么好用的markdown,还不知道怎么用,快来看看这篇文章吧
MARKDOWN基本语法 前几天我想朋友推荐了这个轻量级的标记语法,为了更好的帮助大家了解这个标记语言。我就出来写一篇文章来介绍一下这个标记语言。

热门文章

最新文章