Creating a Clickable Prototype with Craft (by InVision)

Topics Covered in This Sketch Tutorial:

Installing Craft, Creating an InVision Prototype & Linking Artboards, Creating Overlays & Fixed Headers, Updating the Design, Sharing the Prototype

Exercise Preview

Exercise Overview

In this exercise, you'll master the art of transforming static Sketch designs into dynamic, clickable prototypes using InVision. This process bridges the gap between concept and reality, allowing stakeholders to experience your design as an interactive interface rather than static screens. You'll create seamless navigation between screens, demonstrating exactly how your website or app will function in the real world.

This hands-on approach proves invaluable for client presentations and user testing sessions, where static mockups often fail to convey the full user experience. While Sketch has evolved to include native prototyping capabilities, InVision's Craft plugin remains the industry standard for comprehensive prototype functionality. The robust feature set and collaborative tools make it an essential skill for any serious UX/UI professional.

Creating an InVision Account

If you already have an InVision account, skip ahead to the next section.

Before diving into prototyping, you'll need an InVision account. The free tier accommodates up to 3 active projects simultaneously—perfect for learning and small-scale work. While you can delete older projects to make room for new ones, consider upgrading to a paid plan if your workflow demands multiple concurrent prototypes. This limitation becomes particularly relevant for agencies or freelancers juggling several client projects.

Navigate to invisionapp.com/signup in your web browser and create your free account. When prompted during signup, select Solo rather than Teams unless you're collaborating with a specific organization from the start.

Installing InVision's Craft Plugin into Sketch

If you're in a Noble Desktop classroom, we should already have Craft installed, so skip ahead to the next section.

InVision operates as a sophisticated web application that transforms static designs from Sketch and other design tools into interactive prototypes. The magic happens through their Craft plugin, which creates a seamless bridge between Sketch and InVision's cloud-based platform. This integration allows you to build prototypes directly within your familiar Sketch environment, then sync them instantly to InVision for sharing and advanced features.

The Craft plugin has evolved significantly since its initial release and now represents one of the most mature design-to-prototype workflows available. Here's how to get it installed:

1. If Sketch is currently running, quit the application completely.
2. Navigate to invisionapp.com/craft in your web browser.

3. Download the Craft plugin installer using one of these methods:

   • If you're not logged into your InVision account, enter your email address to receive the download. Check your email for the download link if it doesn't start automatically.
   • If you're already logged into your InVision account, you should see the download button immediately available.
4. Run the Craft installer and follow the setup prompts.

5. The installation creates CraftManager, a menubar application that handles plugin installation and updates. Look for the Craft icon in your menubar to access it.

   

6. In the CraftManager interface, click Install if the plugins weren't automatically installed into Sketch.

7. Launch Sketch to begin working with your newly installed Craft functionality.

Creating a Clickable Prototype with InVision's Craft

Now comes the exciting part—bringing your static designs to life. InVision offers two approaches to prototyping: working directly in their web application, or using the Craft plugin to create interactions within Sketch before syncing to InVision for sharing and advanced features. The plugin approach streamlines your workflow by keeping you in your primary design environment while still providing access to InVision's powerful collaboration tools.

1. In Sketch, navigate to File > Open Local Document.
2. Browse to Desktop > Class Files > Sketch Class and double–click InVision Craft Prototyping.sketch to open the practice file.
3. Position your view so you can see both the Home Page artboard and the Autumn Collection artboard to its right. This visual connection helps when creating links between screens.
4. Let's create your first interactive element. On the Home Page, select the black Shop New Collection button.

5. Press the K key to initiate link creation. This keyboard shortcut provides the fastest way to add interactivity to any selected element.

   NOTE: This shortcut replaced the original C key when Sketch introduced Components and claimed that keystroke. You can also access this via Craft > Prototype > Add Hotspot to Layer.

6. An arrow cursor appears, indicating you're in link mode. Click on the Autumn Collection artboard to establish the connection.

7. In the link configuration panel, set Gesture to Tap.

   NOTE: While Desktop offers a Click gesture, the Mobile Tap gesture provides access to the smooth transitions that make prototypes feel polished and professional.

8. Set Transition to Slide Left to create a natural forward navigation feeling.
9. Click Add Link to finalize the interaction.
10. Let's build on this foundation with another connection. Ensure you can see both the Autumn Collection artboard and the Product Page to its right.
11. On the Autumn Collection artboard, select the Distressed Denim Jacket image. Notice that both the photo and text become selected—this happens because they're grouped within a symbol, which is actually beneficial for creating larger, more accessible touch targets.
12. Press the K key to enter link mode.
13. Click on the Product Page artboard to establish the connection.
14. Verify that Gesture is set to Tap.
15. Set Transition to Slide Left to maintain consistency with your navigation pattern.
16. Click Add Link to complete the connection.
17. Now let's preview your work in action. Click anywhere on the Home Page artboard—the selected artboard determines where the preview begins.

18. In Sketch's interface, locate the Craft plugin icons in the column to the left of the Inspector panel. Click the Player icon to launch the preview.

    

19. When prompted to save, always do so. This ensures your prototype links are preserved.
20. In the preview window, click Shop New Collection to advance to the next screen. Notice the smooth slide transition.
21. Click the Distressed Denim Jacket image to proceed to the product page. Excellent—your prototype is taking shape!
22. Test the navigation again by pressing the Left Arrow key twice to return to the Home Page, or use the navigation menu at the top of the preview window.
23. Navigate through your prototype sequence again: click Shop New Collection, then the Distressed Denim Jacket image.
24. Close the preview window and click outside the artboards to deselect everything.
25. Click the Player button again.
26. Notice that the Nav Menu appears instead of the Home Page. This happens because the preview always starts with the topmost artboard in the Layers panel sidebar.
27. Close the preview window and select the Nav Menu artboard in the Layers panel.
28. Choose Arrange > Send to Back to reorder the artboards.
29. Click outside the artboards to deselect, then click the Player button again.
30. Perfect—the Home Page now appears first, since it's positioned as the top artboard.

31. Close the preview window.

Wiring up the Navbar & Creating a Nav Menu Overlay

Professional prototypes require comprehensive navigation systems. Users expect to return to the home page from any screen, and the logo typically serves this function across most web and mobile interfaces. By adding this functionality to the symbol itself, we ensure consistent behavior across all instances—a perfect example of how Sketch's symbol system amplifies prototyping efficiency.

1. On any artboard, double–click the Pulse logo to enter symbol editing mode. This allows you to modify the master symbol that appears across all screens.
2. Click on a blank area of the canvas to ensure nothing is selected.
3. Select the Pulse logo within the symbol.
4. Press the K key to initiate link creation.
5. In the options bar that appears at the top of the Sketch canvas, click Artboard.

6. Configure the link with these settings:

   • Ensure the top menu reads Link to a screen.
   • Click the Select Artboard dropdown (ignore that it appears grayed out) and choose Home Page.
   • Set Gesture to Tap.
   • Set Transition to Slide Right to create a natural "back" feeling that opposes the forward navigation.
   • Click Add Link.

7. Now let's implement the navigation menu functionality. Mobile interfaces commonly use hamburger menus to conserve screen space, and the content should overlay the current screen rather than replace it entirely. This preserves context and feels more natural to users.

   Select the three-lined hamburger menu icon positioned to the left of the logo.

8. Press the K key to enter link mode.
9. In the options bar at the top of the Sketch canvas, click Artboard.

10. Configure the overlay with these specific settings:

    • Change the top dropdown from Link to a screen to Link as Overlay.
    • Click the Select Artboard menu and choose Nav Menu.

    • Apply these overlay settings for professional behavior:

      

    • Click Add Link.

11. Click the Back to Instance button to exit symbol editing mode. If this button has disappeared, click the Screens page tab at the top of the Layers panel.
12. Navigate to the Nav Menu artboard and click once on the navbar to select the symbol instance.

13. Here's where Sketch's override system shines in prototyping contexts. The three-lined menu icon is itself a symbol, and we've created a matching close button symbol with identical dimensions. This allows us to swap them using overrides, creating context-appropriate iconography.

    In the Inspector panel, locate the Overrides section. Click the dropdown menu next to Menu Icon and select close (you may find it under This Document > icon > close).

14. Now we need a way to dismiss the navigation menu. The Craft plugin's integration has limitations—we can't add links within nested symbols that will properly sync. Instead, we'll create an invisible hotspot over the close button, which is a common technique for complex interactive prototypes.

    Zoom in on the X close button on the Nav Menu artboard for precise positioning.

15. In the toolbar, click the Insert button and select Hotspot.
16. Drag to create a rectangle over the X close button. Don't worry about precision initially—you'll refine the positioning in the next step.
17. Press the Esc key to dismiss Sketch's native prototyping dialog, since we're using Craft for consistency.
18. Adjust the hotspot's size and position to precisely cover the X close button. This invisible shape defines the tappable area and won't appear in the final prototype.
19. With the hotspot selected, press the K key to add a Craft link.

20. In the options bar at the top of the Sketch canvas, click Link Back/Close, then configure:

    • Set Gesture to Tap.
    • Set Transition to Slide Up for a natural dismissal animation.
    • Click Add Link.
21. Time to test your complete navigation system. Click outside the artboards to ensure nothing is selected.
22. Click the Player button to launch the preview.
23. Click the three-lined menu icon in the top-left navbar to reveal the navigation menu.
24. Notice how the transparency applied to the black background is preserved, allowing the current page to show through the overlay—this creates visual continuity and professional polish.
25. Click the close button (X) to dismiss the menu with the slide-up animation.
26. Navigate to another screen by clicking the Shop New Collection button.
27. Test the return navigation by clicking the Pulse logo—it should smoothly slide back to the Home Page.
28. Close the preview window.

29. Choose View > Zoom To > Fit Canvas to see the full prototype layout.

Creating an InVision Project & Uploading Artboards

While Sketch's preview functionality is excellent for quick testing, sharing your prototype with clients, stakeholders, or team members requires InVision's web-based platform. This cloud-based approach ensures consistent viewing across devices and browsers, while providing collaborative features like comments, version history, and user testing tools that are essential for professional projects.

1. Before syncing, ensure no artboards are selected—Craft will only upload selected artboards if any are active. Click in an empty area outside all artboards to deselect everything.

2. In the Craft panel's column of icons, click the Sync icon to begin the upload process.

   

3. The CraftManager application will appear. If prompted to sign in, use your InVision credentials.

4. Configure your new InVision project with these settings:

   • Publish to: Prototype
   • Choose Create new, and name it Pulse
   • Set the device type to iPhone for optimal mobile preview.
   • Ensure All artboards on page is selected to upload your complete prototype.
   • Click Publish to begin the sync process.

5. Once the upload completes, access your web-based prototype by clicking the project name to open it in your default browser.

   If you closed the CraftManager before doing this, return to Sketch, click the Sync icon , and click Open on web in the CraftManager interface.

6. Your browser should display the InVision interface with each Sketch artboard converted to an InVision screen. This transformation preserves all your interactive links while adding InVision's collaborative and presentation features.

   If prompted to log in, do so and then return to Sketch to click the Sync icon and Open in web button again.

7. Hover over the Home Page thumbnail and click View Screen to enter the interactive prototype.
8. If InVision displays introductory tips, click Skip Tips to proceed directly to your prototype.
9. The design appears within a mobile device frame. Scroll down to see content that extends beyond the initial viewport—this scrolling behavior mimics real device usage.
10. Scroll back to the top and notice how the mobile status bar (showing time and battery) slightly overlaps your design. This is a common issue that we'll address.
11. Locate the ••• button (or gear icon in older InVision versions) in the bottom-right area and click it to open Configuration settings.
12. Enable My design starts below the status bar to properly align your design within the device frame.

13. Click Save to apply the change.

Creating a Fixed Header

Mobile users expect navigation elements to remain accessible as they scroll through content. InVision's fixed header feature replicates this native app behavior, ensuring your navigation bar stays visible regardless of scroll position. This enhancement significantly improves usability and makes your prototype feel more like a finished application.

1. Scroll down through the home page content and observe how the navbar disappears as you scroll. While this matches your Sketch design exactly, it doesn't reflect optimal mobile UX patterns where navigation should remain accessible.

2. At the bottom of the InVision interface, click the Build mode B button or press the B key to enter editing mode.

3. Scroll to the top of the design preview. You'll see a Fixed Header indicator in the top-right with a three-lined drag handle. Drag this handle down to the bottom edge of the black navbar (approximately 120 PX).

   TIP: Click directly on the handle and type the exact pixel value if you prefer precise positioning over dragging.

4. Navigate to the Autumn Collection screen using the Right Arrow key, then drag the Fixed Header handle to the same position.
5. Press Right Arrow once more to reach the Product Page screen and repeat the fixed header positioning.
6. Return to preview mode by clicking the Play mode P button or pressing the P key.
7. Scroll through the design and notice how the navbar now remains fixed at the top—a much more professional and user-friendly experience.

8. Test your logo navigation by clicking the Pulse logo to return to the home page, confirming that all functionality remains intact.

Updating the Design

Real projects involve constant iteration and refinement. One of Craft's most powerful features is its ability to sync design changes seamlessly between Sketch and InVision while preserving all your interactive work. This workflow enables rapid iteration without losing the time invested in prototyping functionality—a crucial advantage in fast-paced design environments.

1. Keep your web browser open with InVision running—you'll return to verify the changes momentarily.
2. Switch back to Sketch.
3. If Craft link indicators are visible, press the X key to hide them for cleaner design editing.
4. On the Autumn Collection artboard, double–click the text New Autumn Attire to enter edit mode and change it to New Fall Fashion.
5. Click the Sync button to initiate the update process.
6. Craft intelligently detects which artboards have changed since the last sync, displaying only the modified screens. Click Publish to push the update to InVision.
7. Return to InVision in your web browser.

8. Navigate to the Autumn Collection screen using the arrow keys or by clicking through your prototype navigation.

   The updated text New Fall Fashion should appear automatically, though you may need to wait a moment for the change to propagate. Most importantly, notice that all your interactive prototype functionality remains perfectly intact—the power of integrated design-to-prototype workflows.