写给小白的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月前
|
应用服务中间件 测试技术 数据库
0-1教程 ChatGPT Apps Store应用提交教程——和MCP开发部署
本文以“A2Z Bill Agent”为例,详细介绍如何提交应用至ChatGPT App Store。涵盖准备App图标、MCP服务器配置、域名验证、测试用例编写、截图要求等全流程,助开发者高效完成上架。
0-1教程 ChatGPT Apps Store应用提交教程——和MCP开发部署
|
4月前
|
前端开发 JavaScript 测试技术
构建可维护的前端架构:从混乱到清晰的演进之路
在现代 Web 开发中,前端工程的复杂度正以前所未有的速度增长。从简单的 jQuery 脚本到如今基于 React、Vue 或 Svelte 的大型应用,开发者不仅要关注功能实现,更要思考如何构建一个可维护、可扩展、可测试的前端架构。本文将探讨如何从“能跑就行”的代码演进为结构清晰、职责分明的前端系统。
|
监控 测试技术 Docker
【步步惊心】Flask应用云端之旅:从本地调试到一键上线的终极秘籍!
【8月更文挑战第31天】本文详细介绍了将基于Flask框架的Web应用从本地开发环境部署到云平台的全过程。首先,通过示例代码展示了如何搭建本地环境并测试应用。接着,讲解了如何使用Docker构建生产环境镜像。最后,以Heroku为例,说明了如何将应用部署到云平台,并介绍了监控与维护的方法。通过本文的最佳实践,你可以轻松完成Flask应用的部署。
577 0
|
缓存 前端开发 JavaScript
React 视频弹幕组件 Video Danmaku
本文介绍了如何在React中构建视频弹幕组件,提升用户观看体验和互动性。首先通过Create React App初始化项目,并集成`react-player`作为视频播放器。接着实现基本弹幕功能,包括评论的接收与显示,使用CSS动画实现滚动效果。针对常见问题如弹幕重叠、性能下降及同步问题,提供了随机化位置、分批加载和监听播放进度等解决方案。最后探讨了弹幕分类和特效等高级技巧,确保弹幕系统的高性能和良好用户体验。
613 23
|
存储 人工智能 安全
AI战略丨全面投入升级 AI 大基建
云厂商拥有全栈技术储备,并通过基础设施的全面升级,让 AI 训练、推理、部署和应用整个生命周期变得更高效。
|
机器学习/深度学习 人工智能 持续交付
利用AI进行代码审查:提升软件质量的新策略
【10月更文挑战第28天】本文探讨了AI在代码审查中的应用,介绍了AI如何通过静态代码分析、代码风格检查和实时反馈提升代码质量。文章还讨论了将AI工具集成到CI/CD流程、定制化规则和结合人工审查等进阶技巧,并推荐了SonarQube和DeepCode等实用工具。未来,AI代码审查工具将更加智能,助力软件开发。
|
API UED
深入理解 uni-app 中的加载提示:uni.showLoading
深入理解 uni-app 中的加载提示:uni.showLoading
8083 0