[2020] Figma vs Framer web. Differences & Which to Choose

Figma & Framer (web) Both are one of the best prototype design tools, and they can both run on the browser.

• Figma is one of the most trending design tools today among ux/ui. It offers a user friendly interface but with rich configuration options, and it’s great for both beginners and technical users.
• Framer is also a prototype design tool but one that can use real code to create or customize components. While the coding tool may scare designers away, Framer perfectly functions and it works great as a stand alone design tool even if you choose not to use coding at all.
• Figma & Framer are both growing their adoption rate rapidly in both freelancers & IT industries, and most definitely will become the next standards. The question is “which is the right tool for you and why?”

First we’ll compare the key feature differences between the two. After that I’ll give you a ballpark of how to choose one over the other.

Watch the video version of this article here!: https://www.youtube.com/watch?v=J1rIWPRJWb0&t=105s

Designer Comparison

FIGMA (left) / FRAMER (right)

Figma’s key features

Overall, Figma feels very task oriented, smart and efficient with the way they layout the design interface. I feel like all the necessary actions and controls are always there when you need them, so it empowers you with agile & efficient tasking.

Figma is very rich-in quick action convenience. What I mean by it is, that there is many conveniece built in to make users tasks easier & done speedy. I think this is one of the quality that makes Figma a very snappy design tool.

• Selection Color — Figma lets you change color from a frame level. So, if you select a frame with different color elements inside, in the right panel, you get a list of all the colors used in that frame. If I change the red swatch to a blue, then every red in that frame will update to blue. It’s also a great reference to be able to quickly view the list of all the colors being used as the frames get bigger and complex. It may help you identify duplicates of color with inconsistent hex.

• Can hide layers in a component instance with a “delete” key. —Generally you can’t delete an element from an instance, because it’s not the master but a clone, so hiding is the only option. But our natural instinct as a user is to hit the delete key, because we’re used to it that way. Figma is smart enough to know this and interprets delete of an instance layer as “hide”. It’s a small thing, but these nice conveniences are blended in very intuitively that you almost don’t notice these subtle considerations, but it helps you as a whole with your work speed incredibly. Meanwhile Framer’s only offers hide action from the right click menu.

Create Component Instance > Select elements > Delete-key to “Hide”

• Text config is easy — Figma’s got some real in-depth text configuration features exposed to the interface. Auto width, Auto height’s , Paragraph spacing, and addition to that we have another whole advanced config panel for text. While this may feel excessive, it actually makes sense for designers to be clearly presented with the options & limits, because when designing UI, text is very much part of the visual communication tools that speak hierarchy, contrast, and also requires accessibility consideration.

Text Configurations

Framer’s key features

Enabled by the power of codes, Framer let’s you easily create real UI & interactions with out of the box tools. Of course, once you open the door into the code feature, we all know that what sets the limit is not the application but our skills & knowledge,

Convenient native tools — Framer natively supports several tools that help you prototype behaviors quicker that Figma doesn’t offer :

1. “Scroll” lets you set a fixed frame and the user can scroll through long contents inside the frame.
2. “Page” lets you easily create a carousel by linking multiple contents. Overlay & Modal lets you create flyout panels & dialog panels instantly. Then there’s also
3. “Tabs” that auto-creates tabs as you link contents.

Scroll & Page tools

• Overrides — Override is probably one thing Framer is reputable for. There’s two aspects to this sauce :

1. First is, in the designer page, any properties of a component instance can be overridden. In Figma, a component instance can’t be modified much other than the overall size, color, text, and you can’t selectively move or resize the inner elements unless you detach from the Master. In Framer, however, you can literally take an instance and tear it apart, and still maintain the relationship with the Master. This is a great way for designers to iterate on a component and still maintain all dependencies to the master.

Create Componen > Create Instance > Override Elements > Reset Overrides

1. The Second is the actual override feature. Framer let’s you override any element with a custom code. In other words, it’s almost letting you create a custom plug-in on the spot to install to the canvas elements. This indeed uses few lines of codes, but you can literally only learn how to add few lines here and even with just that, will open you up to a whole bright new world of capabilities like adding interactions, animations, or communication with other elements.

Add Override > Select Override File > Select Override > Edit Code (optional)

1. Padding Input — Framer allows you to set padding in the properties panel. This adds extra accuracy using arrow keys to shift position.

Setting padding to 24px 4-ways

Prototype Viewer Comparison

Figma & Framer both have a pretty identical prototype viewer. However, Framer has a couple extra features :

• First, Apart from the browser page preview, Framer also has a preview panel you can open in the designer. This allows you to validate your design development real-time as you update them.
• Secondly, Framer can generate a quick QR code for you to share your prototype with stakeholders & testers. Figma on the other hand, currently relies on a mobile app which you’ll have to download and sign in as yourself in order to preview.

Version Control Comparsion

• Figma comes with Version History control. Even with the free plan you get up to 30 days. This is great because all your project files are on the cloud already.
• Framer does not have its own version control yet, but they did say they are working on one. Instead, Framer currently offers a solution to bridge with Github using Command Line Interface. While Github is no doubt a better version control for teamwork, the integration feels quite technical with a steep learning curve.

Extension Comparison

• Figma has a product integrated plug-in store that lets you quickly browse, install, and access plug-in features. The plugin literally takes zero seconds to install, and it’s super snappy.
• While framer’s package store is also integrated into its product, they are technically packages and not plug-ins. So installing them simply provides you with a set of pre-built components that help you build stuff easier.
• Meanwhile, Figma supports actual plugins. So you can install features to quickly insert stock images, placeholder text, or you can add the ability to test color contrast for accessibility tests, and so on.

Assets Comparsion

• Framer comes with many basic components out of the box, and they are also coded and interactive. This is great because it allows you to wire a decent fidelity mockup very quickly.
• Figma has many public & paid assets available for you to use online. Also you can easily find many work showcases.

Who is [ Figma, Framer ] for?

Figma

• If you care for speed and ease of use, Figma is the way to go. Once you get used to its convenience, it’s hard not to come back to it.
• If you’re not into coding at all, then Figma is most definitely your choice as well. While framer isn’t a bad choice still, many capabilities still depend on coding, and not everything you expect may be available as a graphic user interface.
• If “better than Invision” is good enough for you as a prototype, then Figma is also your choice. Considering most tech companies rely on Invision for prototyping, Figma’s prototype fidelity might just be good enough for what’s demanded.

Framer

• If you wish to have full control over your UI and add configurations like max width, min width, breakpoints, logics, states… then Framer will be your choice. Even without coding knowledge, you’ll still. get. a lot of benefits by utilizing the package store.
• If you’re in the user research or testing and you want a quality product. validation, then Framer is gonna be your choice. This is because, the closer your prototype is to a real life product, the better test results & validation accuracy you are going to get.
• If the production code is the absolute source of truth in your organization, then framer is your choice. Framer can import production codes into a component on the canvas to design with. This helps both design & engineers to reference the same exact ui.

Conclusion

So Figma & Framer both have their strength and ultimately you’ll have to decide based on your priority.

Figma

• Figma overall has a more intuitive user interface and more controls & options available right where you need them.
• I see it as an all rounder design tool that does a pretty decent job at 70–80% of the general needs.
• If you don’t or don’t plan to use coding, then probably I’d confidently choose Figma. Even if you haven’t given up on coding, you could still start with Figma since it’s free, and the friendly UI will help you get used to using frames and understand the workflow of managing design patterns, then one day if you choose to move to Framer, it’d probably be a smooth transition.

Framer

• Framer isn’t as loaded as Figma with controls, but in terms of component configuration, there isn’t much you can’t do with Framer that Figma can.
• Because framer supports code, if you know basic javascript, html, css, then there’s no way you shouldn’t take advantage of Framer, because you already got the pass to building overrides & code components.