image of dan scott introducing how to truncate text in figma

Good Spacing Techniques in Figma

Daniel Scott

@dan

In this post we are exploring spacing and why it’s so important to User Interface (UI) design! I will be showing you my own adaptation of the 8-point grid system and introduce you to a really awesome plugin that can help you share your own spacing rules with clients and team members.

This post is based on my Figma Advanced course. When you become a BYOL member, you gain access to this course as well as Figma Essentials course and my 30+ additional courses on After Effects, Photoshop, Illustrator, Lightroom, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Head here to sign-up!

Let 's move on!

The Importance of Spacing in UI

The way a user perceives an interface influences how easy and enjoyable their interaction with the digital product you are designing will be. 

Good spacing is key to clean and functional interfaces. Appealing designs don’t rely only on strong imaging or harmonized colors. Adequate spacing between all elements helps establish vital design principles, like hierarchy and proximity.

Have a look at this sketch:

two mockup examples of user interface layouts in figma

Don’t laugh too hard, this is just a sketch and I have feelings too…

I may have exaggerated some of the issues to make this example clearer for you, but which of these layouts seems more structured? You got it right! The second screen is much easier to navigate and interact with. Let’s understand why this is:

From top to bottom of the screen:

  • Our eyes flow naturally from image to wordmark, without that huge interruption visible on the first layout. This logo is easier to recognize and more memorable. 

  • The Hero image is now clearly separate from the other imagery. This defines two important perception points: (1) Users understand that there is a particular reason to focus their attention on that object first and (2) The images that follow are set in a different context and will lead users to different flows. 

  • Users will also assume that the four objects are grouped together because the distance between them is smaller than the space that separates them from the hero image and lower navigation icons. In UI design, we call this proximity!

  • Spacing between navigation icons at the bottom of the screen ensures functionality

One last detail you may have noticed on the second layout: spacing doesn’t have to be a rock-solid principle like “all elements must be 8 pixels away from left and right edges of the screen for things to look all nice and aligned.” You can keep things interesting and clear while also applying some level of flexibility. As you can see, the distance to the screen’s edges increases as our eyes flow vertically across the layout. This creates something like a “funneling” effect for our eyes to follow naturally.

in figma

Study layouts from a user’s perspective. Understanding what works and what doesn’t will make you a better designer.

Now that we are more familiar with spacing and its impact on UI layouts, I will share how I usually approach spacing on my own professional designs!

My Version of the Awesome 8-point Grid Rule

The 8-point grid system is a popular framework applied to UI. Basically, it ensures that all objects are sized and spaced in multiples of 8 points, or pixels, in this case. This method allows for a consistent, flexible, and balanced development process, from early wireframing to advanced development stages.

 Timeout #1

Make sure to check our blog post about Layout Grids in Figma to further understand how grids work and how they can streamline UI responsive design workflow.

So, how do I tackle spacing in my daily work and share this structure with a project’s team or stakeholders? Quick and easy, as usual!

I will show you my standard spacing structure, a visual queue that can be adapted to different layouts, screen sizes, and specific projects. It’s all versatile and fun! You will learn other methods as you expand your skills, set up your own framework, which is totally fine, but remember to keep it based on simple mathematics and share it with everyone on your team, so you are all working under the same principles.

Alright, let’s begin!

How to Set Object Size to Multiples of 8 in Figma

Let’s start with what I consider a nice base-level: 8 pixels. An object smaller than this, for example, on a mobile screen, will be quite hard to interact with. We will use the Rectangle tool, from the Shape tools drop-down menu on top of your workspace. You can use the shortcut key R to bring it up. Click and drag to create an 8-pixel rectangle, you can hold down Shift on your keyboard to make it a perfect square. You can also manually set the rectangle’s dimensions in the Properties panel to the right.

drawing an 8-pixel square with the rectangle tool in figma

We start with an 8-pixel square and move up from here.

To speed things up, we can duplicate the first square with the Move tool (shortcut key V on our keyboards). Hold Option on a Mac or Alt on a PC, click and hold over the first square and drag the mouse to the right. This is easy for you, I’m sure, this is Advanced level! Now, let’s apply mathematics to our workflow. Make sure the “Constraint Proportions” option is active, let’s place our mouse cursor over the W (or Width) panel and type ‘+8’ to the width value. Hit Enter. This will add 8 more pixels to the previous 8. Basic math, multiples of 8, easy and consistent! 

using mathematics to calculate width pixel size in figma

We can use calculations in Figma to change object properties and position.

Let’s repeat this step to create a set of seven squares, sized in multiples of 8. I’ve stopped at 56, but you can go on and add some more, or you can start at 40 and move on from there. It's really up to what your needs are and the project you are working on. Look at the image below. We can agree that there is a proportional expansion in the squares’ sizing and they look appealing and safe. Our minds look for patterns and proportions to find comfort and safety, that’s why this structure feels right. However, there is an unbalance in the spacing, right? How does it make you feel? Something’s off, right?

a set of seven squares sized in multiples of eight pixels in figma

Spacing values are hurting the balance we have achieved with proportional sizing.

How to Set Object Spacing to Multiples of 8 in Figma

Let’s continue to build our model and focus on spacing. We will be setting a natural proportional increase to spacing values as well. It will look awesome in the end, believe me!

We know what the closest point between objects is, right? That’s right, it’s zero. Let’s work with mathematics, once again. This time we will change the object position and make our calculations in the X (or horizontal) value field.

Let’s start by joining the first and second squares together and keeping our 16-pixel sized square active. We know it’s active because we can see the blue bounding box around it. Next, we type ‘+4’ after the X field value of 26. This means that we will add 4 pixels to the 16-pixel square’s horizontal position inside the frame.

adding a value of 4 pixels to horizontal position field in figma

You have to admit, this is so cool and easy, even if you are not a math fan!

Spacing will be set with multiples of 4. Don’t worry about it, 8 is a multiple of 4, so proportions are kept nicely and we are still following the 8-point rule.

There is one exception. Spacing between the 16 and 24-pixel squares will be set to 6 pixels. Not a multiple of 4 or 8 but experience shows me that this value works. That’s why I’m keeping it. You can change it, of course, if it makes sense on your current project.

Spacing between the 24 and 32-pixel squares will be set to 8 pixels and then we can keep on expanding this value in multiples of four (12, 16, 20…), until we have a structure that’s similar to what we see in the next image.

proportional size and spacing model in figma

This looks much better now, with a steady proportional increase in size and spacing.

I’ll add some visual interest to these squares, for us to have a better understanding of this proportional effect on our minds and perception.

solid color filled and image proportional size and spacing models in figma

Wow, now this is a handsome use for cute little squares in Figma!

How to Create Design Specs with the Spectral Plugin in Figma

Now that we have designed the shapes for our visual queue, let’s add some more detail so we can share it and apply it all the way through the product development process.

We will be using a popular plugin in Figma, perfect for crafting design specs and systems: Spectral, a.k.a. DesignDoc. Let’s click on the Resources button up in the Toolbar and then click on the Plugins tab. In the search field, type ‘spectral’ and hit Enter. Click on ‘Design Doc [Spectral]’ search reply to run the plugin.

searching for spectral plugin inside the resources panel in figma

Plugins are incredible assets to Figma, they add new features that bring new dimensions to what we can do in UI Design

Inside the plugin’s interface, we click on the ‘Measure’ tab to access the features we are looking for to enhance our framework. Once again, this is all quick and easy! We begin by selecting the first square with the Move tool, then we go back into Spectral, find the Height & Width panel, and click on the width line segment above the shape.

applying width size guideline to an object in figma

How cool is that? One click and the first width guide is drawn over our first square!

Next, we repeat this step to apply guides to all the square shapes we have designed. This adds a completely new layer of readability to anyone who reads our framework.

object sizing framework with pixel width guidelines in figma

Anyone who has a look at this reference can easily understand which dimensions and proportions we have planned for our new UI design.

Let’s work on spacing now and complete our framework model. This is starting to look great!

Let’s select the first and second squares, holding the Shift key as we do it with the Move tool. Automatically, Spectral’s interface changes to display a new feature: ‘Outer spacing’. All we need to do is click on the line segment and there we have it: a 4-pixels guideline properly identifying the spacing we’ve set between our objects.

adding spacing guidelines to framework in figma

Spectral is an intuitive solution that saves a considerable amount of time and resources.

Let’s repeat this last step to all the other squares in our model, always pairing them before clicking on the Outer spacing option in Spectral.

As we can see below, we now have size and spacing guidelines assisting us. In the Layers panel, we find a new Container layer that holds each of these new elements as individual layers. This means that we can perform one more awesome change to our model! 

guidelines container highlighted in the layers panel in figma

Spectral creates a container around our model, displayed inside the layers panel.

Timeout #2

Get UI inspired with this article that focuses on some of the most efficient and user-friendly interfaces. Study them to see how sizing and spacing impacts you as a user.

How to Edit Spectral Guidelines in Figma

We can edit the Guidelines appearance! Font, color, size! So much fun! Let’s have a quick look at how to change color and I’ll let you explore the other settings.

Quickest way to do it: We select the Container layer in the Layers panel by clicking on it. This means that all layers inside this container will be affected. Next, we move our mouse cursor to the Properties panel and find Selection Colors.

Here we can find all the colors that are applied to objects inside the guidelines’ container. We can click on the Fill color squares and use the Color Picker window to select a new color for text, guidelines, and shading.

editing spectral guideline elements attributes in figma

Spectral colors don’t match your brand? No problem, they are all editable.

We can wrap things up by placing our model, all enhanced with Spectral size and spacing guidelines, inside a frame. Then we give it a nice and subtle background color, call it something like ‘Measurements’, and share it with our clients and team members. Awesome!

measurements frame with size and spacing framework guidelines in figma

All elements are stored inside a new frame that can easily be shared with clients and team members.

And there we have it!

This is my approach to spacing and sizing for professional UI design projects. I’ll say it again, it’s my take on this subject, yours can be different, for as long as you make sure that these design decisions stay true and consistent from wireframing to launch and that everyone involved in the development process knows they exist and follows them thoroughly. 

I hope this inspires you to create clean and efficient UI designs! 

What 's Next?

Go further with Figma by joining BYOL. As a BYOL member, you will gain access to my Figma Essentials and Figma Advanced courses as well as my 30+ additional courses on After Effects, Photoshop, Illustrator, Lightroom, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Head here to sign-up!

See you in class! – Dan

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024