如何在 figma 中获取授权并开发插件

Figma 插件开发与 OAuth 授权完整指南

概述

本指南将帮助你从申请 OAuth 应用开始，到如何在本地和生产环境中使用 Figma 插件。

1. 创建 OAuth 应用

• 申请应用：
  • 访问 Figma 的开发者平台，创建一个新的 OAuth 应用。
  • 填写应用名称、描述和回调 URL（在本地开发时，这可以是 http://localhost:3000/auth/callback）。
  • 记录下生成的客户端 ID 和客户端密钥（Client ID 和 Client Secret）。

2. 本地开发插件

• 设置本地服务器：
  • 使用 http-server、express、Flask 等工具创建一个本地服务器。
  • 设置一个路由来处理 OAuth 回调，例如 /auth/callback。
• Figma 插件代码示例：

  // 在插件中，使用 figma.showUI() 方法打开一个新的 UI 窗口
  figma.showUI(__html__, { width: 600, height: 400 });
  
  // 监听 UI 消息，处理用户操作
  figma.ui.onmessage = async (msg) => {
    if (msg.type === "login") {
      // 用户请求登录，重定向到 OAuth 授权页面
      const authUrl = `https://www.figma.com/oauth/authorize?client_id=YOUR_CLIENT_ID&response_type=code&redirect_uri=YOUR_CALLBACK_URL`;
      window.open(authUrl, "_blank");
    }
  };
  

3. 用户授权流程

• 弹出授权界面：
  • 用户在 Figma 插件中点击“授权”按钮，触发 figma.showUI() 方法打开一个新的浏览器窗口或标签页。
  • 用户在新窗口中完成 OAuth 授权流程。
• 处理授权回调：
  • 用户完成授权后，Figma 将用户重定向回本地服务器页面，并附带授权码。
  • 本地服务器页面解析授权码，并将其发送到后端服务以交换访问令牌。

QA

• Q: 授权回调 URL 我应该填什么？
  • A: 授权回调 URL 是用户完成授权后，Figma 将用户重定向回的 URL。在本地开发时，这个 URL 应该是你本地服务器的 URL，并且包含了能够处理授权回调的路由。例如，如果你的本地服务器运行在 localhost 的 3000 端口上，并且你设置了一个 /auth/callback 路由来处理回调，那么回调 URL 可能是 http://localhost:3000/auth/callback。
• Q: Figma 将用户重定向回你的插件，附带一个授权码（code）。这个在本地怎么实现？
  • A: 在本地开发时，Figma 插件无法直接与本地服务器通信。因此，你需要使用 Figma 提供的 figma.showUI() 方法来打开一个新窗口（通常是一个新的浏览器标签页），这个窗口会加载你的本地服务器上的页面，然后通过这个页面来处理 OAuth 流程。当用户完成授权后，Figma 会将用户重定向回这个页面，并附带一个授权码（通常作为 URL 参数）。你的本地服务器页面需要能够解析这个授权码，并将其发送到你的后端服务以交换访问令牌。

4. 交换访问令牌

• 设置路由处理回调：

  // 在本地服务器上，设置一个路由来处理授权回调
  app.get('/auth/callback', (req, res) => {
    const code = req.query.code;
    // 使用授权码交换访问令牌
    fetch('https://www.figma.com/api/oauth/token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: `client_id=YOUR_CLIENT_ID&client_secret=YOUR_CLIENT_SECRET&grant_type=authorization_code&code=${code}&redirect_uri=YOUR_CALLBACK_URL`,
    })
    .then(response => response.json())
    .then(data => {
      // 存储访问令牌，以便后续使用
      res.send('授权成功，已获取访问令牌');
    })
    .catch((error) => {
      console.error('交换访问令牌失败:', error);
      res.status(500).send('授权失败');
    });
  });
  

5. 部署插件

• 部署到服务器：
  • 当你在本地测试完成后，将你的插件部署到一个安全的服务器上。
  • 确保 OAuth 应用的配置与生产环境相匹配，包括更新回调 URL 为生产环境的 URL。
• 上传到 Figma 应用市场：
  • 确保你的插件符合 Figma 应用市场的提交要求。
  • 提交你的插件进行审核，并在通过后发布到 Figma 应用市场。

QA

• Q: 我开发插件必须要部署到服务器上么，我上传到 Figma 的应用市场不可以吗？
  • A: 你可以直接将插件上传到 Figma 的应用市场，但如果你的应用需要 OAuth 授权，那么你需要一个公开可访问的服务器来处理授权流程。这是因为 OAuth 需要一个安全的回调 URL，这个 URL 必须是公开可访问的，以便 Figma 能够将用户重定向回你的应用。在开发阶段，你可以使用本地服务器来模拟这个过程，但在发布到 Figma 应用市场之前，你需要确保你的应用有一个稳定的、安全的服务器环境来处理 OAuth 回调和令牌交换。