How to Integrate Sketch with InVision for Prototyping

Edited 2 days ago by ExtremeHow Editorial Team

SketchInVisionPrototypingIntegrationDesignWorkflowMockupsTestingUXTools

In the world of digital design, prototyping has become an essential part of the design process. A powerful combination for designers who want to create stunning prototypes is to integrate Sketch with InVision. In this guide, we'll walk you through the process of integrating Sketch with InVision for prototyping. We'll explain each step in detail so you have a full understanding, as well as provide examples to help solidify your knowledge.

Understanding Sketch and InVision

Sketch is a popular design tool used by many designers for UI/UX design purposes. It provides a flexible and efficient platform for creating digital products, including websites, apps, and more. Sketch is praised for its vector-based design capabilities, allowing designers to easily create scalable and high-quality designs.

InVision, on the other hand, is a prototyping tool that allows designers to create interactive and clickable prototypes from static designs. It helps bridge the gap between design and development, by providing a platform where designers can demonstrate how the final product will work. This is achieved by adding hotspots and interactions to the design, which in turn makes it easier for stakeholders and developers to understand the user experience.

Why integrate Sketch with InVision?

Integrating Sketch with InVision allows you to take advantage of the strengths of both tools. By doing so, you can leverage Sketch's design capabilities and combine them with InVision's prototyping features to create a coherent and interactive prototype. This integration helps streamline workflows, reduce time spent on unnecessary tasks, and enhance collaboration between team members.

Prerequisites for integration

Requirements:

• A computer with macOS (Sketch only works on macOS)
• Sketch is installed on your computer
• An InVision account

Step-by-step integration process

1. Design your interface in Sketch

Before integrating with InVision, you must complete your design in Sketch. Make sure your design is polished and ready for prototyping. Use artboards to define the different screens and states of your application. Make sure all components are in place, and the design is logically structured.

Example:

Design the app's login screen in Sketch:
- Create an artboard with size 375x667 pixels.
- Add text fields for username and password.
- Include a login button.
- Use symbols for repeated components, such as buttons, to ensure consistency.

2. Create a new project in InVision

To begin the integration process, you must first create a project in InVision. Follow these steps:

• Log in to your InVision account.
• Click the “+ Create New” button.
• Select “Prototype” from the given options.
• Enter a project name and select the prototype type (e.g., desktop, mobile, or tablet).
• Click Create to set up the project.

3. Install the Craft Plugin for Sketch

For seamless integration, you need to install the Craft plugin, which is an InVision tool that connects Sketch to InVision.

• Visit the InVision Craft Plugins page.
• Download the Craft Manager app.
• Open Craft Manager and install the Craft plugin for Sketch.

4. Start Craft Sync in Sketch

After installing Craft, you'll see the Craft toolbar in Sketch. Use it to sync your designs with InVision.

• Open the Sketch app and load your design file.
• Find the Craft toolbar and click the “Sync” icon.
• Sign in with your InVision credentials when prompted.
• Select the project created in InVision to sync your artboards.
• Click “Sync” to upload your design to InVision.

5. Manage artboards and screens in InVision

Once your artboards are synced to InVision, they will appear as screens in your project. You can manage these screens to create an interactive prototype.

• Log into your InVision account and go to your project.
• Open the project to view the uploaded screen.
• Reorder, duplicate, or delete screens as needed to organize your prototype.

6. Add interactivity with hotspots

To make your prototype interactive, you need to add hotspots. These are clickable areas that simulate interactions like pressing a button or a screen transition.

• In InVision, select the screen where you want to add the interaction.
• Hover your mouse over the screen and click “+ New Hotspot.”
• Create a hotspot area above the element you want to make interactive (such as a button).
• After clicking on the hotspot, choose the destination screen to transition to.
• Set the gesture (e.g., click, swipe) and animation for the transition.

7. Test and share your prototype

Once your prototype is fully set up with interactions, it is important to test it. Thorough testing ensures that your prototype works as expected and provides a good user experience.

To test the prototype:

• Navigate to the screen and click on the hotspots to simulate the user journey.
• Note any problems or inconsistencies and go back to the sketch if any changes are necessary.

To share a prototype:

• Click the “Share” button in the upper-right corner of your InVision project.
• Customize share settings to set permissions and access for your stakeholders.
• Copy the share link and distribute it to your team, stakeholders, or customers.

Troubleshooting common problems

Problem: Craft Sync not working

If Craft Sync is not working properly, try the following:

• Make sure Craft Manager is up to date.
• Check your internet connection.
• Reinstall the Craft plugin if necessary.

Problem: Artboards aren't updating

If your artboards in InVision aren't reflecting the changes you made in Sketch, make sure:

• You've synced the latest version of Sketch to InVision.
• Your artboards in Sketch are within the canvas area.

Problem: Hotspots not working

If hotspots are not working as expected, double-check the following:

• Make sure that hotspots on interactive elements are created correctly.
• Verify that the destination screen and gestures are set correctly.

Tips for effective integration

• Keep design files organized with a clear naming convention.
• Regularly update the prototype based on feedback and testing.
• Take advantage of InVision’s commenting features for effective collaboration.
• Use symbols in sketches for consistency and quick design updates.

Conclusion

Integrating Sketch with InVision for prototyping is a powerful way to bring your designs to life. By following the detailed steps outlined in this guide, you can create effective and interactive prototypes that help visualize user experiences and streamline the design process. This integration can facilitate better communication between designers, developers, and stakeholders, ensuring that the final product meets the intended design vision.

Remember to iterate your prototype based on feedback and testing insights to refine the user experience and create a successful digital product.

  Share This Article

If you find anything wrong with the article content, you can request an update