Need advice about which tool to choose?Ask the StackShare community!
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.
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
Zeplin is great for Developer handoff and setting as source of truth for Design and Developemt. InViosion is the standard for communicating/testing design ideas and prototypes with stakeholders. Both applications offer unlimited projects. I use them on a daily basis at big enterprises and for small weekend projects.
I have been using Basecamp since 2008 to handle my client communications. I have gone through all of its three iterations.
I'd recommend Basecamp above the others because:
- It is a communication tool through and through. Looking at your description, that seems to be what you need. Zeplin is a developer handoff tool. It isn't designed to cover a more broad use case as you describe. Invision has some features that you want, but it is primarily a tool for building quick low-fidelity prototypes from website mockups. Figma is a great design tool. For the last two, communication is a secondary feature.
- It was designed by a design agency (37 Signals) for their own needs, which were quite similar to yours. (They later closed the agency to focus on Basecamp as a product full-time)
- It has flat pricing that doesn't count the number of projects, clients or team members you have. You don't have to think twice about opening another project or inviting another user. You always pay the same price.
- It can separate team and client communications. The team can talk about something without the client ever seeing it, in the same context.
- It can keep todo lists, which I think you will need anyway.
- Access control is based on projects. Every team member or client will only see the projects they are invited to. They will not even know the existence of others. (Except admins. They can see and join all projects)
- It is easy to understand and use. The design is free of clutter and easy on the eyes. Your clients (especially the tech-averse ones) will appreciate it.
- It has mobile/desktop apps with the full functionality of the web app. You won't have to wait for someone to sit down to get a quick approval.
The only real downside for me was the lack of language support in the user interface. You will be fine if your users understand some very basic written English. Some of my clients did not, so I had to walk them through it.
Pros of Figma
- Web-based application19
- Intuitive interface and perfect collaboration11
- Free software9
- Highly Collaborative8
- Works on both Mac and Windows8
- Great plugins, easy to extend7
- Large community, tutorials, documentation6
- Hands done the best design tool for collaboration!6
- Works on multiple OS's6
- Imports Sketch files6
- Prototyping, design files and comments all in one place5
- Interactive, event-based prototypes5
- No more syncing between Sketch and InVision4
- Import XD files1
Pros of Framer
- Great for prototyping18
- Free6
- Fast idea validation5
- Integrates right with Photoshop3
Sign up to add or upvote prosMake informed product decisions
Cons of Figma
- Limited Export options6
