The War Of Prototype Tools

A Jolly Dev
ZeduHow
Published in
4 min readJan 15, 2019

Even Developers can be UX Designers. How? Well these awesome tools have been filling the gap. But which one is the best for us?

While Adobe has been the dominant player in the arena for creative tools (from Photoshop, Illustrator, AfterEffects and many other industry standard tools), sometimes you need a new way to bring your idea to life. But how? Your going to code the entire app out with the features and design it and publish it and pay the fee and do all of that? No of course not, after using figma and Adobe XD it’s time to save you some time.

Why do I know? Simple I’ve been going to hackthons, Startup weekends where I did design prototypes with these tools and in these events we need to have 2 things:

1st We want to save as much time as possible.

2nd We want the apps to look good and easy on the eyes.

Now we know what we want in a tool let’s see which one of these comes out on top.

Highlights of Figma

When designing a tool with a team of designers, bosses, project managers, developers and even some users, Figma is leading the way with it’s collaboration features. I find that for more complex projects, there is a lot of handoff between different designers, developers, project managers and even the client or user.

Rather than saving over someone else’s file, it would be a lot more organized/efficient if we can just work on the same file, at the same time.

Before I used Figma I feared the team projects now I don’t.

Here’s some things that work well within the figma:

  • If a PM can check in on the progress of a doc as I’m working on something else, without one of us being kicked out of the file.
  • Specs will be generated in the browser.
  • Being browser based = faster critique with remote teams/designers.

Automatic version control — This is a feature to die for I’m looking at developers who haven’t used version control and paid the price of re building projects on the weekends. Figma doesn’t need you to save constantly, and you can always go back to an older version of the file to do more explorations.

Cons:

When updating components, there isn’t a clear indication of who made the change (Since this is a main seller it’s kinda annoying.)

There’s also no one to tag the version history, so it may be difficult to go back to a version of the design apart from going in to view each past file version.

It seems that the Prototyping mode only has basic screen linking…hopefully this will change in the future.

Highlights of XD

As XD is part of the Adobe family, it’s connected to other Adobe applications. So importing your files from illustrator/Photoshop is possible if you save the file as an SVG. There will be times you want to use image/photo editing in Photoshop, or icon creation in Illustrator and have a smooth workflow between your tools.

  • XD feels clean and very fast. There’s not a lot of lag even in large files.
  • Repeat grid is a time saver for creating multiple visual elements and adding adjustments for spacing and data from text files.
  • The new auto-animate option when prototyping feels very much like an “easy-button” for animation, with easing features.

I use Adobe XD for one person projects, It’s easy it’s offline making it good to use in bad or no wifi spaces (Sometimes it’s good when your at a hackathon and while presenting your prototype and the wifi is slow or not working it doesn’t crash leaving the other teams wonder what kind of witch craft you’ve been using.)

Assets panel looks promising, to either allow saved styles or export the panel as a style guide.

Cons:

They have left one cool feature only mac that is the live preview on phone

2. It’s downloadable for only Windows and Mac meaning sorry Linux users…

3. No Version Control so get used to (Final, Final Final, FINAL THAT IS SO FINAL THAT REALLY IS FINAL,)

Conclusion

Both are promising and have delivered a lot of updates in the last few months. Time will tell how each integrates with other plugins to enhance areas where they aren’t particularly strong in (such as prototyping or delivering design mocks for research).

Thanks for reading, The Jolly Dev sitting the server room crushing that latest updates.

Wanna discuss this with us? Then join our discord server!

Discord: https://discord.gg/uUUHsUA

Twitter: https://twitter.com/ZeduHow

See you later, Have a good day! ❤️

--

--

A Jolly Dev
ZeduHow
Editor for

Co-Founder at ZeduHow, Web Developer, Designer, Writer Who codes IoT sandwiches.