I have a long-standing beef with static website design tools like Figma, and Sketch before that, and Photoshop before that. Each one has its own powerful and ergonomic features for creating and collaborating on visual assets, and sometimes they can even generate CSS. But the most talented and well-intentioned designer still cannot design a website with one of these things. The best they can do is generate screenshots.
Why is that?
Concerns like accessibility, information architecture, responsiveness and fluidity, and editing/CMS structure are totally missing from a process that is led by screenshot generation.
As much as I'd like our industry to reject this whole genre of tool and start working in the browser, I know that's not happening anytime soon. But we can strive, always, to improve our processes. I've learned a lot of techniques while making websites with and without tools like Figma, with and without other designers and engineers, to launch a successful and robust final product, and today I'd like to remind you of one particular thing.
In layer-based design tools, dragging out a new shape or dropping a piece of text on the canvas creates an object, and that object always has a name. Usually that name starts as something like Rectangle 12 or Frame 36 or Layer 999, or it's named for the text it contains (Lorem Ipsum), and it's quite easy to just leave it that way. After all, you know what that rectangle is for—that's why you put it there. But you'll need to communicate that intention eventually. Even if this is just for you, the you that opens this file back up in six weeks or six months might not remember why Rectangle 3829 has a different border radius than Rectangle 2823. Is that difference meant to convey a difference in meaning, or was it an accident?
The names of your rectangles and groups and layers should not only convey what they are, but also how they do and don't relate to the other things on your canvas. Two things that are both called "Card" should look the same and follow the same rules. If one is different, call it something else! A name like "Hero Card" or "Card / Highlighted" or "Card - Out of Stock" helps everyone understand why it doesn't just mimic "Card."
Because that's what this is really for—conveying information and semantics about the visual choices you've made. The person writing the code needs to know why this Card is blue and that Card is red, because it might affect which API data they use or which copy they pull out of a reference document; the person publishing a new page in your CMS needs to know whether the information they're about to enter should use the "Blue Card" block or the "Red Card" block. Even if all those people are you.
If you're using Figma, you've got to use Components for anything that appears more than once. Even if you're diligent about naming, it's really easy to accidentally introduce inconsistencies when you're copying things around and making adjustments. "Hero Module with Background Gradient" looks identical on the About and Contact pages, but at the mobile breakpoint one has a dashed horizontal rule and the other is solid. Maybe there's a good reason for those differences, but it's also easy for them to look like mistakes. Mercifully, Figma offers a feature for handling component variants that allows you to bake these decisions into your designs in a way that is obvious to the person transforming them and also makes it harder for you to make a mistake while adjusting things. It can also be easier to talk about this stuff in a review if you can name the variants out loud. A good rule of thumb is that if you're laying out a full page in Figma, it should consist entirely and exclusively of components. If there are any one-off layers in there, make sure it's clear to everyone that those are unique to this page (and name them accordingly).
You might think that I'm talking about introducing a Design System, and you might think your project is too simple for a Design System. That term could apply here, but actually what I'm aiming at is Making Decisions. Just like everything has a name whether you name it or not, every decision will be made: if not by you, then by someone implementing your designs, or by the native behavior of your user's browser. Text that's too long for a button will spill out, or break to two lines, or get cut off, or maybe something else. Did you decide which option is best, and is that decision apparent in your work?
Remember Murphy's Law:
If there are two or more ways to do something and one of those results in a catastrophe, then someone will do it that way.
Making decisions early and often is best way to avoid catastrophe. Give your stuff names.