How to address some of the most common development issues around design
Advanced Figma features to help developers understand your design
“If you can write that down, it would save me so much time.” A developer told me as we walked through my Figma prototype.
The Development team was running into issues when implementing my prototype. These weren’t large-scale design issues that required extensive design documentation to fix. Instead, these were issues with the more minor elements that were screwing up the website.
As a result, we walked through my Figma prototype together, highlighting different things to pay attention to and solving most of the Development team’s woes.
Here are the most common minor issues Developers might have and how to find them in Figma. But to do this, I’ll first introduce Figma’s Inspect panel.
Figma’s Inspect panel, or A style guide for developers
I will have to make one primary assumption: you have a mostly complete prototype in Figma you’re using for reference.
Whenever you click on a layer, frame, or element, there tend to be three options for different panes to select: Design, Prototype, and Inspect.
You’re probably familiar with the first two panes, Design and Prototype, but less familiar with Inspect. This panel is designed for Developers to examine what you’ve designed, especially the CSS.
In simple terms, CSS is like a Developer’s style guide that is used to write rules to make everything look how you want it to. When they click a layer and then the Inspect pane, they can see helpful information coded into CSS, like:
Color
Typography
border-radius
shadow
padding(if Auto Layout is specified)
As a Designer, you don’t need to code anything: this code is automatically generated based on your Design choices. However, this panel is where Developers will look for many design options (since they can copy-paste the CSS into their code).
So if your Developers are running into problems with style issues, like wrong color or typography, check the Inspect pane to ensure everything is how you would want it. If so, you can ask them to copy the CSS and see if that fixes the problem.
Understanding Auto Layout: Margins, Padding, and Border
If you’re using the Auto Layout function in Figma, you’re probably somewhat familiar with Padding, Margins, and Border. They might be simple design choices for you, but Developers need to have these exact numbers because they often follow the ‘Box Model.’
This consists of 4 elements:
Content: The content of the box, where text and images are
Padding: A transparent area around the content (to give the content some space)
Border: A border around the padding and content. It can be a solid line, a drop shadow, etc.
Margin: A set transparent area outside the border.
The problem is that Developers have to look at the image above and translate it into a block of code like this:
div {
width: 200px;
border: 15px grey;
padding: 20px;
margin: 20px;
}
As a result, they often have to guess what each value might be through trial and error. Moreover, improper guesses can often throw other design elements off due to spacing.
So one thing that can help is to look at the actual numbers inside Figma’s Auto Layout. These values exist as numbers, and all that you need to do is pull them up in your prototype.
Some categories (like borders) may not be in the correct format (px), but they will appear correctly in the CSS.
This also has the side benefit of keeping you consistent: if it turns out that some elements in a container (like ‘cards’) have a padding of 17px, and others have a padding of 20px, then you can correct these small changes that might be hard to see.
Another common way of looking at Margins is to click an element and hold the Alt key (or Option key on Mac) while hovering over another element.
However, there is a bonus for spending the time to check these things out: this is also a great way to make a style guide.
Starting a style guide through the Inspect panel
Understanding these minor issues and ensuring everything is consistent across your design can also be the basis of a style guide if you don’t have one.
One of the best ways to ensure consistency across a design is to use Components: that way, it will apply any changes you make to the Component to every single instance across your design.
Guide to components in Figma
Was this article helpful? Before you Start Who can use this feature Component properties remove the guesswork out of…
So making the Component and double-checking the CSS (through the Inspect panel) allows you to create a style guide that your Developers are going to be able to use to build consistent designs across the entire website.
This avoids the complicated and often disastrous game of “telephone” that might occur otherwise.
Help your developers understand your design
One thing I’ve come to understand about designers is that we’re often playing a game of ‘Telephone.’
We listen to the business and their requirements and design something based on their needs. Then we listen to users and iterate on our current design to the point where we’re ready to hand it off to developers.
So it can be a shame for that last round of ‘telephone,’ passing our design to developers, to fall flat. Developers often have to juggle a lot on their plate, rushing between multiple projects and trying and build everything.
Part of the reason I wanted to learn how to help developers was that I’d often heard of the Development team pulling all-nighters, trying to get things to work.
So spending a little time documenting the small things can often make a world of difference for them. What’s better is these options exist in Figma most of the time: all you have to do is write them down to improve your Developer’s life.
Kai Wong is a Senior UX Designer, Design Writer, and author of the Data and Design newsletter. His new book, Data-informed UX Design, explains small changes you can make regarding data to improve your UX Design process.