项目简介

学习并开发一款Figma插件，经过多次尝试，选择结合着svelte和原生进行开发

基于官方教程的开发方式快速开始

1. 创建Figma插件：在Figma任意文件内右键→Widgets→Development→New widget…
2. 安装 TypeScript： npm install -g typescript
3. 安装 Plugin API： npm install --save-dev @figma/plugin-typings
4. 编译并在figma中实时预览：在 vsc 中按下cmd+shift+b，执行tsc:watch - tsconfig.json
5. 在 code.ts 中编辑 js 内容，在 ui.html 中编辑页面内容，编译后的内容在public 文件夹内
6. 使用这个样式：‣

   1. 在 ui.html 中添加 <link rel="stylesheet" href="<https://cdn.jsdelivr.net/gh/thomas-lowry/figma-plugin-ds/dist/figma-plugin-ds.css>">

   2. 在 manifest.json 中添加/修改

      "networkAccess": {
          "allowedDomains": [
            "<https://cdn.jsdelivr.net>",
            "<https://rsms.me>"
          ]
        }
      

官方教程和对应的官方推荐样式库：https://www.youtube.com/watch?v=p-z566ILvxc&list=PLXDU_eVOJTx5YBAszyuOTyxlgIxkQVyii&index=5

官方API地址：https://www.figma.com/plugin-docs/how-plugins-run/

Figma官方的资源：https://github.com/figma/plugin-resources

css原地址：https://github.com/thomas-lowry/figma-plugin-ds/blob/master/dist/figma-plugin-ds.css

svg转css url在线工具：https://csspro.com/svg-to-background-image-css/

基于官方推荐svelte库的开发方式

官方提供的一个初始化项目包：https://github.com/thomas-lowry/figsvelte