Video transcript
22-minute video ·
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.
Pro Bundle