Overview

Framer

Stacks369

Followers502

Votes32

GitHub Stars5.9K

Forks477

Figma

Stacks4.2K

Followers2.5K

Votes101

Figma vs Framer: What are the differences?

Figma vs Framer: Key Differences

Introduction

This article provides a comparison between Figma and Framer, highlighting the key differences between the two design and prototyping tools.

Collaboration and Design: Figma is a cloud-based design tool that allows real-time collaboration among team members, making it easier for designers to work together. On the other hand, Framer is primarily focused on creating interactive prototypes that bridge the gap between design and development.
Interface Design: Figma provides a comprehensive set of tools for designing user interfaces, with features like vector editing, style libraries, and design components. Framer, on the other hand, offers a more code-based approach to interface design, allowing designers to create custom animations and interactions using JavaScript.
Interaction Design: Figma provides basic interaction design capabilities, such as creating hotspots and linking screens. However, Framer offers more advanced interaction design features, including complex animations, gestures, and logic-based interactions, making it a more powerful tool for creating interactive prototypes.
Code Export: Figma allows designers to export their designs as CSS, SVG, and other web-friendly formats, making it easier for developers to implement the designs in code. Framer, on the other hand, is designed to bridge the gap between design and development, allowing designers to create interactive prototypes with real code, which can be exported and used by developers.
Real-Time Preview: Figma provides a real-time preview feature that allows designers to see how their designs will look and behave on different devices and screen sizes. Framer takes this a step further by providing a device preview feature that allows designers to interact with their prototypes on actual devices, providing a more realistic user testing experience.
Integration: Figma integrates with popular design collaboration and workflow tools like Sketch, Zeplin, and Jira, making it easier to streamline the design process. Framer, on the other hand, integrates with development tools like GitHub and Slack, allowing designers to collaborate more closely with developers during the prototyping phase.

In summary, Figma is a cloud-based design tool with a focus on collaboration and interface design, while Framer is a prototyping tool that offers more advanced interaction design capabilities and bridges the gap between design and development.

🔥 Trending in Prototyping on StackShare

Fast, secure file conversion for all documents Prototyping

Fast, secure file conversion for all documents

Try it View Docs Alternatives

Try

0

1

Advice on Framer, Figma

Bobby

Feb 14, 2020

Needs advice

Hello, I want to start an unlimited graphic design service. (yes, yet another one, but bear with me)

It’s the second week that I’m working on this project, my goal is to test the market as soon as possible.

One element that is missing is the solution to handle communication between the clients and the designers.

• Mandatory: it needs to communicate instructions, progress/status, and design files (exported from Adobe Illustrator or similar). • Optionally it would also display the design inside the app so the files don’t need to be opened. • Optionally it would let the client easily mark the design where he wants revision.

• Mandatory: it needs to have unlimited clients and unlimited projects (I’ll have hundreds of clients and each will have at least one project) • Optionally it would auto-assign a new project to the first available designer, or let the designers choose themselves which project they want to work on • Optionally it would have groups (corresponding to a subscription plan) with different clients and different designers in each • Optionally it would communicate with other apps so that client and designer management tasks (access, payment, etc) can be automated

I’m open to all suggestions, not just the selection above. Ultimately I guess I’ll have a custom app developed on a no-code platform, but to begin with I need something simple and ready.

Reminder: it is only for graphic design, between my designers and my clients

169k views169k

Comments

Detailed Comparison

Framer	Figma
Framer is a JavaScript framework that makes creating realistic prototypes a breeze – complete with filters, spring physics and full 3D effects. Framer Generator is a desktop app that imports the resources and folder hierarchy from Photoshop files (Sketch coming soon). Import your design and immediately start to add interaction and animation.	Figma is the first interface design tool with real-time collaboration. It keeps everyone on the same page. Focus on the work instead of fighting your tools.
Generate assets out of Photoshop to set up new projects.;Animate any layer in 3D space with spring physics and bezier curves.;Hardware accelerated for high frame rates, based on CSS transforms.;Works on desktop, mobile and tablets. Plays well with WebKit.	Online Sketch alternative; Free for small teams; Easy to use
Statistics
GitHub Stars 5.9K	GitHub Stars -
GitHub Forks 477	GitHub Forks -
Stacks 369	Stacks 4.2K
Followers 502	Followers 2.5K
Votes 32	Votes 101
Pros & Cons
Pros 18 Great for prototyping 6 Free 5 Fast idea validation 3 Integrates right with Photoshop	Pros 19 Web-based application 11 Intuitive interface and perfect collaboration 9 Free software 8 Highly Collaborative 8 Works on both Mac and Windows Cons 6 Limited Export options
Integrations
Android OS macOS Sketch iOS	Trello Coda ProtoPie Principle Dropbox Slack Storybook Notion Pendo Zeplin

What are some alternatives to Framer, Figma?

Sketch

Easily create complex shapes with our state-of-the-art vector boolean operations and take advantage of our extensive layer styles.

Adobe Photoshop

It is the best in the world of graphic design and image processing software that will realize any of your ideas. Create and enhance photos, illustrations and 3D graphic objects.

Adobe XD

A vector-based tool developed and published by Adobe Inc for designing and prototyping user experience for web and mobile apps.

Zeplin

Collaboration app for designers & developers. Supports Sketch and Photoshop (on beta!).

Blender

It is the free and open source 3D creation suite. It supports the entirety of the 3D pipeline—modeling, rigging, animation, simulation, rendering, compositing and motion tracking, even video editing and game creation.

ProtoPie

It is the easiest tool used to turn your UI/UX design ideas into highly interactive prototypes for mobile, desktop, web, all the way to IoT. ProtoPie runs on macOS & Windows and the player app is on iOS and Android.

Readymag

Readymag—an online platform for website creation focused on design & creativity. Advanced typography. Powerful animations. Code injection & third-party tool integrations.

Inkscape

It is professional quality vector graphics software which runs on Windows, Mac OS X and Linux. This software can be used to create or edit vector graphics such as illustrations, diagrams, line arts, charts, logos and complex paintings.

Affinity Designer

No bloat, no gimmicks, just all the tools you need, implemented how you always dreamed. It is a stripped back, pro-end workhorse that will always get your job done. It was created to thrive on the electric pace of the latest computing hardware. Live, responsive and incredibly fluid, it’s simply a joy to use.

Affinity Photo

It is born to work hand-in-hand with the latest powerful computer technology, it’s fully-loaded photo editor integrated across macOS, Windows and iOS.