I began by watching a video of a UX Designer demonstrating the same design process in both Adobe XD and Figma. Her methods allowed me to see that on the whole the applications are similar, however they take slightly different approaches to some tasks.
Video link: https://youtu.be/r1alNWC2ZlU
Notes:
- Adobe XD and Figma shortcuts are different
- Adobe XD – “Icons for Design” plug in, might be useful for future mockups
- Idea for ‘Design Selector’ on my prototype – Overlap circles, but move one slightly to the side, then use the intersect tool. Set the resulting shape and a blend of each circles colour (see Fig.1)
- Figma – Scrolling may be inverted (could be Youtuber’s personalised setup)
- Layout between applications is very similar, but Figma’s is simplified with advanced options in OS’ toolbar menu
- In Figma, font size does not adjust with text box size, unlike Adobe XD
- Figma’ – Auto-layout’ on buttons keeps padding size the same, despite button size
- Icon plug-ins function in similarly to Adobe XD, but the selection is potentially smaller
Having been reassured of the surface-level similarities between the applications, such as the functionality and layout, I decided to dive in a little further. I found a YouTube tutorial that claimed to teach Figma in 24 minutes, and I was hoping to learn more about the advantages of using Figma over Adobe XD, especially as I have heard of Figma being quite widely used by in-house designers at retailers such as New Look.
Video link: https://youtu.be/FTFaQWZBqQ8
Notes:
- Figma has good collaborative functionality and can work in-browser (should the user reworking on a computer that doesn’t support the downloadable application
- Figmaresources.com – Lots of free resources and templates available
- “Evericons” = Resource pack with a lot of common icons
- ‘Duplicate to your drafts’ function allows you to copy other designer’s graphics and files for a head start on prototyping or collaborating
- Shortcuts
- R = Rectangle
- Option (Mac), Alt (Windows) = Show spacing to nearest objects on X/Y planes
It appears that Figma’s collaborative qualities as well as its ability to work on a large variety of machines is potentially why it is favoured so much in the UX industry. I’m really pleased to learn of its similarities to Adobe XD, and I’m looking forward to using it in this project to create my high-fidelity prototypes.
As I will be including 3D models in my prototypes (scanned using photogrammetry), they will likely need to be imported as video files. So, I have also watched the below tutorial on how to use the ‘Anima’ plugin with Figma to achieve this. I have some prior knowledge of using this plugin with Adobe XD for the DM7903 project.
Video link: https://youtu.be/gpAJ6hJ3eFk
References:
AJ&Smart (2020). Figma UI Design Tutorial: Get Started in Just 24 Minutes! (2021). [online] Youtube. Available at: https://youtu.be/FTFaQWZBqQ8 [Accessed 10 Aug. 2022].
Beard, M. (2022). Figma vs. Adobe Xd Design with Me | How Different Are they? [online] Youtube. Available at: https://youtu.be/r1alNWC2ZlU [Accessed 10 Aug. 2022].
Tech Phoenix Media (2021). Add Videos to Your Designs in Figma Using Anima Plugin. [online] Youtube. Available at: https://youtu.be/gpAJ6hJ3eFk [Accessed 10 Aug. 2022].