How to export Figma to Adobe InDesign (.idml) files with one click using Convertify
Follow along with this step by step Figma tutorial video.
Video Transcript
Today I’m going to be showing you a tutorial on how you can automatically export your designs from Figma to Adobe InDesign using the Convertify Figma plugin.
To get started, all we need to do is go to our Figma file, go down to the actions icon down here. If you click on that and search for Convertify, under the Figma plugins tab, if you click on the Convertify item, you can run the Figma plugin by clicking on this run button down here. I’d recommend clicking on the save icon next to that, and then we can run the Figma plugin from our saved Figma plugins list. I’ve already clicked on that save icon, so I’m just going to go to my Figma canvas and right-click anywhere. Then go down to plugins, go down to saved plugins, and click on the Convertify item. That’s just going to run the Figma plugin that we saved a second ago.
If you’re new to the Figma plugin, the way that it works is it basically allows you to export your Figma files to other file formats, or you can also import other file formats into Figma. But for today, we’re just going to be focusing on exporting our Figma designs to InDesign. We’re just going to click on the select box here. Under the export from Figma heading, we’re just going to click on the export Figma to Adobe InDesign option. That’s going to allow us to export our frames from our Figma file out to an Adobe InDesign file that we can open up in our Adobe InDesign app. All I’m going to do, because I’ve just got one frame on this page, is click on the export this page button. That’s going to automatically convert our design and allow us to download a zip package which contains the IDML file, which is the InDesign file, along with a links folder that contains our image assets.
I’m just going to go ahead and click on the download zip button, and then I’m going to click on the save button and just save that to my desktop. All you need to do is unzip the zip file and open that up. You can see we’ve got our IDML file here, which will open up in InDesign. I’m just going to double-click on that. When I open that up in InDesign, we’ve got our editable layers here. These are all editable text layers, and we’ve got our images that we had in our Figma file as well. You can see that this is all looking really good. We’ve got all of our content coming over automatically. All of the font styles and all of that stuff, all of the layouts are being migrated over. That’s looking really good.
If you’re using a page with multiple frames, like this other Figma file over here, we can also export that out to either include all the frames or just certain ones. I’ve already run the Figma plugin before in this file, so I’m just going to click on the Convertify shortcut in the sidebar here. I’m going to export this out to InDesign as well. Again, we’re going to click on the select box. We’re going to go down to the export Figma to Adobe InDesign option and select that one. What we can do is actually export selected frames as well. For example, if we only need these few different frames and we don’t want the entire page, instead of clicking the export this page button, we can just highlight those parent frames and click on the export selected frames button instead.
If I go ahead and click on that, that’s just going to take those four frames and package those up into a new InDesign package. Again, I’m just going to click on the download zip file, and I’m going to save that to my desktop again. If we unzip that zip file and open up the folder again, you’ll see that we’ve got our InDesign file here along with the links folder, which does contain all of the image assets. Make sure you keep that links folder alongside the InDesign file, so those asset references are always accurate. We can double-click on the file to open it up in InDesign again. You can see here that we’ve got our frames, and you’ll notice that it’s only exported these four frames. Instead of clicking on the export this page button, which would basically export every single frame at the parent level, we were able to do that before because we just had the one frame in our Figma file. If you do only need a few frames, you can just go ahead and click on those frames, select them in Figma, click on the export selected frames button, and you’ll end up with something like this.
That’s looking really good as well. You can see we’ve got our image assets, and we’ve got all of our editable text in here as well. This is all being positioned to match up with our Figma layout. That’s basically it. I just wanted to show you a really quick example of how you can use this export Figma to InDesign option in Convertify to automatically export your Figma designs or Figma layers and frames out of your Figma designs and into InDesign, just in case you needed to get it into that file format for some reason. Also, just a quick note that the Adobe InDesign export feature is currently in beta. While it does work quite well, especially for more basic layouts like this, if you do notice any issues with more complicated layers or more complicated properties, feel free to click on this link here to send an email, and you can attach a link to your Figma file, and we can help you resolve those issues with a Figma plugin update as well. Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.
