Prototype frame: turn wireframes into an interactive prototype with AI

The new Prototype frame turns wireframe screens on your board into an interactive prototype, wired automatically by AI. Select the screens you have sketched, and AI works out how they connect: which button opens which screen, what a form submits to, where the back link goes. You get a clickable prototype in a device frame, right next to the wireframes, notes and diagrams that led to it.

There is no hotspot wiring to do by hand. Once the prototype exists, you can click through it on the canvas, play it full screen, open it on your own phone with a QR code, change any part of it with AI, and export it to HTML code.

What you can use interactive prototypes for

• Test a flow before anyone builds it: convert the sign up, onboarding or checkout screens you wireframed and click through them to find dead ends and missing steps early.

• Run quick usability sessions: send the phone preview link to a tester and watch them try the flow on a real device.

• Present an idea to stakeholders: play the prototype full screen in a review meeting instead of walking through static screens.

• Prototype from a prompt: describe an app, such as "a booking app for a yoga studio with class list, class details and checkout", and get a working prototype without wireframing first.

• Hand a working draft to developers: export the prototype to code and give the team standalone HTML with the screen links already in place.

• Keep design work in one place: show an existing Figma prototype on the board by pasting its link, beside the research and plans it came from.

How to convert wireframes into a prototype

1. Wireframe your screens on the board, or ask Mida to generate them.

2. Add a Prototype frame from the components menu. You can also choose Interactive prototypes when you start with AI.

3. Click the empty frame and choose Convert wireframes.

4. In Convert wireframes to a prototype, tick the screens to include and click Convert.

5. Wait while MockFlow shows Building your prototype. The screens appear in the frame, linked together.

To start without wireframes, choose Generate with AI instead and describe the prototype. Turn on With images for a higher fidelity result with photos (this uses extra AI credits).

Click through, preview on your phone and edit with AI

• Interact: click buttons and links inside the frame to move between screens, or use the screen slider under it.

• Device frame: switch between Mobile, Tablet and Desktop.

• Play full screen: present the prototype without the board around it.

• Preview on your phone: scan the QR code to open the live prototype on your phone, or copy the link to share it.

• Edit with AI: turn on Select to edit, pick an element and choose Modify element, Modify screen or Add screen to generate a new screen linked from the one you are on.

Export the prototype to code

Choose Export to code in the frame's settings to download the prototype as a ZIP file. It contains standalone HTML with the screen navigation built in, plus a README.md. Images and icons load from their public URLs, so nothing else is needed. Open it locally or host it anywhere:

unzip Sign_up_flow_code.zip -d sign-up-flow    # the ZIP is named after your prototype
open sign-up-flow/index.html

Export to code is available for prototypes generated in MockFlow. Embedded Figma links stay on the board as a live view.

Availability

The Prototype frame is available on every plan, as part of wireframing and prototyping on your board. Generating and editing a prototype with AI uses AI credits; see pricing for the credits included in each plan.