small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<a href="https://blog.framer.com/introducing-export-the-easiest-way-to-share-mockups-assets-and-css-code-aa578318bd18?source=rss----a40a6ad4b5fc---4">Framer &#8211; Medium</a> | Framer Team 
<h4>Web, mobile, visual or code, Framer is now inclusive of every design workflow | <a href="https://framer.com/?utm_source=medium&amp;utm_medium=post&amp;utm_campaign=framer_export_oct2017&amp;utm_content=subtitle?banner=exporting">Framer.com</a></h4>
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.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2Fad--Wtn-fLU%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dad--Wtn-fLU&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2Fad--Wtn-fLU%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="https://medium.com/media/b5f1be497f7904a6997d4428626b51d2/href">https://medium.com/media/b5f1be497f7904a6997d4428626b51d2/href</a></iframe>
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.
<h3>Share early, share often, share on any platform</h3>
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:
<ul>
<li>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.</li>
<li>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.</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*s_GFnQA7QODGphPJ-vLqDg.jpeg"><a href="https://framer.com/getstarted/guides/design/?utm_source=medium&amp;utm_medium=post&amp;utm_campaign=framer_export_oct2017&amp;utm_content=caption1#exporting?banner=exporting">Learn more about CSS exporting in Framer.</a>
<ul>
<li>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 <a href="http://dribble.com/tags/framer">#framer</a>).</li>
<li>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.</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*GnqYz-bI9tdx20foMb9Gzg.jpeg"><a href="https://framer.com/getstarted/guides/design/?utm_source=medium&amp;utm_medium=post&amp;utm_campaign=framer_export_oct2017&amp;utm_content=caption2#exporting?banner=exporting">Learn more about asset exporting in Framer.</a>
<h3>The difference is in the details</h3>
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.
<h4>CSS Handoff</h4>
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.
<h4>Export Shortcuts</h4>
To power quicker sharing and collaboration, here are a few ways to get your visual assets out of Framer Design:
<ul>
<li>Export Selection (or CMD + E)</li>
<li>Export Canvas (default)</li>
<li>Export Artboards (default)</li>
<li>Export All (or CMD + Shift + E)</li>
<li>Right Click → Copy Image</li>
<li>CMD + C to Copy</li>
<li>Drag Artboard Preview</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*s7aisS5qXRhr63mUBtPkRw.jpeg"><a href="https://framer.com/getstarted/guides/design/?utm_source=medium&amp;utm_medium=post&amp;utm_campaign=framer_export_oct2017&amp;utm_content=caption3#exporting?banner=exporting">Learn more about Export presets in Framer.</a>
Since the launch of features like <a href="https://blog.framer.com/framer-cloud-a-workflow-for-the-modern-designer-993d0727af2a">Cloud</a> and <a href="https://blog.framer.com/framer-handoff-1d557e3f3b0b">Handoff</a>, 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 <a href="https://dribbble.com/framer">Dribbble</a>, <a href="https://twitter.com/framer">Twitter</a>, and <a href="https://www.facebook.com/framerjs">Facebook</a>. Tag @Framer for a chance to get featured in our <a href="http://us15.campaign-archive2.com/?u=b2ba7c4048c35e68366280a66&amp;id=bbc7953f9f">Framer Standouts email</a>.
<a href="https://framer.com/features/design/?utm_source=medium&amp;utm_medium=post&amp;utm_campaign=framer_export_oct2017&amp;utm_content=footer?banner=exporting"><img alt="" src="https://cdn-images-1.medium.com/max/600/1*sdtKFiW1YN4FaMrHeNgUQQ.png"></a><a href="https://framer.com/group"><img alt="" src="https://cdn-images-1.medium.com/max/353/1*PHGNn6aQzjMXnmTEYat9GQ.png"></a><a href="https://framer.com/download?utm_source=medium&amp;utm_medium=post&amp;utm_campaign=framer_export_oct2017&amp;utm_content=footer?banner=exporting"><img alt="" src="https://cdn-images-1.medium.com/max/353/1*axq8Dl8TDS3uoNDd9JzwVg.png"></a><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=aa578318bd18" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.framer.com/introducing-export-the-easiest-way-to-share-mockups-assets-and-css-code-aa578318bd18">Introducing Export: The Easiest Way to Share Mockups, Assets and CSS Code</a> was originally published in <a href="https://blog.framer.com">Framer</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Introducing Export: The Easiest Way to Share Mockups, Assets and CSS Code

Introducing Export: The Easiest Way to Share Mockups, Assets and CSS Code

Web, mobile, visual or code, Framer is now inclusive of every design workflow | Read more

Top Stories

Top Stories