Framer & Paste

Andrew S Allen
May 2, 2018 · 4 min read

Showcase your best work.

Image for post
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.

Image for post
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.

Image for post

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.

Image for post
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.
Image for post

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.

Image for post

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.

Image for post
Image for post
Image for post

A Space to Create - FiftyThree's Blog

Makers of Paper and Paste

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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