Framer & Paste

Andrew S Allen
A Space to Create - FiftyThree's Blog
4 min readMay 2, 2018

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.

--

--