Design generation with Figr for product teams

Figr wanted product teams to describe a design in plain words and get real Figma output back. The catch was data: there was no large set of paired examples, descriptions on one side and finished Figma structures on the other, to train a model on.

That made it a hard translation problem with very little to learn from. The input is often a single sentence. The output has to decide on layout, nest components into a hierarchy, apply styles, and emit the right API calls, all of which have to work when they land in Figma.

Why There Was No Training Set to Lean On

The usual move for a task like this is fine-tuning on thousands of examples. We did not have thousands of examples, so fine-tuning was off the table from the start.

That shaped everything after it. The model had to be taught through prompts and in-context examples instead of training runs. And because generated component code either parses and renders or it does not, we knew from day one that the system would need to check its own output.

Teaching Through the Prompt

We built two paths on large language models with carefully designed prompts. The zero-shot path handles descriptions the model has never seen an example of, working from natural language alone.

The few-shot path puts a small number of demonstration examples directly inside the prompt. Those in-context examples do the job a training set normally would, showing the model what a good translation looks like. With minimal demonstration examples, this route reached 88% generation accuracy.

From Text to Components That Render

The model’s output is parsed into Figma API calls, with layouts and style structures assembled as component trees. Treating the output as a tree mattered, because that is how Figma itself thinks about nesting.

A validation step checks the result before it reaches a user. That is what made the workflow safe to put in front of product teams: the system either produces a component that renders, or it says it cannot. Nobody gets handed a broken frame.

What Changed for Figr

Across the engagement the workflow produced 500+ component outputs. It also cut design-to-code conversion time by 65%, through LLM-powered synthesis paired with validation.

• Zero-shot generation from natural language without a large training dataset.
• Few-shot workflows reaching 88% generation accuracy with minimal demonstration examples.
• Automated component generation into Figma API calls.
• 65% less design-to-code conversion time.
• 500+ component outputs generated.

The stack was LLMs with zero-shot and few-shot learning, the Figma API, Python, prompt engineering, and the validation workflows that held it together.