> ## Documentation Index
> Fetch the complete documentation index at: https://nvd-54.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Figma 集成
> 使用 LangChain Python 集成 Figma 文档加载器。
> [Figma](https://www.figma.com/) is a collaborative web application for interface design.
本 notebook 介绍如何load data from the `Figma` REST API into a format that can be ingested into LangChain, along with example usage for code generation.
```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)
Node ID 也可以在 URL 中找到。点击任何内容并查找 '?node-id=\{node\_id}' 参数。
Access token instructions are in the Figma help center article: [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"}}
# see https://python.langchain.com/en/latest/modules/data_connection/getting_started.html for more details
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):
# I have no idea if the Jon Carmack thing makes for better code. YMMV.
# See https://python.langchain.com/en/latest/modules/models/chat/getting_started.html for chat info
system_prompt_template = """You are expert coder Jon Carmack. Use the provided design context to create idiomatic HTML/CSS code as possible based on the user request.
Everything must be inline in one file and your response must be directly renderable by the browser.
Figma file nodes and metadata: {context}"""
human_prompt_template = "Code the {text}. Ensure it's mobile responsive"
system_message_prompt = SystemMessagePromptTemplate.from_template(
system_prompt_template
)
human_message_prompt = HumanMessagePromptTemplate.from_template(
human_prompt_template
)
# delete the gpt-4 model_name to use the default gpt-3.5 turbo for faster results
gpt_4 = ChatOpenAI(temperature=0.02, model_name="gpt-4")
# Use the retriever's 'get_relevant_documents' method if needed to filter down longer docs
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) 或 [提交 issue](https://github.com/langchain-ai/docs/issues/new/choose)。