Figma Make Usage Manual (Operations and Use Cases for Basics/Templates/Importing Design Library Styles/Adding Guidelines/Open Source Components/Adding Backend/Publishing)
A reorganized set of Will's usage notes for Figma Make (Figma's built-in tool that lets you "describe requirements → AI generates runnable prototypes/webpages"), targeted at PMs building AI products who want to produce prototypes quickly. It covers eight major functional modules, each providing "how to use + Why + when to use + pitfalls": ① Basics (three-column interface = chat/preview/code; four input methods = typing/pasting Figma designs/uploading images/clicking the preview to make targeted edits). ② Best practices for writing Prompts and feeding attachments (define the product using a "user capability list" instead of broad category nouns; do layout first then functionality; iterate step by step; use Auto Layout to help AI understand structure; common layouts are more likely to succeed on the first try; desktop version is more stable; never write secret keys in prompts). ③ Templates (publish files with established specifications as templates for the team to copy and remix; use guidelines to lock editable scopes; create/update/unpublish/use; four examples of constraint prompts). ④ Importing Figma design library styles (export the Library as CSS → reference it in Make → UI automatically applies the company's color scheme and fonts). ⑤ Adding Guidelines.md (set rules for AI, including general rules + design system rules + component-level rules; concise and precise rules are better than piling on context). ⑥ Feeding with code files (four types including .tsx/.csv/.json/.html; generate data dashboards with real data; reuse open-source components such as shadcn; real copy typesetting) + a strongly constrained prompt for one-click full-site refactoring to shadcn/ui. ⑦ Adding a backend (connect to Supabase with one sentence to implement login/data storage/secure secret key saving; the judgment mnemonic is "Does this thing need to be remembered?"). ⑧ Publishing (get a figma.site URL with one click, bind a custom domain via TXT+CNAME, upload web fonts, advanced options such as SEO/password protection) + push to GitHub/download code. Division of labor with [[ai-ux-experience-design]]: that article covers "the process methodology of using AI for experience design", while this article is "the functional operation manual for the single tool Figma Make"; it complements the vibecoding mindset in [[ai-vibecoding-design-process]]. The target readers are non-technical PMs, with industry jargon explained in parentheses, and each section includes Why and when to use it.