Prototyping tools

Sprig offers prototype integrations with all major design tools. With this feature, you can embed any wireframe, mockup, or prototype into a Sprig Concept & Usability Test and capture rich user feedback prior to launch.

In addition to the tools below, you can also insert a prototype from any live embeddable website, such as Google Drive, into your concept test by following the steps here.

  1. Figma
  2. Sketch
  3. AdobeXD
  4. Miro
  5. InVision
  6. Framer
  7. Marvel
  8. Protopie
  9. Justinmind
  10. Axure

📘

Info

  1. Some website pages may not be possible to embed due to the x-frame-options setting, which exists in response headers and acts as a security measure. When entering a prototype link, text below the input field will provide immediate feedback if your prototype link has any obstacles to being embedded.

  2. If you update an embedded prototype in a test, any changes will be immediately reflected in any test questions that reference that prototype. Consider using a dedicated copy of the prototype for your test to minimize unintended consequences.

Figma

1) Open the desired design file and click the ▷ Play button in the upper right.
2) In the new tab, click Options and adjust the settings to "Fit the screen" so the prototype displays as desired.

596596

3) Click Share prototype. In the modal that appears, select Copy link.

460460

Sketch

1) Open the desired document in the Sketch web client.
2) Open the Share… menu and ensure Public users can View the document.

514514

3) Go to the Prototypes view on the right.

588588

4) Navigate to the desired prototype and open the options menu to select Copy link to Prototype with Hotspots.

AdobeXD

1) Select the Prototype tab and choose the desired Flow you intend to display.

2) Select the Share tab and in the Link Settings tab on the right, set the View Setting to User Testing and Link Access to Anyone with the link.

234234

3) Select Update Link, allow some time for the link to update, then click on the Link icon to copy.

235235

Miro

1) Click the Share button in the top right corner and ensure anyone with the link Can view the project.

12261226

2) Click </> Get embed code in the lower left corner and choose either Free navigation to allow users to see the entire board or Presentation to walk users through a set flow.

12761276

3) As Miro’s behavior is to copy all of the iframe code, copy the block to another tab or sticky note and extract the src link as shown:

554554 11041104

InVision

1) Hover over the desired prototype and select View screen.

402402

2) Click the gear in the bottom right labeled Global Appearance and ensure Zoom/Scroll Behavior is set to Scale Down to Browser Width.

892892

3) Click the Share button on the bottom right, select the Public tab, then copy the public link.

Framer

1) Press the Publish button in the top right corner, and then the Update button to ensure the live design is up-to-date.

2) Open the published link and copy its URL.

Marvel

1) Open the desired project and go to Project Settings in the top right.

646646

2) Ensure that Disable resizing images is turned off.

11021102

3) Click the Share button, go to the Embed tab and copy the source link as shown:

10421042

Protopie

1) Press the Cloud icon in the top right corner of the app to save the prototype to an online location.

718718

2) Click into the cloud link for the prototype.

3) In the View Options menu, ensure that Scale to Fit is selected and ProtoPie UI is deselected.

974974

Justinmind

1) Go to File > Share with reviewers and developers > Settings.

669669

2) Ensure that Screen Content is set to Expand to browser’s width and Scale is set to Fit to screen size.

392392

3) Click the Up arrow in the top right corner to publish the prototype, go through the screens regarding sharing and comments, then click the View in my account button.

916916

4) Ensure that Public prototype is set to ON and click Get link to get the prototype’s URL.

728728

📘

Info

Justinmind does not have robust support for scaling mobile prototypes. To allow users to zoom in/out and adjust their view as needed, go to File > Share with reviewers and developers > Settings, and ensure Show device tools is selected.

393393

Axure

1) Click the Share button in the top right corner and click Update, then click Share again and click the link displayed.

263263

2) On the new page, click the dropdown next to the view scale percentage and select Scale to Fit.

149149

3) Optional: Click the three vertical dots in the top right to determine if hotspots, comments, or note markers are shown in the prototype.

4) Copy the resulting URL from your browser’s search bar.

448448