How to Use Figma Make

Figma Make is Figma's prompt-to-app tool. It has two areas: the AI chat on one side and a live preview on the other. Click Code at the top to see and edit the files. The main one is App.tsx. Make keeps a version history, so you can go back to an earlier version if a prompt breaks something.

Use it for functional prototypes you can't build with Figma's prototype connections: forms that validate, real state, data from an API. For click-through flows between static screens, a normal Figma prototype is faster and free.

• Full seat on a paid plan: everything. Create in any team or project, share, publish, edit code.
• Dev, Collab and View seats: can try Make in drafts only. They can't share or publish. Dev seats can view and download the code.
• Starter plan: can try it with limits. Figma's FAQ says Starter can publish to the public web only if the file is also published to the Figma Community.
• K-12 education: not available.

Figma's advice is to structure prompts as task, context and constraints. Tell Make what you're building and who it's for before the details. Compare:

• Weak: "Make a dashboard."
• Better: "Build a sales dashboard for a small shop owner. Show revenue this month, a line chart of the last 12 weeks and a table of recent orders. Use the attached frame as the exact layout. Desktop only."

Then change one thing per prompt. Long lists of fixes in a single message are harder for the model to get right, and each prompt costs credits whether it works or not. Plan mode, on paid plans, writes out a plan before generating code, which helps for bigger builds.

Select a frame in Figma Design, copy it, and paste it into the Make chat. Or click +, choose Add context and paste the design's link. Figma's tips for good results:

• Paste real frames, not screenshots. Frames carry layer structure and styles.
• Use auto layout. It maps to real layout code. See how to use auto layout.
• Attach one frame at a time for complex screens. Start with layout, then add behaviour.
• Avoid frames full of images and vectors. Smaller attachments rebuild more accurately.

Use a Make kit. A kit bundles your library's variables and styles, npm packages for your code components, and written guidelines, so Make builds with your system instead of guessing. Create one with Assemble your kit, then Add items to your kit. Kits need a Full seat on a paid plan. On Organization and Enterprise, an admin must also have AI features turned on for the organization.

Older Make files that used the earlier library export keep working. For new files, add the library to a kit. If the library itself isn't published yet, start with how to publish a library in Figma.

"Figma Make and custom fonts" has about 3.3k views on the Figma forum. In the editor, Make can use fonts installed on your computer or shared by your organization, as long as Figma can see them (the desktop app or the font installer handles that; see how to add fonts to Figma). Name the font exactly in your prompt, or pick it with the Edit tool.

Visitors to the published app don't have your fonts. Upload a web version: click Settings at the top of the Make file, then Fonts, then Upload, and add a .woff or .woff2 file for each font. Then publish again. The publish dialog warns you under Typography if fonts are missing.

Click Publish, add a title and click Publish. The app gets a URL like three-random-words.figma.site. To push later changes, publish again and click Update. To take it down, open Make settings and click Unpublish.

• Password. Add one in the publish settings (at least 4 characters). You can't view it again after you set it.
• Internal only. On Organization and Enterprise, publish to your organization. Viewers must be logged-in members.
• Custom domain. Available on some paid plans, shared with the domain limit for Figma Sites. The Figma Make FAQ lists the limit for each plan.

It varies with the model, the size of the task and how much context Make has to read. Figma's own examples: a simple change is about 30 or more credits, and generating an app about 100 or more. A Full seat on Professional gets 3,000 credits a month. When you run out, Make stops until the reset or until an admin adds credits. The details are in Figma AI credits.

Next steps: export Figma Make code to run it locally or push it to GitHub, and Figma Make not working if it gets slow or stops. If you'd rather stay in Figma Design, AI plugins cover a lot of the same ground; see the best Figma AI plugins.