How to import Adobe InDesign (.idml) files to Figma with one click using Convertify

Video Transcript

Today I’m going to be showing you a quick tutorial on how you can automatically import your files from Adobe InDesign into your Figma files 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 at the bottom 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 either clicking on this little run button down here, or you can click on the save icon next to that and run it from your Figma plugins list. I’ve already clicked on the save icon here. 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 gives you a bunch of options to export files from Figma. You can export to different formats or import different files into Figma. All you need to do is click on the select box over here and just scroll down to the import to Figma section and select import Adobe InDesign to Figma, and then we’ll be ready to go. Today I’ve just got two different InDesign files here. I’ve got a resume with a few different pages in it, and I’ve also got a brochure with a few different pages in it. We’re going to import both of these files and get those into Figma and transfer them out of our InDesign file as editable Figma layers.

What we need to do is basically go to our InDesign files. I’ve saved these out as InDesign files and also IDML files. This is the important one you want to use. We’re not going to be using the INDD files; we’re going to be using the IDML files. Just make sure that you’re saving out your InDesign files as IDML files. You can do that from the InDesign menu. You just want to go to file, save as, and then just make sure you’re exporting it in the InDesign markup language or IDML file. Once you’ve done that, you basically want to zip up the IDML file along with the links folder. The links folder contains all of your assets. If you’ve got any image content, that’s basically going to get exported into this links folder here. You can see that there’s a few different assets in this file here. Those are basically just going to be included in the links folder.

To do that, just go ahead and click on the links folder along with the IDML file that you want to import. Just click on both of those, and then you just want to add those to a zip file. I’m just on Mac, so I’m just going to click on the compress menu item in the right-click menu. That’s just going to give me a brand new zip file which contains our links folder and the IDML file. You can leave that as is or just rename it. I’m just going to rename it as resume.zip. Now we’re ready to go. We can go back to the Figma file. You can see here it’s asking us to drop in a zip file containing the IDML file and the links folder. Now that we’ve got that zipped up, we can just go ahead and drag and drop that zip file directly into this little drop zone area here and let go. That’s going to automatically import all of your InDesign layers into Figma. You can see it was pretty quick. It imported the three pages in about 2 seconds, and we’ve got all of our content in here as editable Figma layers. You can actually edit this text content. These are all editable and movable. These are all individual layers that we can now manipulate inside of Figma. You can see it’s gone ahead and carried all of those across. We’ve got all of the social icons, all of our content here, the backgrounds, and all that sort of stuff, along with the images that we had a look at a second ago. Those are all being imported really nicely.

That’s a basic example of the resume template that we just looked at. Now I’m just going to show you one more file just to show you how to import it again with a few different examples in this one. This one has things like underlines and tables. You can see here there’s a bit of a table element going on and reflowing text as well. We’re going to import this file now and see what that looks like in Figma. Once again, I’m just going to repeat the same steps that we went through a second ago. This time instead of the resume folder, I’m just going to go to my brochure folder. Again, these have been saved out as IDML files. Importantly, you just want to make sure you’ve got the IDML, not INDD. You want the IDML file. You just want to zip up that IDML file along with the links folder. Again, this should be automatically included when you save out your InDesign files. Just make sure you’ve got the links folder there, which is going to include any image assets. Once again, click on the links folder and the IDML file. Zip those up using whatever method you prefer. I’m just going to use the native Mac compression option and zip those up. Then again, you’re welcome to rename that if you like. I can just rename that as brochure so I know what it is.

One more time, we’re just going to drag and drop that zip file directly into the Figma plugin here in Figma. I’m just going to let go of that. This is going to create a brand new page in Figma. It’s going to scope all of those imports onto a new page so it doesn’t clutter up the previous page. You can see it’s gone ahead and imported all of those pages. You’ll notice that it’s kind of maintained the page layout. We’ve got in our InDesign file the first page on its own and then a double page here, double page here, and it’s going through and automatically grouping those together. Once again, we can see that these are editable text layers. You can basically edit that content. You can style it however you like. That’s just going to be a really easy way to keep editing the content from InDesign in Figma.

As I mentioned, we’ve got a few different elements here like this table element, which is being imported, and things like these underline elements which are all being imported. This is basically going through and importing all of those layers directly from the InDesign IDML file and then it’s allowing you to bring those into Figma and work on them there or as a new starting point for carrying over any work that you’ve done in InDesign that you want to now load up into Figma and either keep editing or potentially exporting or using for some other purpose.

That’s basically it. I just wanted to quickly run through that. This is a brand new feature and it’s still in beta. If you do notice any weird quirks, oftentimes they’re to do with the differences in supported elements or supported properties. One example of that might be here we’ve got this little contents panel. If you see the InDesign file, you’ll notice that it’s flush on the side with the page numbers along with the dotted underline here. The reason for that is it’s because it’s a native InDesign feature where you can actually have that kind of aligned page numbering going on in the list, whereas Figma doesn’t support that exact same feature. You’ll notice that it’s not quite exactly aligned. It’s doing its best to try and figure that out in a way that works in Figma. But again, this is a native feature in InDesign that just isn’t going to quite get imported natively in Figma.

There are going to be a few bits and pieces that aren’t 100% correct, but hopefully, it gives you a bit of a head start if you’ve been trying to get your InDesign files loaded up into Figma without manually recreating every single layer from scratch. This should hopefully at least get you 80 to 90% or hopefully more of the way there. We’ll leave it there for today. I hope that’s been helpful. If you are an Adobe InDesign user and you’ve been wanting to get your files out of InDesign and into Figma really quickly, this is hopefully an option that you can use to automate that workflow a little bit more and bridge the gap between InDesign and Figma. Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.