Spacing can be defined as the space that is in between two elements or two viewpoints of the page. Spacing is what makes the elements look consistent and organized, and also helps create an aesthetically pleasing look of the design. Spacings can be multiples of 8xp and use sizing and paddings for a page.
Spacing methods contain baseline grids, keylines, paddings, containers, and touch targets.
The baseline grid can be aligned in 8dp and 4dp and 4dp baseline grid. An 8dp square baseline can be encountered for tablets, mobile, and desktop use.
And a 4dp grid when aligning icons, buttons, and other elements within the components. The 4dp baseline grid can be used when centering within the components. The 4dp baseline grid can also be encountered place outside of the grid, however, placed within a component. In this case, the text can be placed vertically and center-aligned.
Keylines are used to align elements outside the layout of the grid. The keylines are vertical and represent the place where elements should occupy. Keylines are arranged based on the distance of each element from the edge of the page and are measured using an 8dp grid. Keylines have the ability to create more space between elements or shrink it in a layout.
The padding is the space that can be found between the elements that create a component. Padding can also be seen as an alternative manner of spacing to keylines and it is measured with 8 dp and 4 dp. Padding can be measured vertically and horizontally.
Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find various spacing styles and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!
So, get your uinkits package and start designing now!
