Pattern #16 · Tools and integrations

AI prototyping in Figma: where it helps and where it lies

The mockup speaks fluent design system. Just not yours.

Track Bfigmafirst-draftfigma-makeprototyping

Verified as of 2026-08-16

Do

Generate a common pattern for structure, then swap every stock part for your own components before review.

Don't

Don't present a generated screen as your design system's work. The parts are Figma's; only the resemblance is yours.

The rule. Use AI generation in Figma to compress the blank-canvas phase, and treat every generated screen or build as a stand-in: nothing goes to review until it is rebuilt from your own components and checked against your spec.

Why. First Draft assembles editable wireframes and designs from Figma-built libraries, stacks of prebuilt components pieced together to match "common design patterns on websites and mobile apps," which is exactly what makes early exploration cheap (Figma, n.d.-c). The same page states the ceiling in one line: "It's not possible to generate designs using your own design system," so a convincing draft is stock parts wearing your product's confidence (Figma, n.d.-c). Figma Make goes further, turning prompts and attached designs into "functional prototypes, web apps, and interactive UI," and its documentation warns that a build may pull in third-party fonts, code packages, or images from the internet, with rights clearance left to you (Figma, n.d.-b).

Seen in the wild. Figma disabled the original version of this feature after "an issue with the feature's underlying design system resulted in mocks that too closely resembled existing apps," then relaunched it as First Draft on selectable libraries (Figma, n.d.-a). The tool's own history is the cautionary tale.

Verified as of 2026-08-16 against Figma's live Help Center documentation for First Draft and Figma Make.

References

  1. 01

    Figma. (n.d.-c). Use First Draft with Figma AI. Figma Learn Help Center. Retrieved August 16, 2026, from https://help.figma.com/hc/en-us/articles/23955143044247-Use-First-Draft-with-Figma-AI

    https://help.figma.com/hc/en-us/articles/23955143044247-Use-First-Draft-with-Figma-AI
  2. 02

    Figma. (n.d.-b). Explore Figma Make. Figma Learn Help Center. Retrieved August 16, 2026, from https://help.figma.com/hc/en-us/articles/31304412302231-Explore-Figma-Make

    https://help.figma.com/hc/en-us/articles/31304412302231-Explore-Figma-Make
  3. 03

    Figma. (n.d.-a). Building a better First Draft for designers. Figma Blog. Retrieved August 16, 2026, from https://www.figma.com/blog/figma-ai-first-draft/

    https://www.figma.com/blog/figma-ai-first-draft/