> ## Documentation Index
> Fetch the complete documentation index at: https://cndoc-langchain.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Figma 集成

> 使用 LangChain JavaScript 与 Figma 文档加载器集成。

本示例介绍如何从 Figma 文件加载数据。
您需要一个 Figma 访问令牌才能开始。

```typescript theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}
import { FigmaFileLoader } from "@langchain/community/document_loaders/web/figma";

const loader = new FigmaFileLoader({
  accessToken: "FIGMA_ACCESS_TOKEN", // 或从 process.env.FIGMA_ACCESS_TOKEN 加载
  nodeIds: ["id1", "id2", "id3"],
  fileKey: "key",
});
const docs = await loader.load();

console.log({ docs });
```

您可以通过在浏览器中打开文件并从 URL 中提取来找到您的 Figma 文件密钥和节点 ID：

```
https://www.figma.com/file/<YOUR FILE KEY HERE>/LangChainJS-Test?type=whiteboard&node-id=<YOUR NODE ID HERE>&t=e6lqWkKecuYQRyRg-0
```

***

<div className="source-links">
  <Callout icon="terminal-2">
    [连接这些文档](/use-these-docs) 到 Claude、VSCode 等，通过 MCP 获取实时答案。
  </Callout>

  <Callout icon="edit">
    [在 GitHub 上编辑此页面](https://github.com/langchain-ai/docs/edit/main/src/oss/javascript/integrations/document_loaders/web_loaders/figma.mdx) 或 [提交问题](https://github.com/langchain-ai/docs/issues/new/choose)。
  </Callout>
</div>