How to import your XD files into Invision Studio
Invision has established itself as a great tool that at one point had a huge user base. In fact, it was one of the only options for great collaboration and prototyping in the early days of UX/UI design.
This has changed though, with many tools offering prototyping.
Invision has put its hand in the ring and come up with Invision Studio, which promises to offer an all in one solution for designers looking to carry out more or less every function from wire-framing to high fidelity prototyping (with animations and interactions).
Flexibility is something that is very important to me in terms of design tools and generally I like to use XD for most projects, however I can see the appeal in using Studio for a number of reasons.
Invision Studio has a few things that XD simply does not. So how hard would it be to convert and use your XD files in Invision Studio
Reasons to Use Invision Studio
Before we begin, let’s start with some reasons to use Studio:
You need to use Invision
Many agencies and teams still use Invision and it is a tried and tested tool. Being able to stay within the ecosystem is a big advantage and it makes things easier.
Advanced prototyping
This functionality is the biggest draw card of using Studio. Studio offers better animation options than XD.
There is even a video editing style timeline that allows you to fine tune transitions and animations.
Invision Studio can be effectively used as a standalone interaction design tool to create high fidelity prototypes.
Direct publishing to Invision
You can publish your files directly to the Invision App from Studio. This means a more seamless experience for teams using Invision.
For those using XD, the process of getting your files into Invision is a tedious one. To do this you need to convert artboards to images and then import them into Invision.
As you can see there are some really good reasons to use Studio, but what if you don’t want to use it specifically as a tool for your end-to-end process?
Compatibility with other Formats
Invision Studio supports SVG imports, but very limited support for actual design tools.
You can import Sketch files into Invision Studio, but this is the only supported UI design tool.
We can take advantage of this by converting our files into the Sketch format (.SKETCH) first and then importing them directly into Invision Studio.
Now I am going to show you how you can get your XD files into Invision Studio.
In comes the converter
To make the conversion we will use a great little converter called Magicul.
Magicul does not convert files directly from XD to Invision Studios format (.studio), however they do allow you to convert your files from XD to Sketch, which Invision Studio does support.
Let’s get started
Convert the XD file to the Sketch format
- Save your XD file locally (File > Save as local document)
2. Take your XD file and upload it to Magicul.io
3. You can now see a preview of the file. Click on “Convert Now” to start the conversion process.
4. Complete the checkout by selecting a plan and entering your details.
5. The file will now convert
5. Download your file
Import the Sketch/XD file into Invision Studio
Now it’s time to get your converted XD files (now a Sketch file) into Invision Studio.
It’s very simple from here:
- Start by opening Invision Studio
- Click on File > Open OR File > Import and select your file
OR
Simply drag the file into Invision Studio
That’s all there is to it. You can now enjoy using the advanced prototyping features of Invision Studio. Happy animating!
