Figma 插件资源项目教程

Figma 插件资源项目教程

plugin-resourcesA collection of open source plugins, widgets and other resources for Figma + FigJam that have been shared on GitHub.项目地址:https://gitcode.com/gh_mirrors/pl/plugin-resources

1. 项目的目录结构及介绍

plugin-resources/
├── README.md
├── package.json
├── src/
│   ├── code.ts
│   ├── ui.html
│   ├── styles.css
├── assets/
│   ├── icon.png
│   ├── logo.png
├── config/
│   ├── settings.json
│   ├── defaults.json
├── dist/
│   ├── main.js
│   ├── ui.js

• README.md: 项目说明文件。
• package.json: 项目依赖和脚本配置文件。
• src/: 源代码目录，包含 TypeScript 和 HTML 文件。
  • code.ts: 主逻辑代码文件。
  • ui.html: 用户界面 HTML 文件。
  • styles.css: 样式表文件。
• assets/: 资源文件目录，包含图标和 logo。
• config/: 配置文件目录，包含设置和默认配置。
• dist/: 编译后的输出目录，包含主逻辑和用户界面的 JavaScript 文件。

2. 项目的启动文件介绍

项目的启动文件是 src/code.ts。这个文件包含了插件的主要逻辑和初始化代码。当插件被加载时，Figma 会首先执行这个文件中的代码。

// src/code.ts
figma.showUI(__html__);
figma.ui.onmessage = (msg) => {
  if (msg.type === 'create-rectangles') {
    const nodes: SceneNode[] = [];
    for (let i = 0; i < msg.count; i++) {
      const rect = figma.createRectangle();
      rect.x = i * 150;
      rect.fills = [{type: 'SOLID', color: {r: 1, g: 0.5, b: 0}}];
      figma.currentPage.appendChild(rect);
      nodes.push(rect);
    }
    figma.currentPage.selection = nodes;
    figma.viewport.scrollAndZoomIntoView(nodes);
  }
  figma.closePlugin();
};

3. 项目的配置文件介绍

项目的配置文件位于 config/ 目录下，主要包括 settings.json 和 defaults.json。

• settings.json: 用户自定义设置文件，存储插件的配置选项。
• defaults.json: 默认设置文件，定义插件的默认配置。

// config/settings.json
{
  "theme": "light",
  "language": "en"
}

// config/defaults.json
{
  "theme": "dark",
  "language": "en"
}

这些配置文件可以通过插件的代码进行读取和修改，以实现动态配置插件的功能。

plugin-resourcesA collection of open source plugins, widgets and other resources for Figma + FigJam that have been shared on GitHub.项目地址:https://gitcode.com/gh_mirrors/pl/plugin-resources