techlist.io
KREN
figma

6 Winning Figma Makes—and What You Can Learn From Them | Figma Blog (opens in new tab)

prototypingfigma-makesvganimationstate-managementgif

Figma’s first global Make-a-thon demonstrated how Figma Make can turn ideas into interactive prototypes quickly. More than 10,000 creators competed for $100,000 in prizes, and the winning projects were judged on creativity, innovation, execution, and prompt quality. The featured lesson is that creators should define an app’s structure and technical foundations—not merely describe the task.

Make-a-thon and Figma Make

  • Figma Make is designed to bridge the gap between concepts and working, interactive creations.
  • The competition was held in partnership with Contra.
  • Entries ranged from a Severance-themed virtual escape room to a “Figma-Kart” racing game.
  • Winners showed how thoughtful prompting and experimentation can extend the tool beyond basic prototypes.

Define the Structure, Not Just the Task

  • Second-place winner Sebastian Lumbi created a frame-by-frame SVG animation tool.
  • The app lets users:
    • Copy SVGs from Figma into the tool.
    • Build animations frame by frame.
    • Preview and export animations as GIFs.
  • His initial prompt described the product’s structure: a canvas at the top for drawing frames and a timeline below for viewing and adding frames.
  • Sebastian researched state management and component interaction before developing the app.
  • He used an iterative dialogue with the AI, beginning with two prompts and eventually adding roughly 80 more.
  • Figma Make’s revert feature allowed him to experiment safely and return to earlier versions when bugs or crashes occurred.

Technical Understanding Improves AI-Generated Code

  • Even non-programmers benefit from understanding basic concepts relevant to their application.
  • Clear instructions about structure make generated code easier to debug and extend.
  • When technical decisions are unclear, creators can consult another AI for recommendations.
  • The main lesson is to establish the application’s architecture early, then use iterative prompts to refine features and solve problems.

A practical approach is to describe the app’s components, state, and interactions up front, while treating AI generation as an iterative process with frequent testing and rollback.