How to convert Figma to Adobe XD files in one click using Convertify
Follow along with our complete step-by-step free Figma tutorial video walkthrough.
Used in this video
Convertify
コンバート
Export Figma to Sketch, XD, After Effects or Import XD, Illustrator, Google Docs, PDF to Figma — with one click.
Video Transcript
Today I’m going to be showing you how to convert and export your designs from Figma to Adobe XD automatically using a Figma plugin called Convertify.
The first thing we need to do if you haven’t already done so, is just go to the top left corner of your Figma app and click on the little Figma button, and if you go down to "Community" or "Plugins" and search for the word "Convertify", you’ll see a result called "Convertify" pop right up. The first thing you need to do is just jump over to the right hand side, and if yours says "Install", you just need to click that "Install" button and it’ll change to look like mine where it says "Installed" and has a sort of check mark, and once you see it looking like that then you’re ready to go and we can jump back into our project.
I’m just going to be running through a few different designs to show you what it looks like to convert these from Figma to Adobe XD, so the first thing we need to do is just right click anywhere, go down to "Plugins", and then click on "Convertify", and that’s just going to run the Figma plugin that we’ve just installed. It’ll pop right up just in this little window and you can see here that it’s pretty simple, there’s only a couple of options that we can actually look at. You can see a couple of things: the first thing is just letting us know what page it’s going to convert, in this case I’ve only actually got one page, so it’s letting me know it’s going to convert "Page One", it’s giving me a little time estimate down here; it’s telling me it’s going to take roughly two seconds to convert the 65 layers that I’ve got in my file in my Figma design. Then here you can see there’s only two options at the moment; there’s "Convert to Sketch" and then there’s "Convert to XD", which is the feature I’m going to be showing you today. It’s worth noting that at this stage the Figma to Adobe XD feature is currently in BETA, which means that there’s a couple of things that aren’t going to be 100 percent right, but for simple designs like this one, you’re going to find that it’s going to do a really good job. I’ll show you what that looks like now; I’m not going to cover the "Convert to Sketch" option at all in this video, but if you’re interested in seeing what that looks like, we do have another video tutorial that goes into detail and covers a whole bunch of use cases with the convert Figma to Sketch option, but for today I’m just going to be showing you the convert Figma to Adobe XD option.
With that said, I’m going to go ahead and click on this "Convert to XD" button now and that’s just going to convert our page. It took took about two seconds to convert from Figma to Adobe XD, and now it’s letting us save it to our desktop; I just need to pick the file name that I want. In this case I’m just going to leave it the default and click "Save", and that’s saved to my desktop. You can see here the message just lets us know that the converted XD file is ready and we can go ahead and open it right now. I’m going to do that by just going back to my desktop and you can see here, it has generated the Adobe XD file for me and just to confirm this is a Adobe XD document; it’s a real XD file that the Figma plugin has just generated from my Figma design for me. I’m just going to go ahead and double click that file to launch Adobe XD and see what our converted Figma design looks like. That should only take a second, Adobe XD can take a couple of seconds to load up on my side, but there we go; we’ve got our file.
I’m just going to put these next to each other; we can actually see what the differences are and what that looks like. You can see here that it has carried over all of our Figma artboards or all of our frames, and if we look at the layers on the left hand side in Figma and then we look at the layers on the left hand side in Adobe XD, you can see that they’ve all been carried over, and not only that all of the layers inside of each one have also been carried over. We can see here that these are matching up one for one with the layers panel; that’s really cool, as it’s actually carrying over all of the layers, and as you can see over here in XD, I can edit this text. This is "real text from Figma that’s editable", I’m just narrating what I’m typing right now, and that’s that’s pretty neat, that’s exactly what we want. All of the font sizes, all of the typography settings have been carried over, all of the sizes of the bounding boxes have been carried over. If I zoom in on the Figma design you can see that the size is exactly the same, it’s 630 by 183, which we’ve got here, and then 175 is the position, the x offset is 175 in both cases, that’s really cool. Then we’ve got all of our images; these are all carried over one-for-one, the quality is exactly the same, there’s no quality loss involved, you retain all of your image settings if you’ve got export settings on them, it’ll mark them as "marked for export" over here in XD. This is really a one-to-one conversion from Figma to Adobe XD with that one-click process that we just saw.
I just wanted to start off with a really simple file and show you what the conversion process looks like, to show you it carrying over all of those different layers from Figma to Adobe XD and giving you an idea of what that looks like. To just ramp things up a little bit, I’m going to export a more detailed file, so this time I’m just going to open this "Apple Widgets UI Kit" page and I’m going to re-run the Figma plugin just by going to the right-hand side and clicking on the "Convertify" icon, and that will just fire up the Figma plugin again for me without having to open up the right click menu. Once again, I can see here that it’s going to convert the "Cover Page", as I mentioned before if you have more than one page you can click through your pages and the Convertify Figma plugin will automatically update the page name, but also update the time estimate for how long it’s going to take to export or convert that design from Figma to Adobe XD. You can see it changing here, in this case, this particular page will take about 50 seconds to convert over 2,000 layers; whereas the one down here will take one second to convert zero layers, and in that case it won’t even let you convert, it as you can see here; or in this case one layer will take about one second. The page we’re going to look at exporting is going to take 14 seconds because it’s got about 500 layers.
Once again, I’m just going to click on the "Convert to XD" button, and you can see here it’s just letting us know that Figma is going to freeze while this happens; don’t be alarmed about that, it just needs to do that to divert all resources to exporting all those layers and doing quite a lot of hard work behind the scenes to make this this export conversion process happen from Figma to Adobe XD, but once that’s done, as you can see here, now it’s at the stage where it’s just bundling up our XD file and then the Figma plugin UI is usable again.
Okay, it’s finished bundling our XD file from the Figma design, once again I’m just going to click "Save" and send that to my desktop. I’ll close out the Figma plugin just so we’ve got a good view of the design to compare, and this time I’m just going to open up my new XD file. Now that Adobe XD already is running, it opens up a little bit quicker. I’ll put that side by side once again just to compare what we’re going to be looking at from Figma. Just as a brief overview you can see that it’s generally looking really good; we’ve got our artboards saved over; we can see here that we’ve got this little widgets group and that has a whole bunch of layers in it; we can open these up and see that the layers have actually been carried over; if I open those up you can see the layers compare directly with what we can see over here in Figma. When we open it up in XD and just to zoom in a little bit more so we can have a look at the details. Once again, this text is editable; we can jump in there and edit that text without any issues, and of course we could change all these properties now that they’re in there. If I wanted to make that font size smaller I can certainly do that, and that would be just fine. Everything’s positioned as we’d expect, everything’s been saved out, all of the images have been saved out I can move all these around these are groups; I can move those I can dive into the group and move things like this image, I can scale that up or down of course. That’s that’s all looking really nice.
There are a couple of things that didn’t quite get converted the way that we want; the first obvious one is this little widget down here. The reason why Figma has these little arc circles working and XD doesn’t, is because the feature that has been used in this particular case to generate those which is the "arc" feature does not have any support in Adobe XD. Unfortunately that particular feature doesn’t get carried across, and it kind of falls back to this progressively enhanced, well the Figma version you can consider a progressively enhanced version of what we’re looking at here. That’s one thing, the other thing that didn’t quite get carried over would be this nested mask; I don’t know why this particular file has it, but in this particular file there’s a nested mask layer and for some reason that is rendered out like this in Figma. We’ve got this little union boolean operation with another mask on top of it; XD does not support nested masks, so if that mask was just removed which it actually just could be in Figma anyway, I’m not too sure why this particular community file has two masks on it, but that could be resolved just by removing the mask to look like what it looks like in Figma that we’d expect; but besides that, it’s done a really good job of exporting the the file over. All of our little vectors and all of our little icons have all been converted, the typography has all been converted, the images have all been converted; overall it’s looking quite good.
Now, the third example I’m just going to run through is a much larger file and a much larger set of components. Once again, I’m just going to rerun the Convertify Figma plugin and just click on the the Figma plugin icon down here, and you can see that we’re on the "Mobile UI Kit" page, which is what we’re after. I’ll just click on the "Convert to XD" button again, and this one’s going to take about 54 seconds, as this particular file has over 2,000 layers; it’s a little bit of a bigger file than we’ve been used to in the last couple of exports, but as long as you just let it finish it’ll do its thing in the background. As I did mention, it will freeze during this particular phase of the conversion from Figma to XD, but once it’s finished actually converting the layers, as it’s done now, then the bundling process actually takes very few seconds to complete, as long as you don’t have tons of huge images, that’s what takes the longest for the the bundling part.
Okay, I’ve just saved that to my desktop, and if I open that up in XD, we can go through and have a look at this file as well. It’s just opened up our file once again in Adobe XD, and just as a general overview it looks like it’s done a really decent job of converting everything over. I’ll just zoom in; we can take a better look at some of the quirks that might be expected; the first thing to call out again like the previous example the first thing you might notice in this example is the stars in the Figma design did not match up with the stars in Adobe XD. The reason for that is simply again that Adobe XD just doesn’t have a star shape; you can see on the left hand side here there’s a bunch of shape options, and a star is not one of them. It has a polygon option, which is what it’s being converted to, so if we drill down into this little layer, you can see that the polygon has been used with five sides, which is what the star shape has, but the star shape is fundamentally different in Figma, where where it sort of inverts the the points; it makes a star shape whereas the polygon is facing outwards and makes it look like a polygon which is what you’d expect. Figma has a polygon option as we can see up here, but it also has a star option, which in this case has been used to create this little star chart and that’s perfectly fine, but it’s just worth knowing that Adobe XD will not be able to interpret it. The best work workaround I would suggest for that is just to use a vector star, or convert this into a vector layer and then it’ll be able to get converted over from Figma to Adobe XD as a star; that would be my first caveat. It’s just to say as a global rule: anything that Adobe XD doesn’t have as a feature which which Figma does have, broadly, that’s not going to get converted over; purely because the feature just doesn’t exist in Adobe XD; just be mindful of that if you’re wondering why some of the features aren’t quite looking the same.
To that point, the other obvious thing that you might have noticed is this little notch the notch for the iPhone that’s been put into these mock-ups; this notch that’s being used that’s actually a vector layer; it’s a vector shape, but the vector shape itself has got corner radiuses applied to each of the points in the bottom left and right hand corner; once again Adobe XD just doesn’t have this feature. You can’t drill into a into a vector layer and apply a corner radius to each point, it just does not support it. If you look in the Figma interface, you’ll see a corner radius option, but again the things up here, the little settings up here, they just don’t support it and that’s why it’s being exported as a shape a vector shape that’s exactly the same dimensions but unfortunately it does not have those curves. That would just be one caveat; again, to work around that I would just have that as an actual path not as a point with a border radius on it, and just actually draw a curved path and that would once again solve the issue. Exactly the same thing here, you can see that we’ve got curved buttons in this instance, but square buttons in this instance. Once again for this this sort of simple use case I would suggest not using those curved vector shapes in Figma and I would just use a normal rectangle shape and I would apply corner radius to that instead of using a vector shape and applying corner radius to the vector shape, because Adobe XD does support rectangles with corner radiuses; that would work perfectly fine, but I just want to be really comprehensive and go through all of the things that are currently not going to get 100 percent carried over because of that missing feature set in Adobe XD compared to Figma.
Outside of that, it’s done a really good job. As I mentioned, the glyphs or the vector icons all get carried over really nicely. You can see here that all of the icons themselves are intact; those are real boolean operation layers or union layers in Adobe XD’s language, and those have all been carried over. You’ve got your vector paths; if I just zoom in here for a moment you can see that the vector paths have all been carried over which is really nice, and if I open that up, those layers are working really well. All your vectors are going to look really nice.
Typography looks really nice, but the one thing that I would caveat with typography is that, you’re probably noticing a theme here, but the theme is that Adobe XD just does not support vertical text alignment. This is a real pain; it’s a real pain to convert and it’s a real pain to try and visually emulate when possible. You can see here in Figma that it’s vertically aligned, but in Adobe XD the vertical alignment option just doesn’t exist. For example if I create a text layer in Figma and I want to call it "vertical text layer", if I put that into my box and then I click on this little vertically aligned or "align middle" option, it immediately just vertically aligns the text and that’s a pretty common use case in a Figma design that you’ll use, whether it’s in a button or some other shape that you want vertical alignment; but if we jump over to our XD file, and I zoom in on this text, if I highlight this text which is also in a taller bounding box; if you go over to the right hand side there’s just no vertical alignment options whatsoever. There’s this horizontal alignment, you can align it left right and center, but unlike Figma which does have this secondary box of options, I just can’t vertically align it without positioning it manually; I have to go in and actually manually position the text that I’ve already got.
That’s just one thing worth noting if you are converting your Figma files to XD, and I’m hoping I’m really hoping that Adobe XD ships this feature because then then I could immediately use the the vertical alignment setting in Adobe XD and just mirror that from Figma for the conversion process, but I just wanted to bring that up because it’s worth touching on. In some cases where that just isn’t an issue; in this case you can see the text in Figma is is a fixed size it’s got a fixed bounding box and it’s just being positioned wherever that text needs to be; in those cases, the conversion process is is totally fine, you can see here if I zoom in the the button has been rendered as you’d expect and you’ve got the little text in there and it’s been positioned correctly, but of course, that’s just not going to work if you’re using the vertical alignment option.
Okay, those are the examples I just wanted to run through just to give you a varying degree of what a smaller file looks like what a more complex file looks like in terms of the output but also in terms of the speed that it takes to convert your Figma design to Adobe XD files. I’m fairly happy with those three; again, with those caveats that you can either manually tweak the design in Figma or manually tweak it in Adobe XD; I would be more inclined to try and tweak them in Figma if you are going to be re-exporting this file regularly to an XD file, I would try and solve the issue in Figma. That way if you do need to keep re-exporting it from Figma to Adobe XD, then every time you rerun the Convertify Figma plugin those changes are going to get solidified in the export, rather than manually editing the exporter file and then needing to re-export it later and manually updating that in your Adobe XD design; that’s the way I would approach it. Again, this this should improve with time, as long as the Adobe XD team starts shipping some more features that Figma has. As soon as they do that, the Convertify Figma plugin will be updated to try and squash some of these little annoying bugs; but until then that’s unfortunately just the case.
I hope that that’s been interesting for you if you’ve been looking for a way to try and streamline the conversion process, or the recreation process from a design in Figma to Adobe XD; this is the the quicker way of doing it instead of actually manually recreating the file. Even if it only gets you to 90 to 95 percent of what you need, as it does in this case, it’s still going to be much more effective and much more efficient than having a designer spend the better part of a week manually recreating a design like this, or an even bigger design like this from Figma to an XD file.
That’s all I have for you today; it’s not a super long tutorial just because it’s such a simple user interface and this is such a simple process to convert those designs from Figma to Adobe XD with that one click process using Convertify. I hope that you’ve walked away with something you can use and potentially try out with your team if this is a use case that you you have internally, or if you’re working with a third party, or another agency, or another company that does need need files in Adobe XD but you’re all in on Figma; then this might be helpful for you. I hope that you found it valuable, and I just want to say thank you as always for watching; and we’re going to be back very soon with more Figma tutorials just like this one, so stay tuned for those.
КАК ОТКРЫТЬ XD В FIGMA
Открыть файл Adobe XD в Figma предельно просто. Нужно выбрать команду «Получить ссылку» из меню Adobe XD, скопировать ее и вставить в адресную строку браузера. Файл легко откроется в Figma с минимальными изменениями.
Если же файл Adobe XD находится на локальном диске, его нужно экспортировать в формате PNG или JPG, затем открыть Figma и импортировать полученный файл в новый проект.
Стоит отметить, что некоторые функции Adobe XD может не иметь в Figma, и наоборот. Но в целом, перенос файлов между этими программами не должен вызвать проблем.
Кроме того, стоит помнить, что Figma требует браузер с поддержкой WebGL, а Adobe XD работает в собственном приложении.
Надеемся, что данная информация была полезной для вас.
Convert XD to Figma in 1 minute — Without any external tool, Website or extension
Figma Tutorial: Import designs from Adobe XD to Figma with one click
Figma или Adobe XD
Как сделать адаптивный дизайн сайта в Figma — АДАПТИВНЫЙ ДИЗАЙН САЙТА — Уроки веб дизайна
КОВБОЙНИЧАЕМ + 300К НА КАНАЛЕ!
Синхронизация макетов в фигме. Как открыть ссылку из браузера в декстопном приложении и наоборот
How Do I Import a Figma File Into Adobe XD?
Figma is a vector graphics editor and prototyping tool – the company calls it the first interface design tool with real-time collaboration. It’s similar to Sketch, but with more emphasis on team collaboration and ease of use.
One of the benefits of Figma is that it runs in the browser. You can, however, still choose to download or install its software depending on your preference. And because it’s vector-based, your designs can be infinitely scalable.
If you’re working on a design project with someone who uses Figma, you may need to import their Figma file into Adobe XD. Here are some ways how to do it:
1. Using the Export button in Figma
One of the ways how we can import a Figma file into Adobe XD is by opening the file first in Figma. From there, go to the “Design” tab and under the Export section, select the “SVG” file type and click on Export.
In the dialog box that will appear, select a folder where you want to save your files, then hit the “Save” button.
Next is to open Adobe XD and go to File > Import.
In the Open window, select the layers that you exported from Figma earlier, then click on the “Import” button.
Your Figma design should now be available in Adobe XD.
2. Using the Convertify Plugin in Figma
Another option is to use the Convertify plugin which is available in Figma. To use this, go to Resources > Plugins.
From there, search for the “Convertify” plugin and click on the “Run” button beside it.
In the Convertify Plugin window, select “Export Figma to Adobe XD” then click on the “Convert Page” button.
Once your file is ready, click on the “Download .xd” button to save your file.
In the file manager window that will appear, select a location where you want to save your file. Also, input a file name and make sure that you are exporting it as an Adobe XD file. Once done, hit on the “Save” button.
Now go to the folder where you saved the Adobe XD file. Click on it and it will automatically open in Adobe XD.
And that’s it! Your Figma design is now available in Adobe XD.
How Do I Import a Figma File Into Adobe XD?
It’s easy to import a Figma file into Adobe XD. Just follow the steps outlined above and you’ll be able to use all of your Figma designs in Adobe XD.
4 Related Question Answers Found
How Do I Import a Figma File Into XD?
How Do I Open an Adobe XD File in Figma?
Can You Transfer Figma Files to Adobe XD?
Can I Import Adobe XD to Figma?
Morgan Bash
Technology enthusiast and Co-Founder of Women Coders SF.
About us
When we started our online journey we did not have a clue about coding or building web pages, probably just like you.
All we wanted to do is create a website for our offline business, but the daunting task wasn’t a breeze. After months and years of trying out CMS’s and different website creators, we became experts in creating these, and wanted to share our knowledge with the world using this site.
We now review dozens of web related services (including domain registrars, hosting providers and much more), and write in-depth guides about site creation, coding and blogging.
Moving designs from Figma to XD — Just how easy is it?
Recently, I wrote an article about moving XD designs to Figma. It was a really interesting experiment and one that seemed to interest quite a lot of people.
It got me thinking though. What if I wanted to convert Figma files to XD? What exactly are the options? How easy is it?
There are many great reasons to use either tool, but I decided that it was time to close the loop and see just how easy it is to do the conversion.
Read on to find out more
The methods
There are three options for converting your files:
- Using a Figma to XD converter from Magicul.io
- The SVG method
- The Recreation method
Setting up a test file
I started by setting up a test Figma file to compare the above options.
Let’s have a look at the file:
It also has a few components too:
Using a Figma to XD converter
Rating: ��
Last, but not least comes a third party converter called Magicul.
This converter converts Figma files to Sketch, which can then be imported into Adobe XD.
Let’s see the results.
Converting the file
The file needs to be public (you can find out more here about making files public). Enter your email address and click “Upload now”
2. You will see the upload happening with a progress bar. You will see a preview of the file.
If you are happy with it click on “Convert Now”
3. Select your plan and complete the checkout
4. The file will now convert
5. You can now download your file:
6. Now all you have to do is open the file in Adobe XD and you are done.
The results
Let’s see how the conversion looks.
As you can see, all the layers have been preserved perfectly, as well as the mask.
The text can also be edited and everything has been preserved very well.
UPDATE February 2021: When I contacted the Magicul team last year, Symbols and Components were not supported. They have let me know that these are now supported by their converter, and they even gave me the opportunity to test it for myself. This is great news for designers and means even more flexibility when converting files from Figma to XD.
The converter is a great option and also currently supports a few different options for conversion like XD to Sketch, XD to Figma and Figma to Sketch.
The SVG method
Rating: ��
The SVG method uses SVG files that have been converted from Figma artboards.
The files are then imported into XD.
There are two ways to do this:
- By selecting the artboard in Figma and right clicking. Then selecting Copy/Paste and finally Copy As SVG. The artboard can now be pasted into XD.
2. By selecting the artboard in Figma and exporting it from the right hand toolbar under the “Export” section.
From here you can drag or copy and paste the file into XD.
Let’s have a look at the first result.
It looks good, but is it really?
Let’s have a closer look
As you can see from the layers panel in XD, the SVG only has vector layers and nothing is grouped together.
The text has also been converted to a path, so it can no longer be edited.
This is not ideal for those wanting to work on the file further.
Of course, there are also no components due to the nature of the SVG format.
Now let’s have a look at our image mask:
Unfortunately the mask is gone and the image is in its original form.
As you can see, using the file for further work will be difficult and limited. The text, masks and components would need to be recreated.
The SVG method may work well if you have a very simple file without more complex elements.
Or if you are looking to import into XD to enjoy some of the prototyping benefits (or something else).
This method is not a good one, especially if you want to work on the file further.
The Recreation Method
Rating: ��
This method involves recreating your files from scratch in XD using the old file as a reference.
This method is time consuming and not worth it.
I didn’t attempt it for the sake of this test as I knew it would just take too much time. After all it is more or less like designing from scratch.
After doing some researching on these conversion methods, I found that a number of people are actually using this as a solution!
This is not a scalable solution. And as all designers know, time is money and this method is not the way to get the work done.