A free tool for app and website mockups

A free tool for app and website mockups

Bring your best interactive design ideas to life on a canvas in Framer—a free app and website mockup tool.

Beyond a full toolbox of design, mockup, and wireframing features, Framer also allows you to collaborate with team members on all your projects in real-time. You don’t have to be an expert mockup designer to create beautiful interactive designs. Get started today and see how easy it is to design something that feels real.

Insert

Layout

Frame
Text
CMS
Published
Desktop
·
1200
Breakpoint
Phone
·
390
Breakpoint

Create an app mockup with unique animations

The same principles apply to app mockups as they do website mockups— they should help you transform visual concepts into usable designs that can help you user test for a real audience.

Mockup features

We’ve included quite a few useful app mockup features for quick interactive design in Framer. Mockup stunning animations and transitions with Magic Motion, then see the movement in action as you preview your designs.

Interaction between unchecked and checked checkbox being set on Framer canvas
Interaction between unchecked and checked checkbox being set on Framer canvas
Interaction between unchecked and checked checkbox being set on Framer canvas
Magic Motion modal showing animation customization
Magic Motion modal showing animation customization
Magic Motion modal showing animation customization

Customization

You can customize everything from modals and overlays to flips and fades with Magic Motion. Choose from bezier or spring curves and then set your ease type, timing, and delays for unique animations that you won’t see anywhere else.

Design realistic mockups in no time

With Framer, you’re not limited to any one user interface. It’s the most flexible UI design tool for mockups for every user interface. Choose from a variety of device presets, including phones, tablets, and desktops to get started with any design.

Device presets

To make your mockups even more realistic, try creating interactive UI elements with Framer’s out-of-the-box components in the Insert Menu, or create something totally custom and interactive with Smart Components.

Realistic mockup showing hand holding an iPhone
Realistic mockup showing hand holding an iPhone
Realistic mockup showing hand holding an iPhone

App mockup for iOS and Android devices

You’re most likely to work with Android and iOS smartphone operating systems, and it’s important you make sure your app adheres to the nuances of both.

Realistic mockup showing iPhone and iPad
Realistic mockup showing iPhone and iPad
Realistic mockup showing iPhone and iPad

App mockups

You can mock up apps with real components from the Insert Menu for any mobile device. Drag and drop UI elements for iPhones, Androids, MacOS, and more to get started on your app mockup, and then expand on your design from there.

Components

We’ve made hundreds of free components—beyond UI kits—available to help jumpstart your designs. Mockups made in Framer are real from the start. That means buttons can be clicked, elements move, and animations and transitions can be customized for any interaction.

Toggle, tabs, button, radio button, checkbox, slider, play button
Toggle, tabs, button, radio button, checkbox, slider, play button
Toggle, tabs, button, radio button, checkbox, slider, play button

Website and app mockups with built-in interactivity

Everything you design in Framer's free mockup tool can be fully interactive from the start. Outside customizable animations, you can also add real interactive components.

Icons representing interactions in Framer such as side menu, draggable sheet, toggle, checkbox, media plaeyer, tabs and card expand
Icons representing interactions in Framer such as side menu, draggable sheet, toggle, checkbox, media plaeyer, tabs and card expand
Icons representing interactions in Framer such as side menu, draggable sheet, toggle, checkbox, media plaeyer, tabs and card expand

Interactivity

We believe in designing mockups that feel real. That means buttons you can click, toggles that toggle, and sliders that slide. Using real components in your mockups helps you build real products, websites, and apps faster.

Preview, share, and collaborate on mockup designs

Once you’ve created your app or web mockup, try sending a link to friends or team members so they can preview and interact with your interactive mockups.

Collaboration

If you want to collaborate throughout the whole design process, invite anyone to your Framer project and start working on the canvas. Because everything in Framer is set up for multiplayer collaboration, you can design together as well as leave comments for instant feedback.

world class hosting
Cursors with names
Cursors with names

Design and publish a site today.