Spacing units
Websites and apps usually have consistent spacing between elements because it makes a design look cohesive, and it’s easier to develop. Atlassian uses an 8px grid system throughout their products. In cases where designs need to be fine-tuned, 4px is used.
For more information, check out this Treehouse video: Space | Introduction to Design Systems
Setting up a grid
Most websites and apps follow a grid system. You can turn on Layout Grid for any Frame.
- Grid: Creates a uniform grid; perfect for showing an overall 8px grid, for example.
- Columns: Creates vertical bars
- Rows: Creates horizontal bars
You can add one or combine several of these to get the effect you want. Tired of looking at the red grid overlays? Toggle them off at any time.
✨ Project Check-in:
In our project file, try aligning content to an 8px grid.
Check spacing measurements
Make sure the spacing between elements is consistent throughout your design. To see the space between elements, use the lines that appear when you move an element around in Figma or Adobe XD. You can also set your keyboard arrows to nudge an element in 1px increments. (Note: You can tweak this in Menu > Preferences > Nudge Amount)
This is nearly impossible to do perfectly as you’re quickly iterating through designs, but take some time at the polishing stage to get this right. Otherwise, if you have a component spaced out a bit differently, the developer may interpret that as an intentional design choice and spend a ton of unnecessary time coding that spacing anomaly. It’s much easier to develop consistent spacing units.
Document with redlining
Before design tooling became as sophisticated as it is now, designers would prepare meticulous documentation for each design. Each screen would be annotated with every pixel dimension, hex color code, spacing between every element, and so on. This is called redlining, and it resulted in big, multi-page PDFs of spec documentation!
Luckily, now that design tooling enables developers to poke around the file, a lot of that redlining work is no longer needed. Developers can interact with the design file, clicking elements for more detail. While an element is selected, they can hover over nearby elements to see the distance between elements.\ But there are times when you want to highlight specific points to ensure they don’t go unnoticed. Anton Lapko has created an awesome redlining kit.
✨ Project Check-in:
In the project file, document the spacing units in the card. Hint: Remember, the design should be aligned to an 8px grid now.
Tip: Turn on the grid for guidance.
New terms:
- Redlining: A design deliverable provided to developers to communicate a design’s specifications. The name refers to the guides, which are often red lines, that note the exact dimensions, spacing, color, etc. of elements in a design.