techlist.io
KREN
figma

Building a better First Draft for designers | Figma Blog (opens in new tab)

design-systemsgen-aiui-uxfigma-aiamazon-titanopenai-gpt-4

Figma reintroduced its AI design-generation feature as First Draft, repositioning it as a starting point rather than a finished product. After disabling the original Make Designs feature because its outputs too closely resembled existing apps, Figma rebuilt the system with improved design libraries and safeguards. First Draft was later folded into Figma’s more powerful design agent, which adds iterative prompting, bulk edits, and live feedback.

The Purpose of First Draft

  • First Draft is designed to reduce the tedious work required to turn an idea into an initial design.
  • It helps designers:
    • Express an idea through a simple prompt
    • Start productive discussions
    • Explore multiple design directions
    • Move more quickly from concept to prototype
  • Figma presents it as an additional way to explore possibilities, not a replacement for design judgment or craft.

How the AI Generates Designs

  • First Draft uses off-the-shelf AI models, including OpenAI’s GPT-4 and Amazon Titan.
  • It combines three elements:
    • Model: The underlying AI system
    • Context: Figma’s proprietary mobile and desktop design systems, components, and assembly examples
    • Prompt: The user’s description of their design goal
  • The AI selects, arranges, and customizes components from the relevant design system to produce an initial design.

Lessons from Make Designs

  • Figma originally introduced the feature as Make Designs during Config 2024.
  • The company disabled it after discovering that problems in the underlying design system caused generated mockups to resemble existing applications too closely.
  • Following analysis, testing, and iteration, Figma relaunched the feature under the name First Draft.
  • The new name emphasizes that the output is meant to be a flexible jumping-off point rather than a polished final design.

Design Libraries and Future Customization

  • Users can choose among four libraries tailored to different needs:
    • Low-fidelity wireframes
    • More visually expressive, high-fidelity designs
    • Site-oriented patterns
    • App-oriented patterns
  • This contrasts with Visual Search, which helps users find exact existing files or components.
  • Figma’s longer-term goal is to let organizations use their own custom libraries and company-specific design languages.
  • The company is also exploring code-backed systems such as Google Material 3 to help designers and product teams iterate more closely with implementation.

From First Draft to Figma’s Design Agent

  • First Draft is now incorporated into Figma’s purpose-built design agent.
  • The agent extends the original concept with:
    • Re-prompting and deeper iteration
    • Automated bulk edits
    • Live feedback on designs and user flows
    • Direct interaction through chat on the canvas

Figma’s approach is to use AI to accelerate early exploration while keeping designers in control. The current recommendation is to use the design agent as an iterative partner for generating, refining, and evaluating ideas rather than treating AI output as a finished solution.