如何从已发布Figma库导入组件并获取Component Key

方法一：Figma客户端内手动复制 #

这是最直接的单组件Key获取方式：

• 打开已发布的目标库文件
• 选中需要的组件
• 在右侧属性面板的「组件」区域，点击右上角的三个点图标（更多选项）
• 在弹出菜单中选择「复制组件Key」，即可直接得到该组件的唯一Key

方法二：通过Figma API批量获取库内所有组件Key #

如果需要批量提取库中组件的Key，可调用Figma的Files API：

1. 准备好你的Figma访问令牌（在账户设置的「开发者」页面生成）和目标库的文件Key（库文件链接中file/后的字符串）
2. 用以下代码批量提取（以Node.js为例）：

const fetch = require('node-fetch');

async function extractComponentKeys(fileKey, accessToken) {
  const res = await fetch(`https://api.figma.com/v1/files/${fileKey}`, {
    headers: { 'X-Figma-Token': accessToken }
  });
  const fileData = await res.json();

  const componentList = [];
  // 递归遍历节点筛选组件
  function traverseNodes(node) {
    if (node.type === 'COMPONENT') {
      componentList.push({
        componentName: node.name,
        componentKey: node.key
      });
    }
    if (node.children) node.children.forEach(traverseNodes);
  }

  traverseNodes(fileData.document);
  return componentList;
}

// 替换为你的库文件Key和访问令牌
extractComponentKeys('YOUR_LIBRARY_FILE_KEY', 'YOUR_FIGMA_ACCESS_TOKEN')
  .then(keys => console.log('组件Key列表:', keys));

方法三：在插件运行时动态获取已加载库的组件Key #

如果需要在插件中实时获取团队库的组件Key，可使用Figma插件API的团队库相关方法：

async function getLibraryComponents() {
  // 获取团队内所有已发布库
  const allLibraries = await figma.teamLibrary.getLibrariesAsync();
  // 匹配目标库（此处用名称匹配，可按需调整）
  const targetLib = allLibraries.find(lib => lib.name === '你的库名称');
  if (!targetLib) {
    console.log('未找到目标库');
    return;
  }

  // 获取该库下的所有组件
  const libComponents = await figma.teamLibrary.getLibraryComponentsAsync(targetLib.id);
  libComponents.forEach(comp => {
    console.log(`组件: ${comp.name} | Key: ${comp.key}`);
  });
}

getLibraryComponents();

内容的提问来源于stack exchange，提问作者Abhishek Konnur