Design once, use everywhere.
Stop redrawing and start reusing UI, animation and rich media elements. Update the master to reflect changes across the board, or override a single instance. Interactive components come with built-in functionality, though you can dig into React to customize logic, real data, dynamic embeds and more.
Create a master component with a single click. Then, alter the master to see changes reflected across all instances. With smart overrides, you can even fix the size and position of an instance without breaking its link to the master.
Simply drag and drop.
Open the Components panel for an organized, searchable and filterable overview. When you’re ready to use a component, simply drag and drop onto the canvas to create a new instance, then customize as you please.
Extend the power of Framer X by customizing every last detail. Adjust the text, styling, and functionality of any component using custom UI options, made available in the properties panel.
Code, meet components.
Interactive components in Framer X are all React-based, which means you can build upon your designs instead of replicating them in production.
Work with real data.
Thanks to the flexibility of code components, you can work with real data in your designs. Pull in randomly-generated user information, photos and locations—or use any public API.
Rich media elements.
Drag completely functional music and video players directly onto your canvas. Or drop a map component into any frame and customize its size or style. Open the Preview window at any point to interact with your working prototypes in real time.