Modern web design tools
Out of context: Reply #4
- Started
- Last post
- 7 Responses
- nb4
First of all, OP, bear in mind that there is TONS of overlap across all the tools you mentioned. Some of the tools have been around a long time and were more necessary in the past. For example, only recently has Figma included animated prototypes. A couple years ago, you needed something else for animation.
I’ll try to keep it short.
Figma, Sketch, XD are UI design tools that have some basic prototyping and “smart” animations. This allows design and simple prototypes to be done quickly. There’s a lot you can do in Figma to show UI animations or interactions but it can get a little hacky to get it to look right. At the end of the day, the animation and prototyping in these tools is fast but limited.
Some people want more powerful tools for prototyping (to make a more real looking or working prototype) so that’s where you get the Framer, Origami, etc. Here’s a quick breakdown of what you asked. This is just the main differentiator for each.
Origami: created by FB to be a powerful prototyping tool for native apps. As mentioned by someone else, probably the most powerful mobile app prototyping tool. Not terribly difficult to learn, but if you’re making websites or just basic animation it is overkill.
Framer allows more specific and complex prototyping for mobile and web designs. Sort of a hybrid code/design environment, although it no longer requires you to code. (It once did.)
Principle allows more complex prototyping than Figma/Sketch/XD and is useful for mobile app prototypes. However, a lot of what Principle originally was made for can now be done right inside Figma.
Webflow is a very different tool. It’s not just for prototyping. It allows you to design a responsive website with animations and launch it without knowing code. There’s also an e-commerce package for webflow. It’s not super easy to learn but some agencies use it if they don’t have engineers and want to launch experience-rich websites.
So what do professionals use? Depends on their team, the scope of their product, and what level of prototype they want to test internally or show a client.
You are on the right track of wanting to create designs with some interactions to show a client and then pass it off to a developer to build. This is a very common approach today. To do this, most people start the design and prototype directly in Figma/Sketch/XD and then if they can’t get the prototype to work the way they want within the app they started with, they look to one of these more advanced prototyping tools you mentioned, depending on their needs.
To handoff, you would share “view only” access to the designs (for specifications) and share the prototypes to help the developers understand the intent.
- This.duckseason
- Cheers for taking the time to post this :)Gnash
- Thank you!bocadeets
- Nice summary, I would add that Invision has more advanced animation tools than the others.zarkonite
- @zarkonite I think you mean Invision Studio. I haven’t looked at it since it came out and was similar to Sketch. Don’t know any teams using it.nb
- If you’re still lost, just use Figma (or Sketch or XD are fine) and then mock-up advanced animations in any app you prefer, as needed.nb
- I use AfterEffects for custom animations/transitio... There's a plugin called "bodymovin" that will export as .json for the devs.brandonp