MagicInput transforms static Figma designs into fully functional, interactive text input prototypes without requiring any code. It enables designers to create realistic form experiences with working keyboard input, backspace and delete functionality, and dynamic placeholder behavior that responds to user interaction.
Install MagicInput from Figma Community
Core Capabilities
Keyboard Input Support
MagicInput enables direct keyboard typing within Figma prototypes. Users can type using all letters (A-Z), numbers (0-9), and common punctuation marks. The plugin also supports Shift+key combinations for uppercase letters and special characters including standard symbols like !, @, #, $, %, and more.
Backspace Functionality
Characters can be deleted naturally using the Backspace key. MagicInput maintains a 3-level undo history, allowing backspace to restore previous input states. When all text is removed, the placeholder automatically reappears in the input field.
Dynamic Placeholder Behavior
Placeholder text automatically hides when users begin typing and reappears when all text is deleted. The plugin handles smooth visibility transitions between value and placeholder states, creating a more polished user experience during prototyping.
Multiple Inputs Per Screen
Designers can add an unlimited number of input fields to a single frame. Each input operates independently with its own state, making it suitable for login forms, registration flows, checkout pages, and any multi-field interface.
Pre-built Templates
MagicInput includes ready-to-use input configurations for common design patterns:
- Login - Email and Password fields
- Register - First name, Last name, Email, and Password
- Shipping - Full name, Address, City, and Postal code
- Feedback - Subject and Message fields
Custom Styling Options
While MagicInput provides a default input style, designers can link any Frame, Component, or Instance from their existing design as the input template. The plugin clones the custom design and enhances it with interactive functionality, maintaining visual consistency with your design system.
Smart Reaction Merging
When adding new inputs to a frame that already contains MagicInput components, the plugin intelligently merges keyboard interactions rather than creating duplicates. It also handles cleanup of orphaned reactions when inputs are removed from the design.
How to Use MagicInput
- Select a target frame - Choose the frame on your canvas where you want to add inputs
- Configure your inputs - Set labels, default values, and placeholders for each field
- Click Insert - The plugin generates interactive input components with Figma Variables for state management, keyboard event reactions for every key, and conditional logic to route input to the focused field
Technical Implementation
MagicInput operates using Figma's native prototyping features without external runtime dependencies. The plugin leverages Figma's built-in Variables and Conditional Actions systems, ensuring compatibility with Figma's prototype player. It supports Frames, Components, and Sections as target containers.
Practical Applications
MagicInput addresses several common prototyping scenarios:
- Authentication flows - Create realistic login and signup experiences for user testing
- Multi-step forms - Build complex form sequences with proper input behavior
- E-commerce checkout - Prototype complete checkout experiences with working form fields
- Mobile app prototypes - Add text input functionality to mobile interface designs
- User testing sessions - Conduct more accurate usability tests with functional forms
- Client presentations - Demonstrate designs with working interactive elements
Frequently Asked Questions
What is MagicInput for Figma?
MagicInput is a Figma plugin that transforms static designs into functional, interactive text input prototypes. It enables real keyboard typing, backspace functionality, and dynamic placeholder behavior without requiring any code.
How does MagicInput work?
MagicInput uses Figma's native Variables and Conditional Actions to create interactive input components. You select a target frame, configure your inputs with labels and placeholders, and the plugin generates all the necessary keyboard event reactions automatically.
Can I use my own custom input designs?
Yes. MagicInput supports custom styling by linking any Frame, Component, or Instance from your design as the input template. Your custom design is cloned and enhanced with interactive functionality.
Does MagicInput require coding knowledge?
No coding is required. MagicInput works entirely within Figma using native prototyping features including Variables and Conditional Actions.