Import from Figma

Introduction

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

Whether you're testing new screens, exploring interactions, or validating flows with stakeholders, Alloy helps you convert static Figma frames into working prototypes that feel like your real product.

Figma plugin (coming soon)

The Figma plugin will be the recommended way to import designs directly from Figma to Alloy.

Planned features:

• One-click import from Figma to Alloy
• Preserve layers and component structure
• Maintain design tokens and styles
• Sync changes back to Figma

Export and capture method

Until the plugin is available, you can capture Figma prototypes using the browser extension:

Steps:

1. Export your frame as PNG or view your Figma prototype in the browser
2. If using prototype view:
   • Configure your Figma prototype interactions
   • Generate the shareable prototype link
   • Open the prototype in your browser
3. Use the Alloy Browser Extension to capture the screen
4. Alloy recreates your Figma frame as an editable prototype

Best for:

• Capturing high-fidelity mockups from Figma
• Testing new features before development
• Creating prototypes that match your design system

Tips for Figma imports

• View your prototype in presentation mode for cleaner captures
• Frames with auto-layout import with better structure
• Export at 2x resolution for retina displays
• Break complex flows into individual frame captures
• Component instances from Figma maintain their relationships in Alloy

Design tokens

When importing from Figma:

• Color styles become color tokens
• Text styles become typography tokens
• Effect styles become shadow tokens
• Spacing values are automatically detected

Future integration

The upcoming Figma integration (see Integrations > Figma) will enable:

• Direct import without export
• Two-way sync between Figma and Alloy
• Component library mapping
• Automatic design system alignment