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

Video Transcript

Today I'm going to be showing you how to automatically import a table from a Google Sheet directly into Figma using the Convertify Figma plugin.

The first thing we need to do to get started is just click on the little "Resources" icon in the top of your Figma file and in the search box just type the word "Convertify", and under the "Plugins" tab you'll see Convertify pop up. All you need to do is either click on this "Run" button or you can save the Figma plugin for using again later by clicking on the "More options" icon here and clicking on the "Save Figma plugin" menu item. You can either click the "Run" button, as I said, or if you've saved it to your list you can right click anywhere on your page, go down to "Plugins" and then click on the "Convertify" option, and that's going to run the Figma plugin that we just set up a second ago.

Instead of using the default option, which is exporting Figma to a Sketch file, which you can also do, you can open up that little options list and instead of exporting from Figma we're going to go down to the "Import to Figma" category and we're going to click on this bottom option here, which is "Import Google Sheet Table to Figma". I'm going to click on that, and that's just selected this import Google Sheet table to Figma option, and now you can see that it's bringing up a new input field here, and it's expecting a Google Sheets link.

What we want to do is basically go to our browser and we want to find any Google Sheet that we've got a table set up for already. I've got a really simple movie app table, I've just got a list of rows and columns and these are just for different movies. You can see here this is my header, so I've got my header labels. This is the poster label and underneath that I've got got a bunch of image links, and these are all going to images; if I click on one of these you can see that it's loading up an image a poster. I've just got four different images under there, and then all the rest are just text.

I want to import this table from Google Sheets directly into Figma and I can do that by clicking on this little "Share" button up here; I'm going to click on "Share" and once that loads up I'm just going to make sure that this "General access" setting is set to "Anyone with the link". By default, it's set to "Restricted", but for now we want to actually change this to "Anyone with the link", and then on the right hand side you can leave this setting as "Viewer"' you don't need to change it to "Editor" or anything like that, "View" is perfectly fine.

Once you've set up those two options in the share modal, just click on the "Copy link" button underneath; click on that button, and it's going to copy the link to your clipboard. Then once you've done that, you can just go back into Figma and in our input field here where it's asking for the Google Sheets URL, I'm going to paste that link that we just copied, and I'm just going to click on the "Import Google Sheet" button. Once that's loading you'll notice that it's loading up the Google Sheets images; it's downloading any of those images, if you've got images in your spreadsheet, and then after that's finished you're going to see a new table created in your Figma file using all of the data or table items from your Google Sheet.

You can see here that we've got our header, we've got our rows, and because this is a component we can actually change the width of these columns as well; I can adjust this and it will adjust all of the child instances. We've got our header up here and these are all children of that header; any widths that are set in the table header component will be inherited by the instances as well. That also goes for the styling; if we wanted to change the styling of this text, for example, we can change that in here and that's going to update the styling of all of the children as well. Of course you can override those in the instances as well; you can re-set that, so we can set it to "Light" and that'll override it at the instance level, but you can do that if you want to.

The same thing goes for the images; because we've got this particular column set up for an image based column, you'll notice here that we've actually got our images, but they're just currently a square. Because our ratio of the images are different, what we can do is we can go up to the component level and in the table header cell, I'm just going to unhide the image. There's a hidden image shape layer there and that's just the component layer for our posters or for our images. What we can do if we want to change the image size for all of our rows is we can just adjust this layer in the component, so I can make that taller and just change the ratio of that. Now we can see it's looking much more like a movie poster, and once you're happy with that you can then just hide that image layer again because it's a component layer and we only want to use the header for the labels; we don't want to have the image layer in the actual heading, but you can obviously just turn that on and off when you need to adjust it.

That's what that looks like there and we can also adjust the width of the table itself. You can see here it's quite responsive as far as the widths go, and again, if you want to then re-adjust these you can just go into the header component and you can adjust each column's width as well. You've got the option of adjusting it at the column level and also adjusting the width at the parent level, and you can change that width yourself.

It also automatically includes strokes; because it's got a table row set up it automatically includes a stroke option turned on by default. You can change the color of that here if you want to make those lines darker or lighter, you can do that. If you want to hide them entirely, just click on the little "Hide" icon, and again, I'm just doing this this on the table header component. If you click on the table header component you'll see the stroke properties on the right hand side, you can just turn those on and off, or you can change the styling, and you can increase that or decrease it as well; for now I'm just going to leave it invisible.

That's basically it; you can use this to import any tables from your Google Sheets to Figma. It's always going to work much better if you're just using a simple table like this, if you start getting fancy with other kinds of layouts in your template, it's probably not going to work as well. I'd recommend just keeping it very simple, this is a standard spreadsheet table using the first row as your header, so you want to put all the all of your labels into there and then just using the other row elements as your content. If you do need images, as I said, just paste in an image URL or an image link and that will automatically be downloaded and imported into your Figma table as well from the Google Sheet.

I think we'll leave it there for today, I don't want to make it too complicated. It's a pretty simple Figma tutorial, I just wanted to show you how to automatically get any table content from a Google Sheet that you might have set up and automatically import that into a Figma file, which can be handy if you're working with large data tables and collaborating in Google Docs or Google Sheets, but you also need that content synced up with Figma as a responsive table, this is going to be the quickest way to go about it. We'll leave it there for today; thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.