Import from Subframe

Introduction

Alloy makes it easy to import layouts from Subframe and transform them into editable prototypes that match your existing product.

Whether you're testing new page layouts, exploring component variations, or validating designs with your team, Alloy helps you convert Subframe projects into prototypes that align with your product's design system.

Capture screen from Subframe (recommended)

The Capture Screen method is the most accurate way to import your Subframe layout into Alloy. It uses the Alloy Browser Extension to replicate your page precisely.

Steps:

1. Download and install the Alloy Browser Extension
2. Open your Subframe project preview in a supported browser (Chrome, Arc, Edge, Brave)
3. Click Capture Screen in the Alloy extension
4. Wait while Alloy recreates your Subframe layout in the editor
5. Start prototyping using:
   • Chat interface – describe changes in natural language
   • Visual editing – select components and modify them directly

Best for:

• Preserving Subframe's responsive grid layouts
• Capturing component hierarchies from your Subframe project
• Maintaining the visual fidelity of your design

Upload your Subframe link

If your Subframe project has a public preview URL, you can import it directly into Alloy using the Upload Link feature.

Steps:

1. Publish your Subframe project and copy the public URL
2. Paste it into Alloy's Upload Link field
3. Alloy will recreate your Subframe layout
4. Edit the prototype using prompts or visual tools

Best for:

• Quickly importing published Subframe pages
• Testing layouts without installing the extension

Tips for Subframe imports

• Subframe's component hierarchy transfers cleanly to Alloy
• Responsive grid systems from Subframe are maintained
• Interactive states may need manual setup in Alloy
• Capture desktop and mobile breakpoints separately for best results
• Subframe's spacing and typography scale well to Alloy's design tokens