Concepts

Alloy's key concepts include captures, prototypes, components, workspaces and the command palette. Captures are screen and code grabs that provide starting points for prototyping in your product's visual style. Prototypes are high-fidelity UI representations for exploring concepts, communicating ideas, testing with users and reducing development risk before writing production code.

Captures

Captures are screen grabs and code grabs of your product's structure, look and feel. They provide context for Alloy to prototype in your product's visual style. Use captures as starting points for your prototyping.

Prototypes

Prototypes are high-fidelity representations of user interfaces and interaction patterns. They allow your team to experience how interactions might work in your product before writing production code.

Use prototypes to:

  • Explore new concepts and UI patterns
  • Communicate your ideas to your team or stakeholders
  • Test concepts with users
  • Reduce development risk by clarifying requirements

Components

Components are reusable elements captured from your product. You can select components directly when prototyping using Alloy's visual editing features. This allows you to prompt changes to specific elements on the page and fine-tune specific design aspects or interactions.

Alloy can also export components you've prototyped to share with your development teams. Developers can quickly add these React components to your app's frontend repository.

Workspaces

A workspace in Alloy is the main container for your team's projects, captures, prototypes, and integrations. Workspace admins manage team members, permissions, and workspace-wide settings.

When you sign up for Alloy, we automatically create a personal workspace for you. The current workspace displays in the top-left of Alloy's navigation bar. Select the workspace name to view settings, invite new members, or change to another workspace.

Command palette

The command palette is the fastest way to navigate Alloy. You can access all your prototypes, settings, and pages from the command palette. You can also take actions like navigating to different pages in Alloy and inviting new users to your workspace.

Launch the command palette with Cmd+K (on macOS) or Ctrl+K (on Windows/Linux).