Create Figma Plugin 项目教程

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

create-figma-plugin/
├── .github/
│   └── workflows/
├── .vscode/
│   └── settings.json
├── docs/
│   ├── changelog.md
│   ├── quick-start.md
│   └── ...
├── src/
│   ├── commands/
│   │   ├── command1.ts
│   │   └── command2.ts
│   ├── components/
│   │   ├── component1.tsx
│   │   └── component2.tsx
│   ├── main.ts
│   ├── ui.tsx
│   └── ...
├── .gitignore
├── package.json
├── tsconfig.json
└── ...

目录结构介绍

• .github/: 包含GitHub Actions的工作流配置文件。
• .vscode/: 包含VSCode的设置文件。
• docs/: 包含项目的文档文件，如变更日志、快速开始指南等。
• src/: 项目的源代码目录，包含命令、组件、主入口文件等。
  • commands/: 包含插件的命令文件。
  • components/: 包含插件的UI组件文件。
  • main.ts: 插件的主入口文件。
  • ui.tsx: 插件的UI入口文件。
• .gitignore: Git忽略文件配置。
• package.json: 项目的依赖和脚本配置文件。
• tsconfig.json: TypeScript配置文件。

2. 项目的启动文件介绍

main.ts

main.ts 是插件的主入口文件，负责初始化插件并处理插件的主要逻辑。通常，它会注册插件的命令并处理与Figma的交互。

import { loadFontsAsync, showUI } from '@create-figma-plugin/utilities';

export default async function () {
  await loadFontsAsync();
  showUI({ width: 240, height: 120 });
}

ui.tsx

ui.tsx 是插件的UI入口文件，负责渲染插件的用户界面。通常，它会使用Preact组件来构建UI。

import { render } from 'preact';
import { Button } from '@create-figma-plugin/ui';

export default function () {
  const container = document.createElement('div');
  document.body.appendChild(container);

  render(<Button onClick={() => console.log('Button clicked!')}>Click me</Button>, container);
}

3. 项目的配置文件介绍

package.json

package.json 是项目的依赖和脚本配置文件，包含了项目的元数据、依赖项、脚本等信息。

{
  "name": "create-figma-plugin",
  "version": "1.0.0",
  "main": "src/main.ts",
  "scripts": {
    "build": "build-figma-plugin",
    "watch": "build-figma-plugin --watch"
  },
  "dependencies": {
    "@create-figma-plugin/utilities": "^1.0.0",
    "preact": "^10.5.13"
  },
  "devDependencies": {
    "@create-figma-plugin/build": "^1.0.0"
  }
}

tsconfig.json

tsconfig.json 是TypeScript的配置文件，定义了TypeScript编译器的选项。

{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment"
  },
  "include": ["src/**/*"]
}

通过以上配置，您可以快速了解并开始使用 create-figma-plugin 项目。