> ## 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 Python 与 Figma 文档加载器集成。
> [Figma](https://www.figma.com/) 是一个用于界面设计的协作式 Web 应用程序。
本笔记本介绍如何从 `Figma` REST API 加载数据到可被 LangChain 处理的格式，以及用于代码生成的示例用法。
```python theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}
import os
from langchain.indexes import VectorstoreIndexCreator
from langchain_community.document_loaders.figma import FigmaFileLoader
from langchain_core.prompts.chat import (
ChatPromptTemplate,
HumanMessagePromptTemplate,
SystemMessagePromptTemplate,
)
from langchain_openai import ChatOpenAI
```
Figma API 需要一个访问令牌、node\_ids 和一个文件密钥。
文件密钥可以从 URL 中获取。[www.figma.com/file/\{filekey}/sampleFilename](https://www.figma.com/file/\{filekey}/sampleFilename)
节点 ID 也可在 URL 中找到。点击任意元素并查找 `?node-id=\{node_id\}` 参数。
访问令牌的说明请参阅 Figma 帮助中心文章：[help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens)
```python theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}
figma_loader = FigmaFileLoader(
os.environ.get("ACCESS_TOKEN"),
os.environ.get("NODE_IDS"),
os.environ.get("FILE_KEY"),
)
```
```python theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}
# 更多详情请参阅 https://python.langchain.com/en/latest/modules/data_connection/getting_started.html
index = VectorstoreIndexCreator().from_loaders([figma_loader])
figma_doc_retriever = index.vectorstore.as_retriever()
```
```python theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}
def generate_code(human_input):
# 我不确定 Jon Carmack 的风格是否能生成更好的代码。效果可能因人而异。
# 聊天相关信息请参阅 https://python.langchain.com/en/latest/modules/models/chat/getting_started.html
system_prompt_template = """你是专家级程序员 Jon Carmack。请根据用户请求，使用提供的设计上下文，尽可能创建地道的 HTML/CSS 代码。
所有内容必须内联在一个文件中，并且你的响应必须能被浏览器直接渲染。
Figma 文件节点和元数据：{context}"""
human_prompt_template = "编写 {text} 的代码。确保其具有移动端响应式"
system_message_prompt = SystemMessagePromptTemplate.from_template(
system_prompt_template
)
human_message_prompt = HumanMessagePromptTemplate.from_template(
human_prompt_template
)
# 删除 gpt-4 model_name 以使用默认的 gpt-3.5 turbo 获得更快的结果
gpt_4 = ChatOpenAI(temperature=0.02, model_name="gpt-4")
# 如需筛选更长的文档，可使用检索器的 'get_relevant_documents' 方法
relevant_nodes = figma_doc_retriever.invoke(human_input)
conversation = [system_message_prompt, human_message_prompt]
chat_prompt = ChatPromptTemplate.from_messages(conversation)
response = gpt_4(
chat_prompt.format_prompt(
context=relevant_nodes, text=human_input
).to_messages()
)
return response
```
```python theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}
response = generate_code("page top header")
```
在 `response.content` 中返回以下内容：
```
\n\n\n \n \n \n\n\n \n\n
```
***
[通过 MCP 将这些文档](/use-these-docs)连接到 Claude、VSCode 等，以获取实时答案。
[在 GitHub 上编辑此页面](https://github.com/langchain-ai/docs/edit/main/src/oss/python/integrations/document_loaders/figma.mdx) 或 [提交问题](https://github.com/langchain-ai/docs/issues/new/choose)。