If you are reading this article or are working in product\/UX\/UI design, there is a very good chance you are using Adobe XD, Sketch or Figma.<\/p>\n\n\n\n
This article will talk about the similarities and differences between each of the tools and how you can take advantage of using a combination of the tools.<\/p>\n\n\n\n
Adobe XD<\/h2>\n\n\n\n
Adobe XD has the most diverse range of features when it comes to prototyping<\/p>\n\n\n\n
You can trigger prototype interactions with:<\/p>\n\n\n\n
- \n
- Tapping\/Clicking<\/strong> – the standard interaction used by all tools<\/li>\n\n\n\n
- Dragging <\/strong>– You can drag an element to trigger a prototyping interaction. This works with elements that are common between two screens. So the element has a start and end point.<\/li>\n\n\n\n
- Keyboard or Controller buttons<\/strong> – You can assign keyboard keys or gamepad buttons to trigger as triggers<\/li>\n\n\n\n
- Voice <\/strong>– You can use the microphone on your device to trigger the interaction. For example, you can say something like \u201cback\u201d to go to the last artboard.<\/li>\n<\/ul>\n\n\n\n
![\"\"](\"https:\/\/magicul.io\/blog\/wp-content\/uploads\/2023\/05\/adobe-xd-interaction-type.png\")
Adobe XD Interaction Types<\/figcaption><\/figure>\n\n\n\n All interaction types in Adobe XD.<\/p>\n\n\n\n
It supports many transitions that are based on very common ones used in web and app design.<\/p>\n\n\n\n
![\"\"](\"https:\/\/magicul.io\/blog\/wp-content\/uploads\/2023\/05\/adobe-xd-disolve-interaction-778x1024.png\")
Adobe XD Dissolve Interaction Type<\/figcaption><\/figure>\n\n\n\n Animation features in Adobe XD<\/p>\n\n\n\n
Special features – XD<\/h3>\n\n\n\n
Aside from the standard features, XD offers Auto Animate<\/strong>. This allows you to create seamless interactions between two artboards with common elements.<\/p>\n\n\n\n
For example, if an artboard has a square and in the second artboard the same square is in a different position. Adobe XD will animate the change in position from the first artboard to the second. This is also the case for colors, transparency, etc..<\/p>\n\n\n\n
There are also speech and audio playback options. These are unique to only XD and allow a reading of a predefined text or playback of an audio file.<\/p>\n\n\n\n
![\"\"](\"https:\/\/magicul.io\/blog\/wp-content\/uploads\/2023\/05\/adobe-xd-speech-interaction.png\")
Speech playback option in Adobe XD<\/figcaption><\/figure>\n\n\n\n Figma<\/h2>\n\n\n\n
Figma has very similar functionality to XD as you can see in the following picture.<\/p>\n\n\n\n
![\"\"](\"https:\/\/magicul.io\/blog\/wp-content\/uploads\/2023\/05\/figma-animation-instant-1024x693.png\")
All Figma prototype animations are similar when compared to XD.<\/figcaption><\/figure>\n\n\n\n Differences to other tools – Figma<\/h3>\n\n\n\n
Hover functionality<\/strong> – Figma has a different system for dealing with hover functions when compared to XD. It does not require you to use components (like in XD) in order to trigger a hover state.<\/p>\n\n\n\n
You simply add it to an element and you are ready to go.<\/p>\n\n\n\n
This is neither positive nor negative, as they both work well.<\/p>\n\n\n\n
Overlays – <\/strong>Figma also has a more automated and better overlay process than XD.<\/p>\n\n\n\n
In XD, you have to create backgrounds for overlays. In Figma you have the option to add this when selecting overlay as an interaction.<\/p>\n\n\n\n
Special Features – Figma<\/h3>\n\n\n\n
Figma has a similar feature to XD\u2019s Auto Animate called Smart Animate.<\/p>\n\n\n\n
This is like XD’s auto animate. It can also be used to show animations and is excellent for developer handoff.<\/p>\n\n\n\n
Sketch<\/h2>\n\n\n\n
Sketch uses a similar system to both Figma and XD for prototyping. You simply link different elements to different artboards.<\/p>\n\n\n\n
Sketch is, however, much more basic for prototyping compared to Figma and XD.<\/p>\n\n\n\n
Animations are limited in Sketch as you can see in the following screenshot.<\/p>\n\n\n\n
![\"\"](\"https:\/\/magicul.io\/blog\/wp-content\/uploads\/2023\/05\/sketch-animation-types-prototyping.png\")
Sketch Animations for Prototyping<\/figcaption><\/figure>\n\n\n\n You have the option to have:<\/p>\n\n\n\n
- \n
- No animation<\/li>\n\n\n\n
- Animate from the left<\/li>\n\n\n\n
- Animate from the right<\/li>\n\n\n\n
- Animate from the top<\/li>\n\n\n\n
- Animate from the bottom<\/li>\n<\/ul>\n\n\n\n
There are a number of good specific prototyping tools that have worked very well with Sketch, such as Principle, Flinto and Framer.<\/p>\n\n\n\n
So this is probably the reason that animation support is very limited and was never fully developed by Bohemian Coding.<\/p>\n\n\n\n
Special features – Sketch<\/h3>\n\n\n\n
You can also create \u201chotspots\u201d, which allow you to select an area of your choice to click or tap on to create an interaction.<\/p>\n\n\n\n
These are not tied to a specific element on an artboard, but rather placed over the top. This is quite useful if you are prototyping with images and you just want to create tap targets.<\/p>\n\n\n\n
![\"\"](\"https:\/\/magicul.io\/blog\/wp-content\/uploads\/2023\/05\/sketch-animation-prototype-1024x561.png\")
<\/figure>\n\n\n\nA normal interaction linked to the play button on the left and a \u201chot spot\u201d on the right<\/p>\n\n\n\n
Hotspots are useful for things like creating a quick prototype with some hand drawn wireframes. You would just need to add the \u201chotspots\u201d and you have a prototype that you can use to test your ideas.<\/p>\n\n\n\n
Aside from this, Sketch has no real special prototyping features.<\/p>\n\n\n\n
Now let\u2019s look at how we can convert prototypes from various tools into the formats we want.<\/p>\n\n\n\n
The Magicul Converter<\/h2>\n\n\n\n
You might be thinking that there already are native conversion options on the market and this is true.<\/p>\n\n\n\n
But, none of them allow you to convert your prototypes.<\/p>\n\n\n\n
Magicul does!<\/p>\n\n\n\n
So what can you convert?<\/h3>\n\n\n\n
Right now we can convert prototypes from the following:<\/p>\n\n\n\n
- \n
- Figma to XD<\/a><\/li>\n\n\n\n
- Figma to Sketch<\/a><\/li>\n\n\n\n
- XD to Sketch<\/a><\/li>\n<\/ul>\n\n\n\n
Let\u2019s try out a few quick conversions to see the results<\/p>\n\n\n\n
Figma to Sketch Conversion<\/h3>\n\n\n\n
We have set up a file to try out the conversion between Figma and Sketch.<\/p>\n\n\n\n
Here is how it originally looked with some very simple click interactions.<\/p>\n\n\n\n
![\"\"](\"https:\/\/magicul.io\/blog\/wp-content\/uploads\/2023\/05\/figma-animation-before-convert-1024x448.png\")
<\/figure>\n\n\n\nNo animations have been included in the prototype, as these default back to no animation upon conversion.<\/p>\n\n\n\n
You can add any back in from Sketch directly, however Sketch has very few animations to work with.<\/p>\n\n\n\n
When the file is converted using Magicul, the result looks like this:<\/p>\n\n\n\n
![\"\"](\"https:\/\/magicul.io\/blog\/wp-content\/uploads\/2023\/05\/prototyping-animation-converted-1024x404.png\")
<\/figure>\n\n\n\nWe can see that the prototyping interactions have been perfectly preserved in the converted file.<\/p>\n\n\n\n
Figma to XD Conversion<\/h3>\n\n\n\n
For the Figma to XD conversion we can use the same Figma file that we used in the last step to also convert to XD.<\/p>\n\n\n\n
As was the case with the previous file, no animations have been included, as these will not be converted due to this not being available in Figma\u2019s API.<\/p>\n\n\n\n
Here we can see the results in Adobe XD:<\/p>\n\n\n\n
![\"\"](\"https:\/\/magicul.io\/blog\/wp-content\/uploads\/2023\/05\/xd-animation-prototyping-1024x445.png\")
Prototyping Animation in XD converted from Figma<\/figcaption><\/figure>\n\n\n\n Both click interactions have been preserved perfectly.<\/p>\n\n\n\n
You can now take advantage of the unique prototyping features in XD and take advantage of things like voice in your prototyping.<\/p>\n\n\n\n
XD to Sketch Conversion<\/h3>\n\n\n\n
We have created a quick file in Adobe XD with two screens and two simple \u201cTap\u201d interactions.<\/p>\n\n\n\n
Here is what the file looks like in XD:<\/p>\n\n\n\n
![\"\"](\"https:\/\/magicul.io\/blog\/wp-content\/uploads\/2023\/05\/xd-prototyping-animation-figma-1024x748.png\")
<\/figure>\n\n\n\nAfter the conversion, we can see how the file looks in Sketch.<\/p>\n\n\n\n
![\"\"](\"https:\/\/magicul.io\/blog\/wp-content\/uploads\/2023\/05\/sketch-prototyping-animation-converted-1024x725.png\")
<\/figure>\n\n\n\nThe two interactions that we created are there and you can now work further on the file, hand the files over to our client or many other things!.<\/p>\n\n\n\n
Recommendations for prototypes when using the converter:<\/h3>\n\n\n\n
- \n
- Simple clickable prototypes work best because these are supported throughout all tools mentioned above. For example, tap interactions with no animations will work best.<\/li>\n\n\n\n
- Do not use prototypes that have compatibility issues e.g. if there is no equivalent function in a certain tool, it will not be able to be converted. A good example of this is drag functionality in Figma. This will not translate to Sketch as there is no similar prototyping interaction in Sketch. This will just create prototypes with gaps that will not be able to be filled.<\/li>\n<\/ul>\n\n\n\n
I hope you enjoyed reading about prototyping in the various product design tools.<\/p>\n\n\n\n
Try it for yourself at magicul.io<\/a><\/p>\n\n\n\n
If you want to know more about us or our products, simply get in touch with us on the following email:<\/p>\n\n\n\n
- Figma to Sketch<\/a><\/li>\n\n\n\n
- Figma to XD<\/a><\/li>\n\n\n\n
- Dragging <\/strong>– You can drag an element to trigger a prototyping interaction. This works with elements that are common between two screens. So the element has a start and end point.<\/li>\n\n\n\n