Figma插件开发：如何捕获设计截图并上传至S3存储桶？

错误原因 #

你调用的figma.viewport.snapshotAsync并非Figma官方API提供的方法，这是导致“not a function”报错的直接原因。正确的页面截图方法是figma.currentPage.screenshotAsync()。

修正后的截图代码 #

try {
  // 捕获当前页面的截图，可通过参数调整格式、质量或区域
  const imageBytes = await figma.currentPage.screenshotAsync({
    format: 'PNG', // 可选值：'PNG' | 'JPG'
    quality: 1, // 仅JPG格式生效，取值0-1，值越高质量越好
    // 可选：指定截图区域，不填则截取整个页面
    // bounds: figma.viewport.bounds
  });

  console.log("截图捕获成功，字节长度：", imageBytes.length);
} catch (error) {
  console.error("截图失败：", error);
}

后续转格式与上传S3步骤 #

1. 转换为可上传格式
   screenshotAsync返回的是Uint8Array，需要转换为Blob对象才能用于上传：

   const mimeType = 'image/png'; // 需与截图时指定的format对应
   const imageBlob = new Blob([imageBytes], { type: mimeType });
   

2. 上传到S3
   Figma插件中不能直接暴露AWS密钥，建议通过后端生成预签名URL，前端直接使用该URL完成上传：

   // 替换为从后端获取的S3预签名上传URL
   const presignedUrl = "你的S3预签名URL";
   
   const uploadResponse = await fetch(presignedUrl, {
     method: 'PUT',
     body: imageBlob,
     headers: {
       'Content-Type': mimeType
     }
   });
   
   if (uploadResponse.ok) {
     console.log("文件成功上传到S3");
   } else {
     console.error("上传失败：", uploadResponse.statusText);
   }
   

3. 配置插件网络权限
   在manifest.json中添加网络权限，允许访问S3域名：

   {
     "network": {
       "allowedDomains": ["*.amazonaws.com"]
     }
   }
   

内容的提问来源于stack exchange，提问作者Yogesh Arya