Published on <a href="https://blog.prototypr.io/unwrapping-the-new-framer-397a1477d58c?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> prototypr.io <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ulPQICBuxxxkACgtuZKpQg.png">
<h4>A Review of What’s New</h4>
Yesterday <a href="https://medium.com/u/89a1103c5c78">Framer</a> dropped a new update with some pretty big features that’ll change how and when you use Framer. Off the back of their <a href="https://blog.framer.com/building-your-go-to-interactive-design-tool-900b276e19d6">$8m Series A funding</a>, like many competitors, Framer are gunning to be your “go-to design tool from start to finish”, and the new release looks like a great step.
We’ll start with a quick recap on how Framer has been making this shift, followed by a rundown of the latest features.
<h4>The shift from code to design</h4>
Framer used to be most widely used for prototyping final stage, high-fidelity interactions. Back in 2016, you’d create prototypes in a split screen view —with one side showing your code, and the other your prototype (see left of the following image):
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*tC-W_XCNFqwkv_CoLyus3Q.png">Framer Timeline (Left to Right : 2016 Code View, 2017 Code and Design, Today’s Design Tool)
The learning curve was pretty steep. Fast-forward to 2017 though, and Framer introduced Design mode (see middle of image above), with a brand new view dedicated to simple design.
This brought with it tools you might recognise from apps like Sketch or Photoshop:
<ul>
<li>Art-boards</li>
<li>Shape tools</li>
<li>Layout and colour</li>
<li>Today: Paths/Vectors ✍️ (and more 👀)</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*wh-nODvxb_woJv9zbK8TvA.png">
<h4>The new stuff</h4>
With the basics already in place, <a href="https://framer.com/features/design/">yesterday’s release</a> aims to make design mode more powerful, especially to those who aren’t experienced with code. This doesn’t mean the flexibility of code is lost though — pretty much everything made in design view can be manipulated to infinity in the code view, making this a useful tool for learning as well.
<blockquote>The flexibility of code has not been lost, it’s been made even more useful.</blockquote>
Now we know what the aim is, let’s see how it works:
<h3>Opening the New Framer 📦</h3>
<a href="https://framer.com/features/design/">Framer have done a good job on their site</a> of highlighting what’s new, so let’s dive straight into the app.
Upon opening Framer, we can immediately see the latest updates simply by looking to the top left of Design mode. Here’s how it’s changed since last time:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*fr5K2AhYu-cbBXt6fhUOKA.png">Image: The top left corner of Framer Design view. (Left: Old Framer, Right: New Framer)
As you can see, there are 3 notable differences:
<ol>
<li>‘Frames’ has replaced ‘Artboard’ in the top left.</li>
<li>‘Shapes’ has its own new section, encompassing the old Rectangle/Oval.</li>
<li>‘Path’ is a brand new addition.</li>
</ol>
These might seem minor differences, but they turn out to be pretty big in terms of how your workflow might change. Let’s see how that may be, starting with Frames:
<img alt="" src="https://cdn-images-1.medium.com/max/54/1*yCQtK7SublxtWcYGHhG3kA.png">Frames
<h3>1. ‘Frames’ save you time</h3>
Speed is pretty important for prototyping tools, and the new Frame feature does make things a lot faster.
Essentially, Frames are like the previous Artboards, acting as containers in which you can layout various elements like buttons, images, or even more Frames. Here’s how they speed things up:
<ul>
<li>Frames nest automatically, saving you the effort of grouping things yourself. Just watch how elements are grouped hierarchically when added inside eachother:</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/740/1*xw_5EsPwcU-y7yO46ezpxA.gif">
<ul>
<li>Frames are responsive to any screen size. We don’t really know for sure what device an end user will ever be using, so it’s great that this tool actually has got responsiveness baked in. Look how at how everything adapts when you resize a parent container — no layout inside breaks:</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*exXQlQzsrSlkoSfwaXixpA.gif">
<blockquote>We don’t really know what device an end user will ever be using</blockquote>
Our Frames Verdict
Using the Frames feature is pretty effortless thanks to the combination of automated nesting and adaptive layouts outlined above — it’s actually enjoyable to use.
Importantly, Frames also helps designers shift their focus away from devices and form factors, giving you time to cover the more important areas such as the journey of your user and the different contexts your app could be used in.
It’s always been a peeve of developers when a designer sends them over a static desktop design, so the responsive aspect of Frames makes it easier to think across devices.
<img alt="" src="https://cdn-images-1.medium.com/max/54/1*-cKz31IO7yonWA57vaUx8A.png">Shapes
<h3>2. Shapes 📐</h3>
The shape tool is very complete, and on a similar level to Sketch now. Framer’s description isn’t hype either, it actually does pretty much everything you’ll need:
<blockquote>Draw everything from basic shapes to complex icons. Insert rectangles, ovals, polygons, and stars, then use them as a starting point for more advanced shapes — just double-click to edit and customize completely. Want to create more unique shapes? Use boolean operations to add, subtract, intersect, and exclude shapes.</blockquote>
<img alt="" src="https://cdn-images-1.medium.com/max/387/1*pLOfe7jXKTrZbJ8r5JqxDw.gif">
You can really go wild with it:
<img alt="" src="https://cdn-images-1.medium.com/max/725/1*iX2y2LR4uENowsB1nas5jQ.gif">
As seen above, double clicking a shape gives you access to advanced path editing too, which we’ll look at in the next section.
Our Shape Tool Verdict
It’s an amazing improvement in Framer, but nothing groundbreaking on the design front — it’s what you need in a design tool, so we’re glad that it’s there.
When it comes to editing shapes (that have been created in design view) in the code view though, we found it’s not possible to change the state (colours, size etc.) of them as you would a Frame/layer. To do so, shapes need to be grouped within a Frame, from which they will inherit some state changes of that Frame (e.g. movement or size). This is still great, and a step beyond many design tools.
<img alt="" src="https://cdn-images-1.medium.com/max/60/1*9eoQv-Bq2CCyx9adICluew.png">Path
<h3>3. A smart vector tool 🧠</h3>
Path is one of the most exciting updates because it’s really smart!
If you’ve ever tried to draw a symmetrical shape with a line tool alone, you may have found it difficult to align the different points. The Framer path tool really changes this. Here’s ‘Angle Locking’ in action:
<img alt="" src="https://cdn-images-1.medium.com/max/765/1*5MKtff5fJDrjZ1xinodgsw.gif">Drawing a perfect shape with just a path tool.
In addition, the vector tool does a bunch more clever stuff, as summed up in Framer’s article yesterday:
<blockquote>Dynamic Center Points allow you to quickly find and snap the center points on your path line.</blockquote>
<blockquote>Angle Locking recognizes your initial path line and guides you to lock in just the right angle.</blockquote>
<blockquote>Segment Dragging is a quick way to drag and directly manipulate a specific section of your path line.</blockquote>
<blockquote>Curve Bending uses synchronized anchor points to guide you toward desired curvature, allowing for more advanced illustration work.</blockquote>
<a href="https://blog.framer.com/framer-is-now-the-best-tool-for-screen-design-heres-why-ebd9c29b3138">Framer Is Now The Best Tool for Screen Design. Here’s Why.</a>
Our Path Tool Verdict
This vector tool really is unique, and even goes a step beyond Sketch’s own. What’s also great is that all the smart features work straight out the box — you don’t have to configure them or anything 👌🏽.
<h3>Prototypr opinion</h3>
In all, design mode in Framer offers everything you might need to design an app from start to finish, and have it work across all devices. For existing Framer users, these updates could mean the end of a separate vector tool (e.g. Sketch) altogether.
For less technical users though, you’ll still have to get your head around the code aspects of Framer if you want to make your designs interactive — and the jump between design and code view can be quite a gap depending on your experience.
Either way, <a href="http://prototypr.io/prototyping-tool/framer">Framer</a> also has one of the liveliest and helpful communities, so you’ll never be short of help and advice.
Hope this review was useful — drop us your email for more updates in 2018. For daily news check out <a href="http://www.prototypr.io">prototypr homepage</a>.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe>
And read more on Framer’s site:
<a href="https://framer.com/features/design?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/600/1*xhdDJGvDh7WP8hvTXE4nLA.png"></a><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=397a1477d58c" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/unwrapping-the-new-framer-397a1477d58c">Unwrapping the New Framer 🎁</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Unwrapping the New Framer

A Review of What’s New

Top Stories