Why Does Invision Upload Artboards in Reverse

Everything I Wish I Knew When I Started Using Framer

I've recently started using framer for my Capstone project at Carnegie Mellon. Suffice to say, I am definitely in the Framer cult now despite some original hesitation.

I'thousand writing this quick and dirty guide for my teammates, but I figured information technology might exist a useful mail for the UX Community too. This is mainly a collection of the gotchas and things I learned when transitioning from Sketch and InVision to Framer.

I'm going to write this for designers who predominantly practice wireframes and prototyping with Sketch and InVision.

…simply first let me give a picayune backstory.

Why I Haven't Used Framer Until Now

The uncomplicated answer is that if I wanted to do loftier fidelity or functional prototyping, it felt pointless to practice it in Framer.

For a long fourth dimension, it seemed like it was inevitably a lot of work to brand something truly functional in Framer. For the same corporeality of effort, you lot could make a truly functional image in HTML, CSS, and JavaScript.

Take Android Tabs instance by Jorn Van Dijk. It's beautiful, and it'south functional. Withal, the effort put into it seems counterproductive. Its too much work to design, and too little to turn into production lawmaking.

This is gorgeous and presents microinteractions well. The presentation is also great. However, the time and endeavor put into making this functional is a piffling counterproductive.

In society to make a truly modular and functional Framer prototype like the i above, it used to take a lot of lines of code and styling. It certainly wasn't fast. If y'all did the same thing in HTML, CSS, and JavaScript, you'd be washed in the same amount of time. Plus, you'd have a repository you lot could hand over to a developer. At smaller shops, yous might fifty-fifty have production code.

Prior to the Pattern Tab, this is how you used to style things. 🙄🙄🙄

…its meticulous and slow. You become the thought.

The inneficiency wasn't something to have lightly. When prototyping, the strategy should always be to make a facade, and brand the 1 necessary to append atheism. Y'all should make a prototype with as much fidelity as necessary, only also as quickly and efficiently every bit yous can.

**A lot of people will object and point to the fact that you can import Sketch files and components in Framer. My result is, it's kind of clunky and still non equally fast as HTML prototyping in my opinion.**

To design in Framer, you lot admittedly don't have to do it this way.

So What Inverse?

You lot should make a prototype with as much fidelity every bit necessary, simply also equally quickly and efficiently as you can.

There's been some interesting developments both for the Framer product, and inside the Framer community since I offset tried to use this tool in 2015. In that location'southward 2 changes in item that are of import.

At some point, Framer introduced the Design Tab. It works really well. Sketch has an amazing flow and Framer is comparable. In fact theres some truly prissy things almost Framer's Design tab and features. The one major feature it's missing is Symbols. This was a dealbreaker for me as someone who uses them religiously in Sketch.

The single thing that put Framer over the border for me every bit an amazing prototyping tool was one community contribution. Lukas Guschlbauer made a plugin where yous can create Symbols in Framer and manipulate them in lawmaking. For those who do functional programming, you lot can accept a design component, and treat it like a class.

It means that with some basic JS programming, I can have something like this from the design tab, and easily generate a list of items, and populate them with real data.

Generating reusable parts and injecting them with real data is super piece of cake with Symbols.

So…with these production improvements, Framer is amazing. You tin work very fast and brand things very functional.

Okay I'll Cutting to the Chase.

What do I Need to Know to Move from Sketch to Framer Design Tab?

There'due south a lot of "gotcha's" in Framer design tab that might be a little frustrating at showtime. However, in my experience the differences seem intentional and useful. I'll try to hitting the big ones one past ane.

In that location Are No Artboards

There are no Artboards in Framer, instead you utilize frames. Information technology gets the task washed just every bit well. Furthermore, these things take some cool attributes that I'll explain in the side by side section.

Pressing 'A' wont make this, but pressing 'F' on your canvas will.

…and you can change the device in the inspector on the left.

And so, no Artboards, but yous can do the same thing with the same corporeality of clicks in the Design Tab. If you put elements within a telephone screen, its role of that frame and gets dragged around simply like in Sketch.

There Is No Concept of a Group.

Framer doesn't have groups. You lot can select elements and CMD-G and nothing happens. At first this seems like oversight, but Framer actually does something cleverly redundant. It uses frames to grouping. Thats right, the same way you lot brand an "Artboard" is how you brand a "group." What this ways is, a frame is basically a way to group anything.

These little hashtag signs are frames. There'due south definitely heirarchy simply information technology behaves differently than what nosotros think of as "Groups"

Basically if you create a frame and elevate it over elements, you lot've finer grouped any element within the box.

The implementation has some interesting affordances too, considering it also works backwards. If yous move an item over a frame, the item automatically goes into the frame. This tin can be a little annoying sometimes, but actually dainty one time you understand it and utilize it.

You lot tin can put frames in frames too. Thats exactly what yous're doing when you put a frame inside what you perceive of as an "Artboard." Y'all tin nest: it'due south frames all the fashion downwardly.

Information technology'south frames all the way down.

If you commencement stretching and scaling your frames, things might acquit weird. Information technology'southward not a problems; information technology'southward a characteristic.

It'southward Responsive By Default

If y'all resize screens, things take a trend to unpredictably resize sometimes. Framer automatically tries to brand things responsive, and sometimes it fails. However, it'due south right more often than wrong. Yous but need to recheck your elements. Once you sympathize how information technology implements responsiveness, it's actually really nice.

Look for this little box in the inspector

All of the responsiveness is controlled and described by this box. Information technology tells yous where things are locked when you scale. In the image in a higher place, the element in the box scales proportionally to the frame.

And then you may get the thought by now. To epitomize, Framer makes things responsive by default, and tries to be smart near snapping things.

top, left, and correct lock. If you calibration your frame in any of those directions, this item nested within scales in those directions.

Alignment is Super Easy Within Frames

In Sketch you tend to rely on Smart Guides to make certain you align things to the middle when you lot're nesting. You have those in framer likewise (click an element. Concur the alt primal, move the mouse around to run into how far away things are in pixels).

Framer's alignment tools that show up in the top of the inspector for virtually elements.

Both Framer and Sketch have quick align tools in the meridian of the inspector. The differences is that the alignment buttons are more than probable to work as y'all'd intend them to in Framer.

If yous use the alignment tools, your element volition marshal with respect to its showtime parent frame.

If you attempt to acheive the same functionality with groups in Sketch, you won't go the same results. The alignment tool always aligns your particular with respect to the artboard in Sketch. The event is that the tool is but useful for certain things in Sketch, but super powerful in Framer.

Here's what Sketch does:

Text Boxes Behave Different

Unremarkably you lot make a textbox in Sketch, y'all add together type to it, and yous elevate it around and text collapses. To get this behavior, you lot take to change the Textbox from "Auto" to "Fixed" in the inspector.

I volition say, the motorcar method is kind of nice for keeping your textboxes as small as they need to be, and allowing you to scale type upwards. When you outset create a textbox, yous mostly want to become the font size correct first, so this is platonic and requires fewer clicks.

Eyedropper Tool Actually has a Key Control

I never found the key control for Eyedropper in Sketch, which tin can be abrasive. In Adobe products, you only apply the i cardinal. In Framer, yous can practise ^C (command-C on Mac), and you'll become an eyedropper. Information technology'due south super convenient to have that back.

The Let-Downs

And so what's not improve in Framer?

I'd say the Path Tool mainly. Other vector manipulation tools also aren't in that location AFAIK. You may find yourself missing the Pathfinder functionality: a way to merge vectors and make sure they merge the fashion you want them to. Only put, Framer isn't for manipulating Vectors. Nevertheless, Sketch isn't really primarily for that either. Honestly if you want to dispense paths and vectors, use Adobe Illustrator like a real pro.

**Too sometimes you accidentally zoom in on your canvas and then you're. unable to come across your frames anymore. Y'all end up panning effectually to find them again. This is really annoying, and AFAIK there isn't a way to reorient or pan back to your frames. I usually only save and reopen. Please comment if you know how to resolve this. ❤️ **

^ CMD-1 will bring you back to your canvases, thanks Radha Nath!

So How Can I Get InVision Functionality

You can sew together screens up in Framer pretty easily. You do it with very minimal CoffeeScript. For many designers, this seems scary at first but virtually of the code you write is super simple.

Lawmaking Basics

If yous press this button, show this page. Bam! It's that simple to write functioning CoffeeScript.

Aye making things functional in Framer can be really simple and its Library has some actually dainty out-of-the-box components. The beginning time yous try this, it probably wont work though. The reason is that you lot need to requite an element at target to make information technology interactive.

In social club to make an element interactive, you have to printing this.

These elements have targets an you'll see them autocomplete when you lot endeavor to reference them in the Lawmaking panel.

What if I Want to Write Every bit Picayune Code Equally Possible?

You tin actually acheive a lot of the code functionality using sidebars. I recommend Framer tutorials that come with the product, as they explain how to use this thoroughly. I personally don't utilize this, but you tin.

I want an event where a search button does something when you click it. I could generate that Outcome with the Sidebar.

Screen Stitching Basics

So for stitching screens together, the best tool for the job is typically FlowComponent.

To use it, you basically instantiate it at the acme and give it the default screen as and so:

Once you lot exercise this you're cooking with grease and can make elements interactive (simply don't forget to give buttons and screens a target 😉)

Make Role of a Screen Scroll

Theres a ScrollComponent to make a frame and it'southward contents behave like a body that scrolls.

See how these list items prune? In preview mode, this box is a ScrollComponent and actually scrolls equally you pan over it.

Information technology'south straightforward to fix up a ScrollComponent. Whatsoever frame that is the child of a ScrollComponent will curl.

In fact theres a lot of these components, so if you're curious almost more than you should refer to Framer Documentation.

Blitheness

Animation is straightforward in Framer, and you don't necessarily have to write lawmaking. The Sidebar introduced before is actually very nice for this. If you desire to breathing something, it has to happen in the context of an event. It makes sense though correct? Things don't just motility without something triggering it.

So you'll see a petty "notch" when you lot have an blitheness:

In one case you click the "notch" you'll go animation options in the sidebar. Its a list of everything you tin do.

You can besides tab over to the bend functions to fine tune the animation. Its an affordance y'all'd expect in any tool that allows y'all to animate.

Coding Power Features

So your code tin can get pretty spaghettified if you only have a agglomeration of two-liners describing things here and there. You can definitely clean that upwards.

If you know how to plan and want to, its totally possible. Framer uses CoffeeScript out of the box, so you lot can use all of the nice things like arrays, for-loops, and functions. Theres ES6 functionality too. Yeah, that ways you tin employ classes, which tin can be really nice.

I'grand lazy and I want to use a loop to requite many buttons the aforementioned functionality.

Theres likewise an affordance to "fold" code which can assist tidy things upwards.

If you double click a fold you can see it in isolation. printing the "X" to go back.

Thats All Folks

I'll wrap this up hither, just this list is definitely non exhaustive. It'due south only the things I wish I knew a week ago. If anyone is reading this listing and wants to add to this, please comment!

I am someone who used to use Sketch and InVision, or Web Prototyping exclusively. I was a design 🦄 and I always saw Framer as a middleman that couldn't practice both effectively. With some product updates and plugins, that isn't the example anymore (When Framer X comes out, there may not fifty-fifty be a argue anymore). If you lot take a hybrid approach to designing and prototyping, Framer is really empowering.

You tin can become totally immersed if you're a get-betwixt visual designer and developer. Information technology's similar work suddenly becomes a match of StarCraft where you're using all of your brain all of the fourth dimension. It's nifty, and it gets you into a good for you and productive flow. If you aren't a hybrid designer, I doubtable Framer will quickly aid you lot in becoming one.

centenohouts1995.blogspot.com

Source: https://taitrnator.medium.com/everything-i-wish-i-knew-when-i-started-using-framer-f9361c38e168