Import from Magic Patterns

Import Magic Patterns designs into Alloy for editable prototypes. Capture AI-generated patterns and transform them. Start prototyping now.

Introduction

Alloy makes it easy to import patterns from Magic Patterns and transform them into fully editable prototypes that match your existing product's design system.

Whether you're testing new features or exploring UI patterns, Alloy lets you capture Magic Patterns designs and modify them to align with your product's look and feel.

Capture screen from Magic Patterns (recommended)

The Capture Screen method is the fastest and most accurate way to import your Magic Patterns design into Alloy. It uses the Alloy Browser Extension to replicate your pattern with pixel-perfect precision.

Steps:

  1. Download and install the Alloy Browser Extension
  2. Open your Magic Patterns design in a supported browser (Chrome, Arc, Edge, Brave)
  3. Click Capture Screen in the Alloy extension
  4. Wait a few moments while Alloy recreates your design inside the editor
  5. Start prototyping using:
    • Chat interface – type natural language prompts to make changes
    • Visual editing – select specific components and update them instantly

Tips for Magic Patterns imports

  • Ensure your Magic Patterns design is fully rendered before capturing
  • Magic Patterns' prototypes import as prototypes in Alloy
  • Use Alloy's design tokens to maintain consistency with your existing app
  • Consider capturing multiple pages to build a comprehensive prototype