From Adobe XD to Figma
Why I migrated from Adobe XD to Figma
Over the years design tools have evolved to meet the demands of users; the designers. Sketch dominated the landscape, but then Adobe XD, Figma, Invision, Marvel, Framer X to name a few, gradually arrived on the scene.
When I first started off in the UX field, the only tool I used was Adobe Photoshop. Looking back, it wasn’t user-friendly for web-based designs. It usually took more time for me to get things done, for example, slicing the design up ready for export was a real hassle.
I later discovered Sketch, which became the industry standard for UX/UI design. I combined my use of Sketch with Invision to support prototyping, which allows you to essentially stitch wires together to form an experience for testing with real users and showing stakeholders, clients and developers how a particular design would flow.
Fast forward a few years, I migrated to Adobe XD. It made sense because it’s part of Adobe Creative Cloud and caught my attention to experiment with initially. It does everything, from wireframes, high fidelity, prototype to engineers getting assets from and so on. It really is a one-stop app. It was a very good design tool. And still is.
I never imagined I’d be moving from XD, because of how powerful it has become and how good it’s proved to be over the years. However, the arrival of Figma and its great features swayed me.
The usability issues of Adobe XD as the team expands
As the team grew in the organisation, so did the demands of what I wanted from XD. The more I used it, the more I realised there are things that didn’t work for me in crucial situations. I felt frustrated.
Here are the main areas I found difficult when doing my day-to-day job, but just to caveat — XD has probably been updated and improved since writing this.
- Collaboration — The coediting feature is a neat idea although you have to remember to enable coediting in order to allow fellow designers to work on the same file. It always catches the team out. Another thing is that it doesn’t always work seamlessly and can be a bit buggy when designers are in the same design file. If a designer doesn’t update their XD software, your entire team can’t access the file and this is a real pain.
- Different experiences — Your designs are in one place and comments are in a different experience which isn’t intuitive and can be messy when tracking comments for feedback.
- Fix scrolling — When prototyping for testing, the scroll height on the nav bar is fixed at a set number of pixels. So during testing sessions, where the user has a different size device to the one you have designed, the layout will be messed up.
- Exporting designs — Part of the feedback I received when sending a design for review to stakeholders is that they can’t visualise the design on a device for an in-situ experience.
- On the cloud — Local files have to be synced to the Creative Cloud to enable sharing, which is a hassle and when updating local files, they need to be re-synced and re-shared.
- Cloud storage limits — The Starter plan only lets each person share a file and has a limit of 2GB of file storage.
So why migrate to Figma?
It’s not only because Figma was the programme most talked about by other companies migrating over to it and elsewhere on the internet, but my friend Chuck and James from Residently also recommended the tool.
One of the main reasons I ended up going to Figma was that engineers really like using the tool. They prefer the interface being much simpler to use and the integration of the design system to Storybook is much more straightforward to do. This really sold the idea to the company.
The main reasons why Figma won me over are:
- Collaboration first — Figma was built for collaboration. So sharing files is just so easy. If you have ever used Miro then you know what I mean. The collaboration is seamless, everyone jumps in and gets involved from giving feedback with the comment feature straight on the design file, and engineers dive in without having a separate link. It is a one file fits all.
- Single source of truth — Figma is a web-based app.t is super fast on the cloud where all your files are stored which means no more version mixups. Your design files are a web link so that your entire team has that collaborative space.
- Fix scrolling — As mentioned above how XD’s scroll height on the nav bar is fixed at a set number of pixels. With Figma it allows you to ‘fix to bottom’ of the frame. That way the nav bar is always fixed to the bottom of the device height regardless of device size.
- Prototyping — You can select different devices to showcase your designs. It provides an in-situ experience where you see designs on an actual device.
- Community — Plugins, UI kits and files are much more accessible, no need to download files — everything is in one place.
- Engineers love it — If the tool is loved by engineers then you’re off to a winner. Nothing worse than engineers coming back to you on a design asset you forgot to mark as export.
- Design system — Figma creates the single source of truth for your team so everyone can contribute to it and it is user-friendly.
To sum it up, here is a quote that encapsulates it perfectly, by the Design Lead at Medium.
“Figma has designed the future. It’s the modern approach to product design.”
Summary
This was a really good move for me and now I am able to work more effectively in collaborating with my squad and the tribes. At Design Crit sessions, UXers share their Figma design files and everyone jumps in and comments on the designs for feedback. Engineers go in to inspect files, grab code snippets, and export assets. And so on.
I hope my thoughts have contributed to your decision-making but whatever you end up using, make it work for you — everyone is different. If you have similar experience you want to share, feel free to drop me a message.
I wonder what the next design tool will be and how it can impact the design industry and our everyday lives.
Thank you for reading : )
If you enjoyed this, please share it and follow. You can also reach out to me on LinkedIn Simon Hoang.
