Covid-19 Update : Business as usual |Find out more
28th August 2020

Web design software: Adobe XD vs Figma in 2020.

by James H.

Introduction.

There’s a lot of ongoing discussion (and heated debate) around which software UI designers should be using in 2020. Here at KOTA, the team’s been using Adobe XD for a while now so we’ve gotten rather comfortable with its features, both the good and the bad.
It’s incredibly agile and has totally transformed our design process but there’s always room for improvement. We’re always keen to see what other options are out there. One of it’s hottest competitors, used by many big agencies, is Figma. We’ve tested it extensively and here are the top 5 things we love about each.

 

Adobe XD:

  1. Component States – Both XD and Figma have incredibly powerful interaction and animation triggers for making fully functional high fidelity prototypes. XD seems to have been playing catchup with Figma recently with features such as its smart animate functionality. However, one area it’s clearly leading in is its multi-component state options for click, hover and even voice commands! XD allows you to seamlessly add complex interaction states for anything you need, whether that’s a simple button click state or an image component you want to expand to full screen. This is all possible within one component, there’s no need to create multiple versions of assets to create this functionally. You can achieve similar things in Figma using workarounds and multiple duplicates but it’s nowhere near as quick or as streamlined.
  2. Layer Stacks – This is a new one for XD but, to be fair, Figma has had a similar feature since December 2019. XD has played catchup here, yet it’s been executed so well it’s worth shouting about. In a nutshell, any layer group can be turned into a stack with one click. XD automatically detects which direction your group is going in (like a horizontal carousel versus a vertical list) and then lets you tweak the internal padding and spacing between each element. You just click and drag in the space between any element to watch your design expand and push any content below that item down along with it. You can even use modifier keys to make the spacing between every other element match, this is especially useful for adjusting the spacing between image grids, text items and more. It’s literally flexbox CSS baked into your design tool. The implications for this are massive. On a smaller scale, you can have auto-expanding buttons, depending on copy size. On the larger scale, you can tweak component sizes or paragraphs in a page layout, knowing that every other element below will keep its relative spacing moving down the page. Already, we’ve found it difficult to go back to the old way of doing things, such as pasting in updated text from a client and then having to move every other element down to accommodate it.
  3. Previewing – This one’s a close call between Figma and XD. Figma has the ability to share the live canvas from any browser window where clients can watch your cursor guide them through, which is really useful. Even though XD lacks this feature, it’s preview link generation is pretty robust. In our opinion, the feature that pushes XD ahead is its ability to create video walkthroughs directly from the preview window where you test your website, including the ability to record microphone audio for descriptions. With the current lack of face to face meetings, dodgy internet connections and calendars filled to the brim with Zooms, this is a game-changer. It’s incredibly useful and time-efficient, being able to send a video walkthrough to a client rather than doing it via screen sharing where the resolution doesn’t always show your designs in their best light. This means we can actually just chat through feedback on calls rather than trying to do everything at once.
  4. Updates – Since XD is from Adobe, our team is already using their other apps in the Creative Cloud. All the apps work together seamlessly and we know Adobe will be supporting XD well into the future. This is great for us and our clients as well, as we can guarantee our files will work for the foreseeable future. There is a regular stream of software updates which keeps the software secure and future proof, as well as keeping parity with its competitors.
  5. Animation – XD’s smart animate lets you interpolate between loads more design details than Figma’s equivalent, including paths, character spacing, paragraph spacing, line spacing, rounded corners and more. Combining smart animate with XD’s component states means you can do some really cool things with morphing shapes, transitioning elements and expandable type. The ability to use smart animate between both component states and artboards allows for so much flexibility, we’ve barely felt the need to fire up After Effects to prototype anything.

 

Figma:

  1. Pagination – In Figma, you can organise your files into pages, each page has its own canvas with its own set of artboards (frames in Figma). This is incredibly useful when you want to keep files neat and tidy when you’re testing things out. If your site is complex enough, you might want to have multiple versions/states of a one-page template and use a page per template. Alternatively, you might just want to have a section for approved layouts vs experiments. There’s a lot you can do with it, which spares you the trouble of making multiple versions of one file just to test things out between different team members. You can also keep your design development in files this way, useful for case studies and handovers, so team members can see how the design has progressed without needing to go through many different files. XD’s limited canvas size is really frustrating when you want to keep previous versions in the same file without confusing other team members about what’s final at a glance.
  2. Style management – The style management in Figma is very robust and flexible. It’s much more intuitive than XD’s and feels truly integrated into the UI. In XD the text style management feels like a hangover of the Photoshop CC library widget, just pushed onto the left-hand side of the UI. You can’t even see your layer window at the same time as your text styles! In Figma the style management is intuitively placed next to the editing controls. You can click on any element and instantly see its associated style, you can edit it or unlink it one click. You can even use forward slashes to create folders (Like “Desktop / Header1″ or “Mobile / Header 1”) of styles in your list. This is incredibly useful for larger projects when you need clear signposting between different breakpoint type styles or separate lists for separate typefaces. Unlike in XD, you can also create global styles for layer effects such as drop shadows and strokes which is essential for modern design systems.
  3. Component management – This is where Figma really starts to shine as a serious product design level product. It makes grouping, categorising and editing massive component libraries really simple. Just like type styles, you can use forward slashes to create groups and subgroups of components to help make sense of really large and complicated design systems. In XD you just get a giant list of all components which is much harder to parse. To be fair, XD has caught up on a lot of features this year, such as allowing for nested components, shared libraries and overrides, but Figma was built with this in mind and is just nicer to use.
  4. User Interface – This might be a personal preference but the Figma’s UI feels more intuitive. Your layers are always visible on the left, even if you’ve got a plugin widget open or are editing styles. The nav bar across the top allows for quick access to basic controls. Using dropdowns and the editing area on the right has really clearly signposted sections. we feel like we spend a lot of time in XD clicking on tiny buttons in corners to get to really key parts of the UI.
  5. Collaboration – Figma was built from the ground up with collaboration in mind. It’s so easy to share a link with a team member and jump into a file together. No need to ask if they’ve synced the latest version of a file, or ask them to ‘get out’ of a file so you can go in. Everyone has a single source of truth and you can work together in a file with no slowdowns or issues. It was incredibly cool watching a team member’s cursor go around the screen for the first time, if not a little creepy! You can also share a link with clients allowing them to see the entire design canvas, including your cursor for walkthroughs. It’s great to have the flexibility of sharing prototype previews for interaction, or canvas links to chat about overall design details.

 

Conclusion.

Ultimately every team will have different needs, but both tools cover all the basic needs of a designer. If we had to sum it up we would say Figma is still the best tool for designing apps and complicated SAAS products due to its flexibility and strong collaboration tools. At KOTA, we primarily design websites and working prototypes with slick animations, which are the essential part of that process. XD’s smart animate and component states simply make prototyping a breeze.

With that in mind, Adobe XD is still the winner for us, but it’s a constant game of cat and mouse. In a few months time, who knows which app will come out on top! We’ll keep our eyes peeled for new updates to both.


Interested in working with us? Call the KOTA studio on +44(0)20 3951 0562.