Framer & Paste

Showcase your best work.

Drop Framer prototypes right into Paste for the most beautiful, interactive way to share designs.

We love prototyping.

Not so long ago, building a completely new kind of app like Paper required you to also build the design and prototyping tools you needed to see those concepts brought to life. For us it was a combination of Processing, openFrameworks, Arduino, and our own custom javascript-based prototyping platform. From Paper’s industry-defining inks to Pastes’s frames, we are able to invent new experiences using high-fidelity prototyping tools.

A range of prototyping tools we’ve used at FiftyThree over the past 6 years.

Enter Framer.

Framer is a design & prototyping tool that helps you create anything for any platform. It’s the tool professional designers turn to when they feel the need to step off the well-trodden path of standard flows or transitions and create something no one has done before. Framer prototypes also smartly scale for every screen size from iOS to the web. Plus, there’s an undeniable honesty to designing in a tool based in the same medium of code that your application or website design will ultimately be built in.

We started using Framer early on, and it was immediately clear that we both hold the same passion for beautiful software that lowers barriers to bring great ideas to life.

Paste make prototypes part of your strategy.

Paste now offers you a space to share your Framer prototypes as part of your larger strategy. Embed fully-interactive prototypes right into your feature proposal, product roadmap, or pitch deck and easily share the link with your team, clients, or investors.

Interactive prototypes + interactive mockups.

Framer prototypes drop seamlessly into Paste frames to bring your rich designs to life inside interactive 3D mockups of phones, tablets, and a web browser.

Responsive across devices.

Framer makes it easy to design and prototype responsive apps and Paste makes it easy to show off your prototype inside a range of devices.

The same responsive Framer prototype expands to any Paste frame

How To Do It

  1. Copy & Paste Your Framer Cloud Link—Adding anything to Paste is always as simple as just pasting in the link. Copy & paste your Framer Cloud link into a Paste deck and Paste will embed the live prototype and format the color, layout, and typography of your slide to make it look good.

You can call it “done” here but there are a few things you can do to take it a step further…

2. Hide the Framer Sidebar — To hide the sidebar, go to your Framer Cloud dashboard, find your prototype, select the Edit button, and select Share Settings. Then, uncheck “Show Sidebar”. See instructions

3. Apply a Frame—Hide Framer’s default device frame by adding this line of code to your project: (you may need to update the Framer Library for your project to support this).

Framer.Device.forceHideBezel()

Then, add any frame you like in Paste.

Taking ideas to the next level.

With Framer & Paste we’ve reached a place we’ve long sought to reach. We can finally bring our ideas to life with the powerful prototyping capabilities of Framer and weave them into our product strategy with the fluidity and speed of Paste.

Give Framer & Paste a try.

Try a few examples…

Slider, Loading Animation, News App Navigation

Recommended from Medium

🍨The Inside Scoop — Paul Haupt 🇺🇸

Making the window material transparent in just 3 steps in Unity

The state of UX design and research roles in 2019 — part 3: a new definition of design and…

Event Microsite- Miami Heat Case Study

Business Modeler Hub Preview Released!

UX Research & Product Management

How to get scouted by Zalando

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Andrew S Allen

Andrew S Allen

Head of Design & Product (US) at WeTransfer / Co-founder @fiftythree / Founder @shortoftheweek

More from Medium

SiaXperience — Design, strategy & technology

IBM Watson AIOps wins two Indigo 2022 Design Awards

Minimum Loveable Products Explained: The Evolution of MVPs

User Research in Product Interaction Design — Observation