An old-school method of designing the layout and flow of a system may involve the use of papers. It is difficult to make modifications while using paper, and it is required to redraw in a new piece of paper and reorganise the sequence from time to time. Adobe XD and Figma are introduced to address these challenges and make it easier to illustrate the flow of the system in a form of wireframe or prototype, saving a significant amount of time. However, there must be certain distinctions between these two platforms.
The table below compares and contrasts the similarities and differences between the two platforms.
Adobe XD |
|
Figma |
Similarities |
||
|
Realistic user interactive (UI) prototypes that effectively express the design idea and uphold team alignment. It offers a strong and user-friendly vector-based experience (UX) design platform that gives teams the resources they need to create the best experiences in the world. Most of the time, it is used to handoff the wireframe of the concept to the developer. |
||
|
Presenting apps or websites in a form of wireframe or prototype. |
||
|
Comment section from the teams who are sharing the same folder, allowing live interaction and discussion. |
||
|
Converting code to HTML, CSS using plugin. (e.g.: Anima plugin) |
||
 |
Logo |
 |
|
March 14, 2016 |
Date release |
September 27, 2016 |
|
29.0. 32 |
Latest version |
107.0. 0 |
|
Only Mac OS and Windows system for designing, mobile for preview. Can use both offline and online. |
Platforms available |
Desktop version, browser and mobile (Chrome OS, Linux, Windows & Mac OS). Can only use online. |
|
English, Spanish, French, German, Japanese, |
Languages support |
Only English. |
|
Only use for designing prototype of apps and websites collaborate with Photoshop and AI. |
Features |
Allowing to create logo, apps, website and more. |
|
Creative Cloud with limited storage and share pax, for free version / trial. |
Cloud |
Cloud storage and sharing is unlimited, for free version. |
|
7 days free trial. Required to pay after the trial. |
Period of used |
Free to use. Only paid for extra features. |
|
Only members who have Creative Cloud account. |
Document sharing |
Allowing anyone to view or edit the document in their browser with the invited link. |
|
To generate the CSS, Export for Web in Share > Development and publish the design specs. CSS is display under CSS snippets section.
To generate the HTML, Export for Web in Share > Development and publish the design specs. HTML is display under HTML property inspector.
|
Visibility of the code |
The CSS code is shows according to your design on the spot by clicking on a layer. Currently supporting CSS, Swift and XML but it only for visual properties and spacing, no JavaScript or other logic is exported. |
|
Can define two interaction per UI element. |
Interactions of the UI element |
Can only define one interaction per UI element. |
|
Reviewers can comment on prototypes only after their owner has generated links to them. |
Comments |
Users can add comments on the spots on the design once they are invited to the folder. |
|
Allowing clients or stakeholder to leave comment on the design. At the same time, voice narration to demonstrate a comment. |
Previewing |
More time to load on browser. For clients or stakeholder, they can only view without leaving any comment on the design. |
|
Like Figma, but only for portrait view on mobile phones. |
Frame / Artboards |
Any frame sizes (Windows and Mac desktop, iPhones, Android, Google Pixel, tablets, watches, social media, custom) that in landscape or portrait view |
|
Relatively expensive. |
Subscription Cost |
Affordably priced and with access to a select number of Adobe XD's paid features. |
Example interface of Adobe XD
Example interface of Figma
