Choosing Between Sketch Native Prototyping and InVision Craft Plugin

Decision Overview

The decision is whether to create interactive prototypes directly inside Sketch using its built‑in prototyping tools or to extend Sketch with the InVision Craft plugin for sync‑driven prototypes, versioning, and developer handoff. The choice hinges on team workflow, offline needs, and reliance on InVision services.

Constraints and Requirements

• Offline work: Must be able to design and preview without an internet connection.
• Collaboration: Need real‑time commenting, version history, or spec generation for developers.
• Tool overhead: Prefer minimal plugin footprint and no extra account management.
• Compatibility: Must remain stable after Sketch updates.

Option Comparison

Feature	Sketch Native Prototyping	InVision Craft Plugin
Hotspot creation	Yes (canvas‑based)	Yes (same as native)
Basic animations	Yes (transition presets)	Yes (plus custom easing via Craft)
Offline capability	Fully offline	Requires internet for sync; editing works offline but changes won’t push until online
Account requirement	None	InVision account (free or paid)
Real‑time collaboration	No (manual export needed)	Yes (via InVision cloud)
Version history	No	Yes (InVision tracks each sync)
Spec sheets for developers	No (manual export or third‑party)	Yes (auto‑generated CSS, measurements, assets)
Plugin maintenance	None	Must match Craft version to Sketch release; may break after major Sketch updates

Trade‑offs

• Native prototyping is lightweight, zero‑cost, and works anywhere, but you lose InVision’s commenting, version control, and automated spec generation unless you export screens manually.
• Craft plugin adds real‑time sync, collaborative feedback, and developer‑ready specs, yet introduces dependency on an external service, an extra login, and potential version‑skew issues after Sketch upgrades.

Setting Up Native Prototyping

1. Open your Sketch file.
2. Select a layer or group that will act as a hotspot.
3. In the Inspector, click the “Prototyping” tab (look for the link icon).
4. Drag the arrow from the selected layer to the target artboard.
5. In the popup, choose the trigger (e.g., “Click”) and animation (e.g., “Instant”).
6. Repeat for additional hotspots.
7. Press the “Preview” button (top‑right) to test the flow within Sketch’s canvas.

No extra permissions are required; the feature is available in Sketch ≥ 45.

Setting Up the Craft Plugin

1. Open Sketch → Plugins → Manage Plugins.
2. Search for “Craft” and click Install.
3. After installation, launch Craft via Plugins → Craft → Sign In.
4. Enter your InVision credentials (or create a free account).
5. Once signed in, a Sync button appears in the toolbar.
6. To link a screen, select an artboard, click the “Craft” panel, and choose “Link to InVision”.
7. Make edits to any symbol or layer; when ready, click the Sync button to push changes to InVision.

Required permissions: ability to install plugins (admin on the workstation) and an active InVision account. Risk: if Craft version does not match your Sketch release, the plugin may fail to load or cause crashes.

Validating the Prototype

1. For native prototypes, use the Preview mode and click through hotspots; verify that each transition behaves as expected.
2. For Craft‑synced prototypes, after a Sync, open the InVision web dashboard, locate the updated screen, and confirm that the hotspots and animations appear.
3. Check the Spec mode in InVision (if enabled) to see generated CSS snippets and asset exports.

When to Choose Each Approach

Choose native prototyping when:

• Your team works primarily offline or in environments with limited internet.
• You need only click‑through flows without stakeholder commenting.
• You want to avoid extra accounts and keep the Sketch file size minimal.

Choose Craft plugin when:

• Your team already uses InVision for stakeholder review and design handoff.
• You rely on versioned specs and automated asset exports for developers.
• Real‑time commenting and change tracking are essential to your workflow.

Limitations and Checks

• Native prototyping does not generate developer specs; you must export screens or use a separate tool.
• Craft may become incompatible after a Sketch major version bump; verify plugin compatibility on the Craft release notes before updating Sketch.
• Reliance on Craft means any sync failure (network loss, auth issue) will leave InVision out of date; always confirm a successful sync by checking the InVision dashboard.

Practical Verification Checklist

1. Open Sketch and confirm the Prototyping tab is present (native) or the Craft toolbar icon appears (plugin).
2. Create a simple two‑screen flow with a clickable hotspot.
3. For native: preview in Sketch and verify navigation.
4. For Craft: click Sync, then log into InVision and see the updated screen with the same hotspot.
5. If using Craft, open Spec mode and ensure at least one CSS rule or asset is listed.
6. Record the outcome; if any step fails, revisit the plugin version or internet connection.