如何校验有效的Figma文件/原型链接？NodeJS+Figma API开发

我正好做过类似的Figma集成开发，给你一套精准的解决方案，既能严格匹配文件/原型链接，又能提取你需要的关键信息：

1. 精准匹配的正则表达式 #

首先替换你原来的宽泛正则，用这个专门匹配Figma文件和原型链接的表达式：

const figmaLinkRegex = /^https:\/\/www\.figma\.com\/(file|proto)\/([a-zA-Z0-9]+)(?:\/[^?]+)?(?:\?.*)?$/i;

正则各部分说明： #

• ^https:\/\/www\.figma\.com\/: 匹配固定的Figma域名前缀，确保是官方有效链接
• (file|proto): 捕获链接类型，明确区分是文件（file）还是原型（proto）
• ([a-zA-Z0-9]+): 捕获文件ID——这是调用Figma API最核心的参数
• (?:\/[^?]+)?: 非捕获分组，兼容带文件名称的链接（名称部分可选，部分短链接会省略）
• (?:\?.*)?: 非捕获分组，兼容带查询参数的链接（参数部分可选）
• $/i: 结尾匹配+忽略大小写，兼容HTTPS/Https等大小写混合的写法

2. NodeJS中完整的校验与提取逻辑 #

结合NodeJS内置的URL模块，可以轻松解析查询参数里的node-id等信息，示例代码如下：

const { URL } = require('url');

function parseFigmaLink(urlString) {
  // 第一步：用正则校验链接有效性并提取基础信息
  const matchResult = figmaLinkRegex.exec(urlString);
  if (!matchResult) {
    return { valid: false, message: '不是有效的Figma文件/原型链接' };
  }

  // 解构正则捕获的分组
  const [, linkType, fileId] = matchResult;
  
  // 第二步：用URL模块解析查询参数，避免手动处理字符串
  const url = new URL(urlString);
  const nodeId = url.searchParams.get('node-id');
  // 若需要其他参数（比如视图模式）也可以一并提取
  const viewMode = url.searchParams.get('mode');

  return {
    valid: true,
    linkType, // 返回'file'或'proto'
    fileId,
    nodeId, // 存在则返回对应值，否则为null
    viewMode
  };
}

// 测试示例链接
const testFileLink = 'https://www.figma.com/file/OoYmkiTlusAzIjYwAgSbv8wy/Test-File?node-id=0%3A1';
const testProtoLink = 'https://www.figma.com/proto/OoYmkiTlusAzIjYwAgSbv8wy/Test-File?node-id=0%3A1&mode=prototype';

console.log(parseFigmaLink(testFileLink));
console.log(parseFigmaLink(testProtoLink));

代码说明： #

• 先通过正则完成核心校验，同时捕获最关键的链接类型和文件ID
• 用官方URL模块解析查询参数，比手动拆分字符串更稳定可靠
• 返回结构化的结果，方便后续调用Figma API时直接取用所需参数

3. 边界情况兼容 #

这个方案能完美处理以下常见的Figma链接格式：

• 带完整文件名称的链接：https://www.figma.com/file/xxx/My-Design-File
• 省略文件名称的短链接：https://www.figma.com/file/xxx
• 带多参数的原型链接：https://www.figma.com/proto/xxx/My-Proto?node-id=123%3A456&mode=design
• 大小写混合的链接：HTTPS://WWW.FIGMA.COM/FILE/XXX

这样既解决了你之前正则匹配范围过宽的问题，又能一次性提取调用API需要的所有关键信息，完全满足你的开发需求。

内容的提问来源于stack exchange，提问作者Gleb Sabirzyanov