How to import Google Docs to Figma with one click using Convertify

Video Transcript

Today I’m going to be showing you how to automatically import any documents from Google Docs directly into your Figma files using the Convertify Figma plugin.

To get started, we’re just going to go into Figma and open up a new Figma file and then go up to the top toolbar here and click on the “Resources” icon, and if you go to the “Plugins” tab and search for the word “Convertify”, you’ll see the Convertify Figma plugin pop-up. Just go ahead and click on that, and then you can run the Figma plugin by either clicking on this “Run” button here or you can install the Figma plugin or save it for later by clicking on this little “More options” icon and clicking on the “Save Figma plugin” button that shows up. If you’ve already installed it we can get to it by right clicking anywhere, going down to “Plugins”, going to “Saved plugins” and then clicking on the “Convertify” Figma plugin that we just set up a second ago.

Once that loads you’ll be able to see that we’ve got a little interface here that’s quite simple. The main thing we’re going to be doing is changing this default option which is to export Figma to Sketch, we don’t want to do that today; today we’re just going to be focusing on importing Google Docs into Figma. We’re going to click on this options selector, click on that, and scroll down to the “Import to Figma” category and we’re going to click on the “Import Google Docs to Figma” option; go ahead and click on that, and now you can see we’ve got the “Import Google Doc to Figma” option selected. We’ve got a few options that we can check here, we’ll go through these in more detail in a second, but for now I’m just going to show you how to actually get your Google Docs link set up to be able to use with the Figma plugin.

I’m going to jump back into Google Docs in my browser and I’ve just got a really simple resume template that I grabbed from the Google templates that comes with Google Docs. To be able to use this Google Doc with the Figma plugin to import the document from Google Docs to Figma, I need to just click on this “Share” button up here; click on the “Share” button in Google Docs, and once that pops up you basically just want to change this “General access” option from “Restricted” to be “Anyone with the link”. You want to make sure that this option is set to “Anyone with the link”, and then you can leave this option here as “Viewer”, that’s totally fine.

Once you’ve changed those options so it says “Anyone with the link”, you can then click on the “Copy link” button directly under that. I’m going to click that now; you can see the link has been copied, and now I’m just going to go back into Figma, and inside of the Convertify Figma plugin I’m just going to click on this input field down here where, you can see it’s expecting a Google Docs link. I’m going to paste in the link that we just copied from our Google Docs window, and you can see here it’s saying that it’s a valid Google Doc URL; and because we’ve made it public, that’s going to allow us to load it from Google Docs into Figma in a second.

I’m just going to leave all the options as default, but the only one I’m going to change is to “Hide Table Borders” and what that means is by default it’ll automatically include borders for any tables that get imported which is really handy if you’re going to be importing data tables and things like that inside of a Google Doc, but at the same time in this particular document the table is being used to lay out the columns here. If we enable those borders I’ll show you what that looks like; I’m just going to click on the “Import Google Doc” button and give you a quick example of what it looks like by default, and then we can go through some of those other options that I just mentioned.

Okay, it’s finished importing our Google Doc into Figma, and as you can see here it’s gone ahead and imported all of the content from the Google Doc. As I mentioned, the table that was imported is being used for layout and that’s why it’s got these borders automatically set. You can either hide those just by clicking on the “Hide” toggle in your Figma designs, that will just hide the borders, or if you know that you want to get rid of those in the first place, we can actually just re-import that document with the borders automatically hidden. I’m just going to check the “Hide Table Borders” option and click on the “Import Google Doc” again, and this time it’s finished importing our Google Doc to Figma without any of those table borders added in, it’s just left it just with the table layout and without those border strokes.

We can see here these are all the text layers, so we can actually edit this. I can put my name up here, I can change the details of this resume, as you’d expect. The size of the document matches the size of the document in Google Docs as well, it’s a one for one match as far as size goes. You can see we’ve got all the formatting, fonts and everything like that set up as we expect from Google Docs in Figma. It also includes spaces, so between all of these paragraphs in Google Docs there’s a certain space that’s being used, and that space is also being carried over, so you get that really precise spacing. That’s roughly what it looks like there.

I’m going to run through one other example just to show you what this will look like in a normal document, one that’s not split up into these columns. I’m just going to go to another template from the Google Docs templates list, and I’m going to do the exact same thing; I’m going to click on the “Share” button, I’m going to make sure that the “General access” setting is set to “Anyone with the link”, which it already is. Then I’m just going to click on the “Copy link” button and jump back into Figma, go back into my input here and get rid of the old URL, and I’m going to paste in that new Google Doc URL that we just copied. This time I’m just going to leave the table borders off, even though I don’t think this document has any borders in it, and I’m just going to import that with the default settings again. I’m going to click on “Import Google Doc” and that’s going to import the Google Doc from the new link directly into Figma automatically.

You can see here that it’s gone ahead and imported that document. Just a bit of a side by side; you can see that we’ve got the content, we’ve got the background color, we’ve got the formatting of the fonts and everything else that you’d expect. Because this is a multi-page document it will automatically split up the content across multiple pages; we’ve got two pages in this case, and it’s gone ahead and split up that content based on the size of that content per frame. Each Figma frame is basically a Google Doc page in Figma, so when it imports the Google Doc from or the document from Google Docs to Figma, each of those pages get imported as a different Figma frame. You can see here that we’ve got page one and page two on those two Figma frames, but if you wanted to merge those into a single Figma frame you can also do that as well,

There’s an option here if you toggle the “Merge pages into single frame” option and you enable that, and then we re-import the document, click on the “Import Google Doc” button; that’s just going to import the document from Google Docs into Figma, but this time it’s going to only import it into one Figma frame. We can see here that instead of splitting up the pages it’s actually just imported all of the content onto one Figma frame. That can actually be handy if you want to just drop all of the content into a single frame rather than a page based structure in Figma, if it’s actually easier for you just have one massive frame where whether you’re going to use it as a mock-up or that you’re going to use it as more of just a content import rather than an exact design, as a page based design, then maybe this option is going to be more useful for you in that case.

On that topic, the other thing we can do is we can also click on this second option which is an option to remove styles and formatting. I’ll show you what that looks like; if you if you enable the “Remove Styles and Formatting” option and again click on the “Import Google Doc” button that’s going to re-import the document from Google Docs into Figma, but this time you’ll notice that it looks quite different. The reason for that is this option to remove styles and formatting basically just standardizes the styles of the document rather than using the exact styles that you specified in Google Docs. For example, we’ve got the colors, the font sizes, the font settings, spacing all that sort of stuff that’s been defined in this Google Doc, and it’s basically being been ignored in favor of the formatting of the document. What I mean by that is you can see here when I highlight these bits of text, it’s using formatting that’s predefined into these categories of “title”, “heading”, different level headings, paragraphs; and you can see that the document structure is really based around these headings and formatting options.

What this option does in the Figma plugin is it removes all of the styling that’s been applied to these, and it just uses those semantic headings to then pre-define its own styles; it really just simplifies the document if you’ve got a really crazy document, or it’s just a very complicated with lots of styling, and you just want to simplify it and just really just import the content from Google Docs to Figma without worrying too much about the exact design, then this is going to be a good option for you to do that. The other cool thing is because there’s no exact spaces and all that sort of stuff, you can then really easily also just format the document yourself. If you wanted to change the spacing between those paragraphs and headings, you can do that just by tweaking the item spacing in Figma, and that’s going to give you a really easy way of changing the spacing and stuff like that.

You can also go ahead and of course format these text fields in another way if you don’t like the color, or you don’t like the styles, you can always just go ahead and change those yourself. You can obviously change the colors of things in Figma and style text in Figma as you’d expect; we can obviously change the fonts and and make that look a little bit different as well, that’s all obviously doable. As I said, this might be an option if you just want to really get a simplified version of a document from Google Docs into Figma without worrying about the exact styling working.

The only downside to this approach is if you’re using a file or Google Doc like this one, which does have a table layout, it will basically import all of that content as a table and it won’t really work as well if it’s more of a designed layout, so I wouldn’t recommend using that option here. I’ll show you what that looks like just as an example; it’s not really going to be that good or that useful because these are really table cells, it’s still importing all the content, but it’s importing them into a table as if it was a data table inside of a page. As I said, I probably would avoid using that option if you’re using a complex layout like this, but for a regular single column document, which most column documents are just really a single column with content in it, you can definitely use that “Remove Styles and Formatting” option.

Just one more thing before I finish up the Figma tutorial; if you’re wondering where all those pages are getting created, if you expand your “Pages” option up in the top left here in Figma, you’ll be able to see that we’ve got a history of all of the Google Docs that we imported to Figma. Every time you click the “Import Google Doc” button and import a document from Google Docs into your Figma file, it will automatically create a new page with a timestamp to let you know when that was imported. You can see here we’ve got the different time stamps, and it will automatically use the title of the Google Docs document, so we’ve got “Essay” and “Resume”, and we’ll automatically name the pages with the title of the Google Doc as well.

I’ll leave this Figma tutorial there for today, I just wanted to run through the different options in the Figma plugin to go through what all of those do. There will be more options coming to the Figma plugin in the future, being able to support things like custom headers and Footers, all of that sort of good stuff will be included in a future version of the Figma plugin, but for now this is in BETA; there’s going to be a couple things that you know may not look exactly right, but this will be improved over time and resolved over time, so just be bear with us on that one.

We’ll leave the Figma tutorial there for today, and if you want to have a bit of a play around with this you can use the Figma plugin right now. As I said, this has been shipped to the Figma plugin you can just select that option to import Google Docs to Figma; give it a try while it’s still in BETA, and as I said it’ll be improving over time, but I hope that helps your workflow if you’re using Google Docs at work or in your personal usage, and you want to get that content into Figma really easily, then using the import Google Docs to Figma feature in Convertify is going to be the fastest way to go about it, rather than re-importing all of that content manually yourself. As always, thank you for watching, and we’ll be back soon with more Figma tutorials like this one very soon.