InVision

Overview

InVision provides a platform for digital product design and development teams, focusing on collaborative ideation, prototyping, and design system management. Established in 2011, InVision's tools are used across various stages of the product lifecycle, from initial brainstorming to final handoff. The platform aims to streamline workflows and improve communication among designers, developers, and stakeholders.

The primary components of the InVision platform include InVision Freehand and InVision DSM. InVision Freehand is a digital whiteboarding tool designed for real-time collaboration, supporting activities such as brainstorming, wireframing, sprint planning, and diagramming. It allows multiple users to contribute simultaneously, using a range of drawing tools, sticky notes, and templates. Freehand is often utilized in remote or hybrid work environments to replicate the collaborative experience of a physical whiteboard.

InVision DSM (Design System Manager) is a centralized repository for design system assets, documentation, and code components. It enables teams to define, manage, and distribute design tokens, components, and guidelines, aiming to ensure consistency across products and platforms. DSM integrates with design tools and development environments, facilitating the synchronization of design specifications with implemented code. This centralized approach to design systems can help reduce design debt and accelerate development cycles by providing a single source of truth for design elements.

InVision's offerings are designed for product teams, UX/UI designers, product managers, and developers. The platform is particularly suited for organizations that require robust real-time collaboration features for remote teams or those looking to implement and scale a comprehensive design system. Its compliance certifications, including SOC 2 Type II, GDPR, CCPA, and ISO 27001, address enterprise security and data privacy requirements.

While InVision supports various design activities, its strength lies in facilitating the collaborative aspects of the design process and maintaining design consistency through its DSM product. For instance, teams can use Freehand to conduct virtual workshops and then transition approved designs into DSM for standardization and implementation. This integration between ideation and systemization is a core aspect of InVision's value proposition. Other platforms, such as Figma's FigJam, offer similar real-time whiteboarding capabilities, indicating a shared industry focus on synchronous collaboration in design.

Key features

• InVision Freehand: A collaborative online whiteboard for brainstorming, wireframing, sprint planning, and diagramming with real-time multi-user editing.
• InVision DSM (Design System Manager): A centralized platform for creating, managing, and distributing design system components, documentation, and code snippets.
• Prototyping: Tools to create interactive prototypes from static design screens, allowing for user testing and feedback collection.
• Developer Handoff: Features to inspect design specifications, extract assets, and generate code snippets for developers.
• Version History: Automatic tracking of changes and ability to revert to previous versions of Freehand documents and design system components.
• Templates: Pre-built templates for common use cases like journey maps, flowcharts, and agile ceremonies within Freehand.
• Integrations: Connectivity with popular design tools (e.g., Sketch, Photoshop) and project management platforms (e.g., Jira, Trello).
• Security and Compliance: Adherence to enterprise security standards, including SOC 2 Type II, GDPR, CCPA, and ISO 27001.

Pricing

InVision offers a free tier for individuals and various paid plans for teams and enterprises. Pricing for Freehand Pro is based on active users per month, with annual billing options often providing a discount. InVision DSM pricing is typically quoted directly based on organizational needs.

For detailed and up-to-date pricing information, refer to the official InVision pricing page.

Common integrations

• Sketch: Sync design files and artboards to InVision for prototyping and collaboration.
• Adobe Photoshop/XD: Upload designs for prototyping and feedback loops.
• Figma: Integration with Freehand for linking and embedding Figma files.
• Jira: Embed Freehand documents directly into Jira issues for project tracking and context.
• Microsoft Teams: Share Freehand documents and collaborate within Teams channels.
• Slack: Receive notifications and share Freehand links directly in Slack.
• Confluence: Embed Freehand boards into Confluence pages for documentation and knowledge sharing.
• Zoom: Facilitate collaborative sessions with Freehand during Zoom meetings.
• Google Workspace (Drive, Docs): Embed and share Freehand files within Google applications.

Alternatives

• Figma: A web-based interface design tool with strong collaborative features, including design, prototyping, and whiteboarding (FigJam).
• Miro: An online collaborative whiteboard platform for visual collaboration, brainstorming, and diagramming.
• Whimsical: A suite of visual workspace tools including wireframes, flowcharts, sticky notes, and documents.
• Adobe XD: A vector-based user experience design tool for designing and prototyping websites and mobile apps.
• Sketch: A macOS-only vector graphics editor primarily used for UI and UX design.

Getting started

To begin using InVision Freehand, you can create a new Freehand document directly from the web interface. There is no SDK or API to set up for basic usage, as it is a browser-based application. The following steps outline how to create your first Freehand board:

1. Navigate to the InVision Freehand website and sign in or create an account.
2. From your dashboard, select the option to create a new Freehand.
3. Choose a blank canvas or select from a variety of pre-built templates for specific activities like brainstorming or journey mapping.
4. Once the Freehand board is open, you can invite collaborators by sharing a link.
5. Begin adding elements such as sticky notes, shapes, text, and images using the toolbar.

For developers looking to integrate InVision DSM with their development workflow, the process typically involves referencing the design system's published components and tokens. While InVision does not provide a public client-side SDK for Freehand interaction, DSM integration usually involves consuming design tokens or component libraries. Here's a conceptual example of how you might consume a design token from a published design system (this is illustrative and depends on the specific DSM setup and how tokens are exposed, e.g., via CSS variables or JSON files):

/* Example: Consuming a design token from a published InVision DSM */

/* Assuming your build process or framework makes DSM tokens available */
:root {
  --color-primary: #007bff; /* Example: Mapped from DSM 'brand.primary.default' */
  --font-size-body: 16px;   /* Example: Mapped from DSM 'typography.body.size' */
  --spacing-medium: 16px;  /* Example: Mapped from DSM 'spacing.medium' */
}

body {
  font-family: 'Inter', sans-serif;
  font-size: var(--font-size-body);
  color: var(--color-text-default);
  margin: var(--spacing-medium);
}

.button-primary {
  background-color: var(--color-primary);
  color: white;
  padding: var(--spacing-medium) calc(var(--spacing-medium) * 2);
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

This CSS example demonstrates how a developer might use CSS variables that are populated with values derived from an InVision DSM. The actual implementation would depend on how the design system tokens are exported and integrated into the project's build pipeline. For detailed instructions on integrating with InVision DSM, developers should consult their organization's specific design system documentation or the InVision DSM resources.