Interface design

Create a prototype and export a design

A prototype connects screens through an interactive walkthrough. Use it to test how a person uses a design. A diagram connector represents a relationship. A prototype link defines a screen transition.

1. Create the frames for the walkthrough and give them unique names.
2. Use prototype links to join the starting control or frame to the destination screen.

3. Complete the walkthrough, including the way back where it applies.
4. Choose Play and test the prototype. Check that each action opens the intended destination.
5. Import HTML/CSS into frames to reuse a design, or export a frame as HTML or React to hand off code. Review the result separately.