Framer – Medium | Framer Team

Web, mobile, visual or code, Framer is now inclusive of every design workflow | Framer.com

The idea of sharing is mixed up with all that is good in product design. We share early to reduce friction between design and development. We share with our team to invite feedback and encourage collaborative innovation. Sometimes we share simply because we are proud of the work we create. This is the essence of Framer Export — a new way to share at every point of your workflow, from early mockups to developer handoff.

In the past, sharing in Framer meant putting a high-fidelity prototype out into the world. While efficient, this didn’t account for WIP iterations, static output or CSS handoff, all necessary features of a visual design workflow. Framer Export is that missing piece of the puzzle, and it comes with some very powerful additions.

Share early, share often, share on any platform

At a base level, our exporting interface works much like you’d expect. You can export an artboard, group of layers or a single layer by selecting and hitting the + icon in the bottom right corner of Framer Design. From there, you have multiple options — choose between various resolutions and image formats (PNG, JPG, PDF and WEBP) to export as a file or folder.

Suddenly a high-fidelity prototype isn’t the only deliverable you can get out of Framer. More than output, we’ve built this feature in a way that makes it conducive to share at every point of any workflow. Here are a few features that Framer now supports:

• For web designers: Right click a layer and select Copy CSS to copy and paste perfectly formatted CSS directly in your favorite editor. Or pass it on to an engineer to synchronize between design and development.
• For mobile designers: Set your own custom preset by hitting the + icon. Or right click in the Export panel to automatically select platform-specific presets for iOS and Android.

Learn more about CSS exporting in Framer.

• For freelance designers: Click and drag a selected image out of the Export Preview window into Dribbble, Behance or Twitter to share process, show mockups and attract new clients (don’t forget to tag #framer).
• For designers working in teams: Need feedback on your multi-screen mockup? Deselect to export, save and share your entire canvas. Or right click and hit Copy Image (or CMD+C) to copy a selected layer or artboard. Paste your image in Slack for feedback or embed in a document on Dropbox. No integrations necessary, it just works.

Learn more about asset exporting in Framer.

The difference is in the details

Like everything else in Framer Design, we’ve taken the time to add some finishing touches to this release. It’s now much easier to design for the Web in Framer, with support for CSS handoff. We’ve also added multiple shortcuts export your work out of Framer, making it easier to share your work much earlier in the design cycle.

CSS Handoff

From today, you can copy, export, and share CSS code that is immediately usable— no comments, no cruft. And because Framer uses a web-based linear gradient model, you’re guaranteed a perfect match when copying and sharing any advanced properties like background blur or filters.

Export Shortcuts

To power quicker sharing and collaboration, here are a few ways to get your visual assets out of Framer Design:

• Export Selection (or CMD + E)
• Export Canvas (default)
• Export Artboards (default)
• Export All (or CMD + Shift + E)
• Right Click → Copy Image
• CMD + C to Copy
• Drag Artboard Preview

Learn more about Export presets in Framer.

Since the launch of features like Cloud and Handoff, we’ve significantly improved our sharing workflow. With the release of Export, we’re taking another step towards making Framer your go-to design tool. From gathering feedback on a quick mockup to impressing your peers with stunning visuals, it’s now all possible with Framer.

Now that we’ve made it easier to export, we’d love to see you share your best visual designs on Dribbble, Twitter, and Facebook. Tag @Framer for a chance to get featured in our Framer Standouts email.

Introducing Export: The Easiest Way to Share Mockups, Assets and CSS Code was originally published in Framer on Medium, where people are continuing the conversation by highlighting and responding to this story.