How to hand over designs created in Framer X

Handing over single page designs is pretty straight forward: export web preview, drop it on Netlify and you’re done. In theory. There is a couple of pitfalls though.

I decided to use solely Framer X for my work at SatoshiPay, where I lead the design efforts. The unique product we are building requires unconventional interactions that would be hard to produce unless you had React and a ton of tutorials at hand — more on that later.

To keep existing workflows (almost) intact, first, I had to figure out a simple way to hand over static designs just like the all-too-familiar Sketch and InVision combo.

Prepare for different screen sizes

Before you dig into exporting stuff, take a minute to think of different screen sizes. Your peers might be using different monitors with different screen resolutions. To make sure your design looks like it should, check the following:

1. Set the preview window to ‘Canvas — Responsive’
2. Set constraints for different frames according to your needs and test them in the preview window

Note: in case you are working on responsive layouts, try the Responsive Layout Component by Steve Ruiz

Add custom fonts

To make sure everyone sees the exact same results, you’ll need to add the custom fonts you’ve used that others might not have installed on their computers.

Install the Font Files package by Jordan Dobson, and follow the installation instructions:

Export Web Preview

Easy. Go to File — Export Web Preview…

Add a couple of lines to the CSS

To make sure tools like Prism or CSSPeeper can inspect your designs you need one last change to make: open build/style.css in the exported Web Preview folder, and add the following lines at the end of the document:

[data-framer-component-type=’Stack’] { pointer-events: unset !important; } [data-framer-component-type=’Frame’] { pointer-events: unset !important; }

Drop it on Netlify

All there is left to do is to publish your design. Sign up for a Netlify account (its free), and simply drop the exported Web Preview folder onto it. In a second, your page will be live at the generated URL.

Inspect your designs with Prism or CSSPeeper and you should see dimensions, colors, and fonts. Bam its done.

Tip: Change the site URL to something easier to find before its too late

Hope this helps. Keep Framering.