Attach designs and images to a prompt

Before you start

Who can use this feature

Figma Make is in open beta.

While in beta, Figma Make is rolling out in the coming weeks to users on all paid plans.

Requires a Full seat.

When you’re creating functional prototypes, web apps, and interactive UI using Figma Make, you can attach designs and images to your prompts to help guide the AI to a satisfactory result.

You can have up to three attachments per prompt, and those attachments can be any mix of designs and images.

Attach a design

When you attach a design to a prompt in a conversation, the AI model used in Figma Make is able to interpret the design and translate the layers and content into functional code. The result will try to match the form of the design, including text and images, as closely as possible, while also respecting your instructions and other attachments.

There are two ways to attach Figma designs to a prompt:

• In the prompt box, click Attach design and search for the design, component, or Community file that you want to attach.

  

• Copy and paste designs from your Figma Design files into the prompt box.

  

Search for a design

When you create or edit a make and click Attach design, the Attach design modal appears. In the Attach design modal, you can search for components and frames in projects from your teams and organization.

To find designs and community content, type into the search box.

The search box in the Attach design modal also supports visual search. To use visual search, click Visual search in the search box and select an image to use as guidance.

Click See more to browse components or other designs that fit your search terms.

When you select a component, you can click:

• Insert to directly add it to the prompt box
• Go to main component to open the original design file in a new tab.

When you select a design under Other designs, you can click:

• Attach design to add it to the prompt box
• Open file to open the original design file in a new tab
• Preview to see a large preview of the design

If you're in an organization, libraries that have been approved as resources and enabled by default will appear in the search.

If you haven't previously done so in a Figma Make file, you can also add a library so you can search and attach frames and components from that library. Each Figma Make file can have a different library added to it.

To add a library to a Figma Make file:

1. Above your components, click Browse libraries.
2. Search for the library that you want to add.
3. Click the library, and then click Add to file.

You can also click Community to browse designs from the Figma Community that match your search terms.

Similar to Other designs in your organization, when you select a Community design, you can click:

• Attach design to add it to the prompt box
• Open in community to open the Community listing in a new tab
• Preview to see a large preview of the design

Paste a design

You can paste a design from your Figma Design file directly into the prompt box of the AI chat.

Here are some important considerations:

• You must copy frames or components. You can’t paste other types of layers into the AI chat.
• Sections won’t work if pasted into the chat. You must copy frames inside the section instead.

Attach an image

To help guide the model when it’s generating a functional prototype or web app, you can provide images. The model can’t replicate your images exactly — think of them like 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.

There are two ways to attach images to a prompt.

• In the prompt box, click Attach image and select the image from your system’s file browser.

  

• Copy and paste the image into the prompt box.

  

Best practices for working with attachments

When you’re working with attaching images and designs to your prompt, here are some best practices to follow.

General best practices

• In designs, use auto layout where possible. When you attach a design or component, the system is good at understanding the flow of content using auto layout.
• Focus on layout first and functionality after. Prompt the system towards the layout that you want, then use subsequent prompts to add functionality to that layout.
• Work in steps. Rather than trying to give the system a full, end-to-end description of the result that you want, start with a high level description of what you want. 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 to a result that satisfies all of the requirements you’re looking for. Don’t hesitate to tell the system 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 the system if you want an exact 1:1 build of the attached, or to use the attached as style inspiration/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 prompt that’s more detailed.

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 designs at a time. Remember: the system will remember what you attached, so if it didn’t get it 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 to the system you want the images used as inspiration, not 1:1 re-built

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 you’re design isn’t being faithfully re-created, try with a smaller attachment for a more accurate build
• Try fewer images and less content-rich designs. If you are attaching designs that many images, svgs, or vector illustrations, sometimes the system can struggle. Try scaling back the fidelity or size of images, or use a less content-rich attachment.