How to style Figma layers from a spreadsheet with CSS style sync using CopyDoc

Video Transcript

Today, I'm going to be showing you how to automatically style your Figma layers from a spreadsheet using the CopyDoc Figma plugin.

To get started, all we need to do is go to the little "Resources" icon up here in your Figma file. If you click on that and search for "CopyDoc", you can run the Figma plugin by either clicking this "Run" button here, or I'd recommend clicking on this "More options" icon here and just clicking on the "Save" button. That'll save it to your Figma plugins list for easy access later.

I've already gone ahead and done that. Now, I'm going to go to my canvas and right-click anywhere. I'm just going to go down to "Plugins" and then go down to "Saved plugins". Then, I'm just going to click on the CopyDoc item to run the Figma plugin that we just saved a second ago.

If you're new to the Figma plugin, it has a bunch of different features that help you to update content in Figma. But for today, I'm just going to be focusing on the Sync Spreadsheet feature down here. If you're interested in the other ones, I'd recommend checking out the other videos in the CopyDoc playlist on the YouTube channel. But for today, I'm just going to be going through how to use CSS in a spreadsheet to automatically style your Figma layers in your design.

To get started, all we need to do is open up a new spreadsheet. You can use either Google Sheets or open up something like Excel. We're basically going to structure our spreadsheet to match the Figma layers in our design. For example, I've got this Frame here that I want to style. I want to change the background color of this Frame, and I want to change the font size of this heading here, and I want to do that from a spreadsheet.

What I need to do is basically name my Figma layers with a certain convention. In this case, I've chosen to use "heading," and I've chosen to use "home," and I put a little hash (#) in front of it just to make it really clear that that's what I'm using it for. Then, in my spreadsheet, I'm basically putting those layer names in the top row, which is the header row, and these are going to be the labels that will match up our Figma designs with our spreadsheet.

Once you've done that, then you can go ahead and start writing CSS inside of the content underneath those columns. So, what I mean by that is, for example, if you wanted to change the background color of this Frame, you can basically put in a CSS rule of "background-color" with a little colon, and then a hash (#) followed by the hex value. So, I'll show you what that actually looks like now.

If we import this into Figma, you can do that by clicking on the share button up here if you're using Google Sheets. Just make sure that the general access setting is set to "anyone with the link." Then, click on "copy link." Once you've copied that, go back into CopyDoc in the Figma plugin and click on the Sync Spreadsheet button down here. Then, you can paste in your Google Sheets link down here and wait for that to load up. That's going to let you select the tab in your spreadsheet that you want to use. In this case, I'm just going to be using the "home" screen tab. I'm going to click on "Use Selected Sheet," and then I'm going to click on the artboard over here, the "home" layer that we named. Then, I'm going to click on the "Sync Rows" button here.

You can see that it's updated our layers from the spreadsheet. It has gone ahead and changed that background color for us, and it's changed the font size over here based on the values that we had in our spreadsheet. So, you can see we had a background color of "#818af9," and that's now been added to the spreadsheet over here. So, that's the value we used. And over here, we set the font size using CSS to 28 pixels, and you can see here it's updated the font size to 28 pixels.

That's just a really quick example of what you can do with the Figma plugin. I'm going to show you a few more examples now if you want to have a look at those.

I'll go to my app screen now. I've got this app screen that I want to make a few changes on. I've set up another tab in my Google Sheet, and this one I've just called "app screen" so I know what it is. I've gone through and basically named the layers that I want to change. For example, I've got this hero block, so I've called that "#heroBlock" in my Figma design. That's just a Figma frame that's got a background color on it. In my spreadsheet, I've added "heroBlock" to the row up here, and I've just set a few properties that I want to change. I want to change the background color, so I want to change that to a different background color to match this one, and I want to change the text to be white.

You can do this two ways. You can either change the individual text layer names. So, for example, I've done that over here with the staff name. In this little card component, I've got a layer called "staff name," and I'm going to be changing that color to this other color over here. You can do it individually per text layer. But if you want to change all of the text layer styling in a single frame, you can actually just target the frame.

In this case, I've got the hero block, and all I'm doing in that hero block is I'm saying that I basically want the color to be white. So, "color" is going to apply to the text color. I could also do things like change the font size. I could actually change that font size to be something else, so I could make that 14 pixels, and that'll basically change it. Actually, it's already at 14, so I'll just change that to be 16 pixels, and that will change it in a second as well. That's basically how you can apply multiple text layer changes at once.

I've also done things like change the menu. I've got the menu down here, and I'm basically going to make that menu, which I've named "#menu," have an opacity of 0.3, and I'm going to change the background color. Same thing over here, so I'm basically going to change the font size of these card frames, and there are a couple of them in here. I've named both of them "card frame," so it's going to find both of those when we select the frame in a second, and it's going to change all the fonts in there to be 10 pixels. So, I'll show you what that's going to look like now.

Again, I'm going to grab the share link and just copy that, jump back into Figma. I'm going to close off this window and open it back up, and drop in my spreadsheet link. So, I can select a new tab. This time, I want to work with the "app screen" tab, so I'm going to click on that and use the selected sheet. Once again, you'll get a little preview of what the column names are just that it's going to load up. All you need to do again is just select the element or elements, as we'll go through in a minute, that you want to select. And again, click on "Sync Rows."

You can see here again, it's updated the layers from the spreadsheet. So, in this case, we can just briefly go through the changes that it made. As we saw before, we set the hero block to have a background color of purple, and we also set the color, which applies to text. So, that's not a background color. "Color" always means text color. So, we've got the color set to white, so it's changed that for us. We also increased the font size to 16. In retrospect, that was a bit too big. So, we could always just go back and change that again. And then we also set a border radius of 20. So, before, that didn't have a border radius at all, that frame. So, now we've got the border radius there.

You can see up here, as I briefly went through, we've also changed the font size of the card frames to 10 pixels. So, those have been set to 10 pixels. But then we've also got a bigger size up here. And the reason for that is because after we set the card frame size of 10 pixels, after that, we've got a staff name attribute layer. And that one's being set to 22 pixels. So, the spreadsheet's basically looping through these columns, getting to this one, applying 10 pixels to all of the text inside that frame. And then it's getting to this one, and then it's overriding that again to be 22 pixels instead, with a font weight of bold. So, you can see here that it's set to bold at 22 pixels. That's basically what that looks like there, to apply a bunch of different changes with nested text changes as well. That's another cool example that is a nice way to change a bunch of different layers in a single frame.

But if you want to make this change to multiple frames and have different styles per frame, you can do that as well. So, I'll show you what I mean by that. I'm going to go back to my spreadsheet, jump over to this "card Styles" tab that I've got set up. And what I basically want to do here is apply a couple of different styles depending on what order the selected row is in my selection.

Here, I've got two card frames. I've got a card frame here, and I've got a card frame here. They're both called "#cardFrame," and they're basically the same component with the same type of content. But what I want to do is apply different styles to both of these in this little block here.

What I've done is, in my spreadsheet, you'll notice that I've got two rows set up underneath my headings. So, I've got the card frame here, I've got the staff name layer, which is just a text layer, I've got the staff role layer as well, which we're going to change some styles on, and then I've also got this star photo. So, this is an image layer just with a photo, and I've also called that "staffPhoto."

What I'm going to do is I'm basically going to apply a different color background to the first card and the second card, so they'll be different colors. And then I'm just going to basically go through and apply the same styles for everything else. So, I'll show you what that looks like now.

We can basically go through and apply this by doing the same process. I'm going to click on "share," I'm going to click on "copy link," and copy that one. And just to demonstrate this even further, I'm just going to change this one to be a bit different as well on the top. And same thing for the bottom here, I'm going to make this one a little bit smaller so just so we can really see what's going on here.

Now, if I again go back to my CopyDoc Figma plugin, click on "Sync Spreadsheet", drop in that sheet again, and this time I'm going to select the "Card Styles" tab, the one that we're just looking at. Click on "Use Selected Sheet." And this time, what we're going to do is we're not going to select the parent frame. We're going to actually select these nested frames. So, we're going to click on both of these. So, we've got two layers selected, as we can see down here. And because we've got two rows also in our sheet, what it's going to do is it's basically going to loop through the selection. It's going to go one, two, and it's going to map those up to row one and two in here. So, I'll show you what that looks like now.

We can go ahead and click on "Sync Rows." And you can see here again, it's updated the layers from the spreadsheet. But this time, it's used the different rows to apply different styling to our selection. So, we've only got two layers selected here, but you can imagine having a dozen layers or two dozen layers selected like that, with a dozen or two dozen variants in your spreadsheet rows down here. And you can basically just change those as you need to. So, you can have a different style per selection in those repeatable rows.

As we just looked at, you can basically see that the heading up here is set to be a little bit bigger, at 24 pixels. And the one down here, we set to 18 pixels. So, those two are getting mapped a little bit differently. And we also change the background color to be white on the top one and slightly off-white on the bottom one. So, you can see that's been applied here as well, with that hex value.

The other cool thing you can do is you can actually change the order. So, if you don't want to sync it from top to bottom, you can actually change the order that it gets synced at. So, we could change it so it sorts the Figma selection from bottom to top. That would basically reverse the application of these. So, if we selected those and clicked on "synced rows," that would basically reverse it.

I'll just do that again and undo the changes first, just so it's kind of back to what we originally had it. So again, I'm going to show you that. I'm going to select both of those layers. This time, I'm going to go from bottom to top instead of top to bottom. And that's basically going to apply the first row from the bottom up. So, if I select that, "bottom to top," click "Sync Rows," and this time, it's basically used the second row, which is the first row of changes, and it's applied that to the bottom. And then the next one is applying it to the one up here. That's just a really quick way of reversing the layer order. And you can also do that based on a bunch of other properties as well. So, I'll leave you to play around with that in your own time.

The last one I wanted to do is just show you how to use this in combination with content. So, if you wanted to change the content of these cards as well. So, what you need to do is basically just make another tab or another spreadsheet with those same names. And instead of using CSS rules this time, so these ones are all using CSS rules, this time you're just going to use plain text content. No CSS, nothing like that. It's just plain text content with either text or image links. So, if you use an image link on a layer that accepts images in Figma, it'll automatically download those images and swap them out.

I'll show you what that looks like now. So, I'm just going to go to my "share" button, grab that, and copy the link one more time. And if I just jump back into my Sync Spreadsheet item over here, paste that in. And for the final example, we're just going to select the "cards content" tab. And again, click on "Use Selected Sheet." And if we now again click on these two rows, so this is the same method that we just used in the "card Styles" one, but this time we're going to be using it for content. Just regular content, just to show you what that looks like.

I'm basically going to finalize that as my last example. So again, you can see we've got a bit of a preview. And this time, you'll notice that it's not showing the little "theme" icon. It's showing that this is actually being detected as normal text content and an image replacement here. So, these columns, it's understanding what kind of content that is, and it's telling us that it's going to map it to those layers that we've got selected.

Again, I'm just going to select both of those card frame layers as the parent layers and loop through those. This time, I'm just going to go top to bottom and click on "Sync Rows." And that's basically going to sync up the content.

You can see here, it's updated the layers from the spreadsheet. And this time, it hasn't done style updates because we didn't use any CSS. This is just a regular old content update, just the way that you would usually do this with the CopyDoc Figma plugin, the main kind of content sync feature. So, this is basically just showing you how to do content changes inside of the spreadsheet. And you can actually do a mixture. So, if you wanted to do style changes and content changes in the same tab, you can definitely do that. The only thing to be mindful of is you can't repeat the label. So, if you had two things of staff name and one was color and one was text, that's probably not going to work. That's just going to double up and get a bit confused. But if you wanted to basically do staff role style, so if you wanted to do staff role change that to black text or something like that, and then you didn't repeat that for content, you could basically have that like this. And that would automatically apply the styles for the staff role layer and it would apply content for these other layers here. You can kind of mix and match. You just can't do a style and content for the same layer at the same time. That's the only thing to be mindful of.

The easiest way to do it is just to try and keep your tabs or spreadsheets separate. It's probably a good idea just to do styles in one and then split out the content in another one, as we just did a second ago.

That's basically it. As I mentioned, you can do this with an Excel file as well. So, if you don't want to use the spreadsheet from Google Sheets, you can basically just do this with a regular Excel file as well. You can structure it in the exact same way. And I'll show you what that looks like.

If we open up the spreadsheet, you can basically just either download your sheet from Google Sheets, just download it as an Excel file, or you can just create a new Excel file in Excel and create tabs or create the same layout. And then you'll be able to drag and drop that into the Figma plugin. So, if you click on "Sync Spreadsheet" and then if you drag and drop your Excel file into this little drop zone, it's going to do the same thing. It's going to give you the options for your tabs. So, for example, we could do the app screen design again. I'm going to click on "app screen," Use Selected Sheet, and then click on "app" and click on "Sync Rows." So, I'm going to click "Sync Rows." And again, you can see we've done the exact same process as we just went through with the Google Sheets version, this time just using a regular Excel file instead.

That's just an alternative if you prefer to use a local file. You can basically go ahead and do that. And that's just going to import it much more quickly because it doesn't have to request the Google Sheets link every time. Using a local Microsoft Excel file is also a great alternative if you prefer to do it that way. It's going to work exactly the same. You just have to structure the spreadsheet the same way that we've just gone through. And you're welcome to use Microsoft Excel instead of Google Sheets if you prefer to do that.

The last thing that I just wanted to really briefly mention is you can find a reference of the supported CSS properties by clicking on the "Sync Spreadsheet" icon down here. And if you go ahead and click on the "CSS docs" link. So, there's a little link here that says "CSS docs." You can click on either of those, and that'll basically take you to the Hypermatic CopyDoc documentation site. That's just a quick overview there.

Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one.