This feature is currently in beta and available for Pro members only.

​
How Subframe prototyping works

Subframe uses annotations to transform static designs into interactive prototypes. Annotations are comments on design elements that explain how they should function. Annotations serve two purposes:
  • They appear as comments in generated code for developer handoff
  • AI uses them to understand functionality and build interactive prototypes

​
Creating a prototype

  1. Complete your designs in design mode
  2. Switch to Prototype mode using the toggle in the top-right corner
  3. Click on elements in your design and add annotations describing functionality
  4. Add more pages to your prototype if needed via the right panel
  5. Click the Build button to build the prototype

​
Updating a prototype

​
Changing styles

  1. Make changes in design mode, then go back to prototype mode
  2. Click Update to apply changes to your existing prototype

​
Changing functionality

  1. Update the annotations on the design elements
  2. Click Update to apply changes to your existing prototype

​
Fixing a broken prototype

For small functionality changes, use Quick fix to update the prototype.
  1. Click Quick fix
  2. Describe the changes you want to make
  3. AI will apply targeted updates to your prototype
Sometimes the prototype gets stuck or needs a fresh start. To do this, click Rebuild to generate the prototype from scratch.