Video transcript
18-minute video ·
Today I’m going to be showing you how to automatically import your designs from Adobe XD to Figma using the Convertify Figma plugin.
To get started, all we need to do is open up a brand new Figma file, go up to the top here and click on this “Resources” icon, then just search for the word “Convertify”, and you’ll see Convertify pop up. If you click on that Figma plugin you’ll be able to click on this “Run” button here which will run the Figma plugin, or if you want to save it to your Figma plugins list for later, you can click on this little “More options” icon and click on the “Save Figma plugin” link and that’ll automatically save it into your Figma plugins list for easy access later. I’ve already done that, so to actually run the Figma plugin you can just right click anywhere on your page, go down to “Plugins”, go down to “Saved plugins” and then you can just click on the “Convertify” Figma plugin in your list and that’s just going to open up the Figma plugin that we just installed a second ago.
I’m going to keep this Figma tutorial fairly short at first, so if you just want to know how to do this for your own Adobe XD files you can stay tuned for the next minute or so, and then I’m going to go into a bit more detail about some specifics. Just to give you a really quick example of how to do this for your Adobe XD files, now that we’ve got the Figma plugin loaded up you just have to make sure that you click on the select box here which will allow you to select what conversion you want to perform; and just go ahead and click on the “Import Adobe XD to Figma” option. Once you’ve selected that, you’ll see this little dropzone area pop up down here; you can either click on that or you can just drag and drop an Adobe XD file there. I’m going to go ahead and do that now, and I’ve got a little design file that I’ve grabbed from the internet. I’ll show you what that looks like, I’m just going to open that up in Adobe XD, and this is the design we’re going to be importing from Adobe XD to Figma.
To import that design into Figma from Adobe XD, all we need to do is grab that file from wherever you’ve got it saved on your computer, drag and drop that Adobe XD file and drop it into this little dropzone area in the Convertify Figma plugin. I’m going to do that now, and just let go, and there we go; it has imported our Adobe XD file automatically into Figma. We can have a look at the layer breakdown here just to confirm that it’s pulled in everything as we’d expect; you can see if we compare the original design in Adobe XD you can see here that these are the layers that it originally had, and if I jump over to my Figma file you can see that those same layers have been imported. These are all individual layers you can move them around as you would expect, the same way that you can in Adobe XD, and it’s basically imported the entire design in a matter of seconds. As you as you could see, it only took about two seconds or three seconds to import hundreds or thousands of layers that are in this Adobe XD file, including all of the images, all of the text, all the styles and everything else that you’d expect.
That’s basically the entire thing; if you want to stop watching now, please feel free to do that. you can click on the link in the description to quickly jump to the Figma plugin page or you can access it through the resources icon as I mentioned before. If you want to tune out now and not go into any of the details regarding styles and prototypes and all that sort of stuff, please feel free to stop here, otherwise stay tuned and we’ll keep going through a few more of the features that you can use in the Figma plugin to import your designs from Adobe XD to Figma.
As I mentioned, that’s just like the most basic example of what you can import; I’ll give you another example just so we can see how it’ll work across different designs. If I open up this other Adobe XD file you can see that we’ve got this landing page design, it’s got a bunch of vector layers, a bunch of image layers, and a bunch of text layers. Just to show you what that looks like, we can do another example and drop that one in, so I’m going to again drag and drop that Adobe XD file from my desktop directly into the Convertify Figma plugin, and I’m going to let go on that dropzone, and once again it’s going to create a new page in my Figma file. Every time you do this it’ll create a brand new page under your Figma file that you’re already in and just add a little time stamp there, so you can see when it was imported and it just gives you this little “XD Import” label as well, so you can know at a glance which of these pages have been imported from Adobe XD to Figma and which ones are just the ones you’ve created separately.
Again, as you can see, all of the layers have been imported from Adobe XD to Figma as you’d expect. We’ve got all of our content here, we’ve got all of our images, and again you can move all these around these are individual layers as you can see on the left here and all of the groups have been maintained. If we go to our layers panel here we can open that up and see that we’ve got our layers as we’d expect, and those are in the correct order and the correct nesting. It’s really a one for one as far as the layer structure and file tree goes, so you don’t have to worry about manually updating any of those layer structures or anything like that; that’s all converted for you. If we zoom in here you can see that down to the layer it’s being imported; we’ve got all of our vector fills over here which we’ve got from Adobe XD straight into Figma, so that’s what that looks like there.
Just a couple things to be mindful of if you do have fonts that are being used in Adobe XD that aren’t installed on your computer and you’re importing your file from Adobe XD to Figma; you just want to make sure that you’ve got those fonts installed, otherwise it’s going to fall back to the fallback font which is “Inter”, the default Figma font is Inter, so if you’re noticing some differences between those; for example, this original design has a font called “Gilroy Bold” and I don’t actually have that installed on my computer, and in order for a font to be applied in Figma, via a Figma plugin or just using the tool, you do need to have that font installed on your computer. If you’re noticing some differences between the fonts being imported, just double check that you do have that original font installed; in my case, I don’t have that font installed and that’s why it’s looking the same, because it’s basically loading a fallback font here as well, but if you are noticing that the fonts are a little bit off, it’s likely that you need to install the original font first and then re-import the file from Adobe XD into Figma to get that looking a bit better.
The other thing around fonts and text to be mindful of is that the way Figma and the way that Adobe XD interpret fonts and font properties is a bit different; for example, if you’re setting the font size or the text size using these options down here, so the “auto width”, “auto height” and “fixed size” options, this can cause some issues. For example, if you’ve got like a massive text area in Adobe XD sometimes that gets carried over to Figma in a weird way, so there might be a bit of vertical offset; if you do notice that, the best thing to do is just to set the text as “auto height”, if you notice any issues with the text importing just try and make as many of these text layers as set to “auto height” as possible in Adobe XD before converting that Adobe XD file into Figma; that’s just a small tip there regarding text layers.
The other thing that I said I’d go through is prototypes and styles, so I’m just going to create a brand new Adobe XD file, and I’m just going to show you how a few of these things work. The conversion import process does support styles, so that’s text styles and fill styles, and it also supports prototyping properties. If we go to Adobe XD here and just create a really simple frame; I’m just going to create an artboard with a rectangle on it, and I’m just going to fill that rectangle. I’m also going to create a text layer; I’m just going to create this text layer here, and I’m just going to call it “text layer” and just leave that as Helvetica. That’s fine, but now if I select that and make it “bold” or “medium italic”, and then if I basically set that as a text style; I go over here to my styles or library icon in Adobe XD, and then just click on the “plus” icon in the “Character Styles”, I’ve just added this as a character style. Then I’m also going to add this blue color as a color style; again, I’m going to click on the rectangle with our blue fill and click on the “plus” icon here, and that’s just going to add the colors to the library in Adobe XD. I can also do things like change just one word to be a specific fill; if I want to change this to match this libary color, I can do that as well, and that’s what that looks like there. If I now save this file; I’m just going to save that to my desktop, I’m going to override the file that’s already there.
Then now if we import that file into Figma using the Convertify Figma plugin, I’m just opening it up again, and I’m going to drag that design file from Adobe XD into Figma, drop that in, and you can see here it’s converted our layers as we’d expect; but the difference this time is that we now have these styles in our Figma document, and because we’ve got this toggle selected here, which is the toggle to import color and text styles from Adobe XD into Figma, because I’ve got that checked and because my design file from Adobe XD has these color libraries and character style libraries included when it gets imported into Figma, that’s automatically going to also import those text styles and color styles here. Now if we actually click on our rectangle, we can see that that’s linked to acolor style in Figma; we can see what that color style looks like and we can change it, so we’ve also got the gray color style and we can switch between those as you normally would in Figma, but those have automatically been imported from Adobe XD to Figma. The same goes for our text Styles; if we highlight this layer style here we can see that that is actually linked up to our font style. We can see that the Helvetica style in “medium italic”, size 50, which is exactly what we set in Adobe XD, and that’s what’s being imported as a style into Figma. It’s just a quick demo to show you how the styles work if you’ve got them set up in Adobe XD.
The other thing I just wanted to show you was the prototyping. Let’s say we’ve got two different artboards or frames in our Adobe XD file and we want to prototype these frames together somehow, all you need to do is if you’ve already got this set up, you don’t need to do this; but if you’re using Adobe XD to do prototyping, you just switch to the prototyping tab up the top and click on “Prototype”, and then you click on the element you want to link to a specific frame or artboard, and you just drag that little arrow onto the artboard you want to link to. In this case, I’m just going to keep it really simple, I’m just going to do a tap and transition to this other artboard and then I’m just going to link this other rectangle back to the previous artboard, and just going to auto-animate that as well.
I’m just going to save that to my desktop and override the existing one I already had, I’m just going to replace that, and once again I’m just going to drag and drop that Adobe XD file into Figma, let go, and you can see it’s imported the file as we’d expect, but now we’ll do the same thing in Figma. If we click on the “Prototype” tab, you can see that the prototype links that we just set up in Adobe XD have also been carried over to our Figma file. Not only has it imported the layers, not only is it imported the colors and text styles, it’s also imported the prototype links; and again, that’s just because we’ve got this “Import prototype links” toggle turned on. If you turn that off, it won’t import those prototype links, so if you just wanted to import the flat design without any prototypes, you can do that by just toggling off this thing before you import; but by default it will always import prototypes if they exist.
That’s basically what it looks like, you can see here that we’ve got those two links set up, and it’s carried over the animation styles as well. I’ll just close off the Figma plugin for now, and you can see here if we actually go into the details, the “dissolve” transition has been preserved and the “auto-animate” transition has also been preserved using the smart animate feature. If I click on “Play”, that’s just going to open up the Figma prototype, and we should be able to click on this rectangle and dissolve it to there; that’s now on our second artboard, and if we click on this rectangle it should jump back to the first one with the auto-animate property carried over.
That’s what it looks like, and the only thing I haven’t covered is components and instances, but if you do have components set up as well; for example, if we were to create a component in this file. Let’s just go ahead and do that now really quickly; if I go back to my “Design” tab and just open up my layers and click on this rectangle, I’ll make a terrible button component here. If I just create that rectangle and add some text, I’ll just do that on top and I’m just going to really quickly set that to white, and as I said this is the worst button component you’ve ever seen, but if we select those two layers and create a component by clicking “Make component” and then we go to our library here, drag that component onto the page and just set that as “New”, because we’re going to override the text, and we’re going to override the button color as well.
I’m going to save that one more time, and I’m going to put that on my desktop and replace it, and one more time, I’m just going to re-run the Convertify Figma plugin, and one last time, let’s drag and drop that Adobe XD file into Figma and import it. There we go, you can see this time because I’ve made those components and instances, we’ve got our component on the left here; we’ve got “Component 1”, which is our button component and we’ve also got our instance of the component. You can see here that the instance has been replaced with the new text that we set, and the different color that we set, but these are still components and instances; if we change the styles of that particular button, for example,if we just change the position, you can see here that the position of the button in the component and the position of the button in the instance are both still linked because they are instance and component. The same goes for the rectangle; we can change the size of the button and that will be rolled out to the instance as well, and of course you can access those from your “Assets” panel, if you go to your assets panel in Figma, you can see that the component has been imported just the way you’d expect, and you can drag that in and have another instance as well. Of course, you can override that too, and that’s what that looks like there.
Okay, I think that basically covers everything I wanted to talk about regarding importing your designs from Adobe XD into Figma automatically. Obviously this is a massive pain if you need to do it manually, and a lot of people do unfortunately have to do it manually and use very strange workarounds involving SVGs and other things. Half of which I believe don’t even work anymore for whatever reason; that might be a change from the Adobe side or Figma side, unintentionally or otherwise, but yes, this seems to be a pretty common request for converting files. If you do need to import your Adobe XD files or Adobe XD designs, including styles, including components, including prototyping, all that good stuff, then please feel free to give Convertify a try. This might be helpful for you if you want to automate that process, especially if you have much larger files than this; this is a fairly small example, but some of the other examples, the landing pages that we converted from Adobe XD to Figma earlier in the video, and files that are much bigger than those, this is really going to save you a lot of time if you can just automatically convert a lot of those layers.
As I mentioned before, this is currently a brand new feature; it is currently in BETA. As you can see it works very well, but as I mentioned, specifically around text, there will be some differences and this is something that will be improved over time. If you do notice a couple of issues with your text layers or other types of issues relating to vectors, these are already known and currently being worked on; hang in there. If you do notice any issues, feel free to get in touch or leave a question, and I’m sure that we can get the Figma plugin updated as quickly as possible for you to help mitigate some of those issues. If you’ve made it this far, thank you as always for watching, and we’ll be back soon with more Figma tutorials just like this one very soon.
Pro Bundle