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

概述

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

1. 创建 OAuth 应用

  • 申请应用：

2. 本地开发插件

  • 设置本地服务器：

  • 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. 用户授权流程

  • 弹出授权界面：

  • 处理授权回调：

QA

  • Q: 授权回调 URL 我应该填什么？

  • Q: Figma 将用户重定向回你的插件，附带一个授权码（code）。这个在本地怎么实现？

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. 部署插件

  • 部署到服务器：

  • 上传到 Figma 应用市场：

QA

  • Q: 我开发插件必须要部署到服务器上么，我上传到 Figma 的应用市场不可以吗？