Attach files to a prompt (original) (raw)
Before you start
Who can use this feature
When you're creating prototypes, web apps, and interactive UI using Figma Make, you can attach files to your prompts to guide the AI toward better results. You can attach designs, images, video, audio, text files, and PDFs.
Note: You can attach up to 10 files per prompt. The total number of attachments you can have in your file depends on your plan:
- Starter plan: 30 attachments
- Professional, Organization, and Enterprise plans: 500 attachments
Attach a design
When you attach a design to a prompt, the AI model used in Figma Make interprets the design and translates the layers and content into functional code. The result will match the form of the design, including text and images, as closely as possible, while also respecting your instructions and other attachments. If the design you try to attach is too large for the prompt, it will be attached as an image instead.
There are two ways to attach Figma designs to a prompt:
In the prompt box, click Add context, then Attach a design, and paste the link of the design you want to attach.
Copy and paste designs from your Figma Design files into the prompt box.
Note: When you use a Community design for prompts in Figma Make, a reminder appears above the prompt box that lists the designs. Additionally, Figma Make creates an Attributions.md file that includes a list of all assets that require attribution. The file is packaged with your functional prototype or web app to ensure proper attribution to original creators.
Attach images, video, audio, text files, or PDFs
You can attach different file types to provide additional context, data, or reference material to Figma Make.
To attach a file:
- In the prompt box, click Add context, then Upload from computer.
- Select the file from your system's file browser.
Tip: You can also drag and drop files directly into the prompt box.
Caution: Attaching a file can increase the number of AI credits used in a prompt.
Image files
You can attach images to provide visual reference or to embed directly in your output.
Supported formats:
- JPEG
- PNG
- GIF
- SVG
- WEBP
Images work in two ways in Figma Make:
- As reference: The model reads the image and uses it to guide the layout, colors, and positioning of the generated output. The model does its best to replicate text, colors, and the position of elements, but the result may still differ from the original image.
- As embedded assets: You can instruct Figma Make to embed the image file directly in the generated output. For example, you can upload an image and say "use this as the background image."
Image file size limits depend on your plan:
- Starter plan: 10MB maximum
- Professional, Organization, and Enterprise plans: 50MB maximum
Video and audio files
You can attach video and audio files and instruct Figma Make to embed them directly in your output. Tell Figma Make explicitly what to do with the file—for example, "embed this video as a hero background" or "add this audio as background music"—to get the best results.
Note: Unlike images, Figma AI can't analyze video or audio content—it can't watch a video to use it as a style reference.
Supported formats:
- Video: .mp4, .webm
- Audio: .mp3, .m4a
Video and audio file size limits depend on your plan:
- Starter plan: 50MB maximum
- Professional, Organization, and Enterprise plans: 200MB maximum
Text files
You can attach text files to provide context, data, or code to Figma Make. The AI can reference these files to better understand your requirements and generate more accurate results. Code files like .tsx and .js can be embedded directly in your project.
Supported text file types include:
- Code files: .tsx, .js, .ts, .jsx
- Markup and styling: .html, .css, .md, .svg
- Data files: .csv, .json
- Plain text: .txt
Note: Text files have a maximum size limit of 1MB.
Common use cases
| Use case | Description |
|---|---|
| Import real data into a prototype | Upload a .csv or .json file to generate dashboards, tables, or data-driven UI with realistic content. |
| Reuse existing components | Attach a .tsx or .jsx file and ask Figma Make to extend, refactor, or adapt it for a new screen. |
| Prototype with real content | Add product copy, FAQs, or marketing messaging in a .txt or .md file so layouts reflect real-world constraints. |
| Generate UI from API responses | Paste a sample API response in a .json file and prompt Figma Make to build the interface around it. |
| Migrate static HTML into interactive UI | Upload an .html and .css file and ask the model to convert it into a more modular, interactive experience. |
PDFs
You can attach PDF files to provide additional context to Figma Make. For example, you might attach brand guidelines, product requirement documents (PRDs), or design specifications to help guide the AI's output.
PDFs are used as reference material. Figma Make can read and reference the content in your PDF but won't embed the PDF itself in the output.
Note: PDFs have a maximum file size limit of 5MB.
Best practices for working with attachments
When you're working with attachments, here are some best practices to follow.
General best practices
- In designs, use auto layout where possible. When you attach a design or component, Figma Make is good at understanding the flow of content using auto layout.
- Focus on layout first and functionality after. Prompt for the layout you want first, then use subsequent prompts to add functionality.
- Work in steps. Rather than giving a full, end-to-end description of the result you want, start with a high-level description. Then, as you work, continue to add more granular detail and functionality. When you're attaching components and images of more complex designs, attach frame by frame rather than all at once.
- Iterate on the result. For complex functional prototypes or web apps, it will likely take a few steps in the conversation to get a result that satisfies all of your requirements. Don't hesitate to tell Figma Make where it's gotten functionality wrong. When you do, give examples of what the preferred outcomes are.
- Common design elements and layouts yield the best one-shot results. For example, simple galleries and web apps that use a single primary frame work well, among similar design approaches. More complex or novel layouts may require additional prompting.
- Focus on desktop and full-screen friendly outcomes. We're working to improve mobile output, but right now content that fits full-screen displays works best.
Single attachments
When you're working with individual attachments, here are some best practices to follow:
- Specify exact 1:1 build or reference as style. In your prompt, tell Figma Make if you want an exact 1:1 build of the attachment, or to use it as style inspiration or reference.
- Add details for each section of the build. For the closest 1:1 build, you can specify with more exactness what you want. Try doing this section by section in your design. You can also ask the model to help write a more detailed prompt.
Multiple attachments
When you're working with multiple attachments, here are some best practices to follow:
- Build screen by screen. You can attach multiple designs or images, but for best 1:1 results, try building by attaching only one or two at a time. Remember: Figma Make will remember what you attached, so if it didn't get it right the first time, remind it of what you attached and try again.
- Style references in multiple screens. You can attach multiple designs or images to help build in the style you'd like. Just remember to specify that you want the images used as inspiration, not rebuilt 1:1.
Resolving issues
When you're trying to fix or work around issues you encounter, here are some best practices to follow:
- Try smaller designs. If your design isn't being faithfully re-created, try a smaller attachment for a more accurate build.
- Try fewer images and less content-rich designs. If you're attaching designs with many images, SVGs, or vector illustrations, Figma Make can sometimes struggle. Try scaling back the fidelity or size of images, or use a less content-rich attachment.