From Figma wireframes to a working GOV.UK prototype

Most UK government service teams sketch in Figma. It’s where the journey is mapped, the wireframes critiqued, the content reviewed. But Figma is wireframes. The artefact you need for user research is a clickable thing in a browser that behaves like a real GOV.UK service: with focus states, error summaries, back buttons that work, forms that validate.

The traditional path from Figma to clickable prototype runs through a front-end developer rebuilding the journey in the GOV.UK Prototype Kit by hand. That step takes days. This guide is about removing it.

What the Figma file should contain

Vibe builds the prototype from a plain-language spec, not from Figma directly. The Figma file is for the team; the spec is what gets handed to the generator. So the question is: what should live in Figma so the spec writes itself?

The journey shape. A simple flow diagram of the pages in order, with branches labelled. Not pixel-perfect wireframes; a whiteboard-on-paper flow is enough.
The questions. One frame per question, with the question text, the input type (radios, checkboxes, date, text), the options if any, and the validation rule. This is the spec.
The edges. Start page, confirmation page, eligibility check, “you cannot use this service” page. These are the GOV.UK conventions a wireframe will sometimes miss.

Writing the spec from the wireframes

Open the Figma file and the spec doc side by side. For each question frame, write a single sentence. “Ask for the applicant’s date of birth as three numeric fields; reject if under 12.” You should be able to do this in 20 minutes for an alpha-scope journey.

Two prompts that produce clean output:

Lead with the actor and the task. “An angler applies for an annual fishing licence.” Not “a fishing licence system”.
List the questions in the order they appear in the journey. The AI infers the route order from this; if you list them out of order, you get a journey out of order.

Generate, then walk it

The first generation gives you a clickable journey in a sandbox URL. Walk it before you show anyone. The two things to check:

The journey shape matches the Figma flow. If the AI inferred a different branch order, the spec was ambiguous; rewrite the affected sentence and regenerate.
The errors trigger correctly. Submit a blank form. Submit each rule’s edge case. Make sure the error summary names what you expect.

What stays in Figma

Plenty. Figma is still the right tool for:

The systemic design work: tokens, components, the design system your team contributes back.
The visual artefacts you share in show-and-tell: screenshots of the journey, the design history, the discarded directions.
The complex bespoke screens that aren’t standard form patterns. Vibe generates GOV.UK patterns well; a bespoke data viz or an unusual interaction is faster to design in Figma first, then describe to Vibe.
The handoff to engineering for the production build. The Figma file is the spec engineering reads; the Vibe prototype is the spec they reference for behaviour.

What changes for the team

The rhythm changes more than the roles do. A service designer who used to brief a developer and wait for a prototype can generate a draft themselves, then bring it back to the team for critique with a working artefact in hand. Content design pairs on wording with the live prototype open, not just the Figma file. The developer’s time moves from rebuilding the journey to the bespoke bits that actually need engineering judgement.

Vibe.WithGov is an independent product, not affiliated with Figma or the Government Digital Service. See the FAQ for more on how the tool works.