Attach files to a prompt

When you're creating functional 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, text files, and PDFs.

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:

Attach images and text files

You can attach images and text files to provide additional context, data, or reference material to Figma Make.

To attach a file:

1. In the prompt box, click Add context, then Upload from computer.
2. Select the file from your system's file browser.

Images

To help guide the model when it's generating a functional prototype or web app, you can attach images. The model can't replicate your images exactly—think of them as a suggestion for a direction the model takes. 

The model does its best to replicate text, colors, and the position of elements in the image, but the results may still differ from what's represented in the image.

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

Common use cases

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.