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

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

Published on <a href="http://ift.tt/2qHo7pm">| Prototyping: From UX to Front End &mdash; Medium</a> AM Imogie <img alt="" src="http://ift.tt/2s0vUm0">
Framer released an unexpected update yesterday, and it was the highlight of my day. True story.
First things first, rest in peace app switching, for real. This I believe was the the core of the update, Design &amp; Code (prototype) in one interface. Already familiar with the code interface, I had to check out the new design interface first, afterall I’m a designer.
Coming from using Sketch, my expectations were high, very high. The interface layout was not a surprise; content manager on the left, design preview (artboards) in the middle and property manager on the right. Framer Design let’s you do the usual stuff, add artboards, shapes and text and manipulate them however you want.
<img alt="" src="http://ift.tt/2qH64zB">Design Interface
<h3>Zooming</h3>
The artboarding zooming however still needs some work. I found it difficult placing that single artboard to fill the vertical space. Mundane tasks like zooming and panning around should not be this tedious 😞.
<img alt="" src="http://ift.tt/2s0sXSo">Zooming
<h3>The Icon Manager</h3>
The icon manager is pretty cool, Framer is trying to keep you in that interface for as long as possible. Can’t believe I may no longer be needing <a href="https://geticonjar.com">Icon Jar</a> 😒. The icon manager is filled with Material Design Icons so one thing’s still missing, being able to add and use icons from other icon sets.
<img alt="" src="http://ift.tt/2qHcNth">Icon Manager
<h3>Now to the fun stuff, Design + Code</h3>
Before I begin, let me state that my expectations here were met, eventually. The terminology is quite different and I had forgotten that Framer was coming from a coding background. I expected to see stuff like ‘Group/Ungroup’ instead I saw ‘Add Parent/Delete Parent’.
Framer understands that not everything in your interface may require interaction that you’ll protoype with code and that’s a great thing. You have to select an element and ‘Create Target’ to make it available for manipulation in the code section. The reference name is also highlighted 👍🏾.
<img alt="" src="http://ift.tt/2s0AOPZ">
After creating targets for the necessary elements, adding states and animations is quite easy and you can always check out the documentation available in the app if you get stuck.
<img alt="" src="http://ift.tt/2qHnf45">The Final Product
<h3>Final Thoughts</h3>
I’m super excited about what’s to come, I don’t think I want to use Framer Design all the way for a client project just yet. A few vital things are still missing, like exporting assets (very important), reusable elements and UI Kits for iOS/Material design.
I can’t wait to see what comes in the next update and I’m not done exploring it’s capabilities. The Responsive Layout design looks like fun and I’ll be playing around with that next. Well done to the <a href="http://ift.tt/2nZzbzt">Framer Team</a> though,was definitely worth the money.
In the mean time, I’m going back home to my baby (Sketch) 💐🏃🏾.
<img src="http://ift.tt/2qGYOnd" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2s0vWu8">A night with the new Framer (Design + Code + Collaborate)</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

A night with the new Framer (Design + Code + Collaborate)

A night with the new Framer (Design + Code + Collaborate)

Top Stories